接口挂了？没事，我在vue.js中实现自动生成数据的网络请求，拷贝即用，速来围观！

🍭 介绍

本篇文章中，我们约定前端和后端沟通的桥梁称为网络模块。日常学习工作中，经常因为网络模块混乱难拓展而头疼，时常因为后端接口无法提供而停滞不前。为解决开发时的痛点问题，经过学习探究，封装了一个轻量化、自由拓展、低耦合的网络模块。无需经过后端服务返回字符串、数字、布尔值、数组、图片等随机数据，支持取消请求、配置覆盖、请求状态提示、文件上传、下载等功能，极大地提升前端的开发体验。

💊 解决痛点问题

1. 后端资源不足，无法提供接口，需要写又长又臭的假数据测试；
2. 开发用于演示的静态网页，暂时不需要后端接口；
3. 后端接口不稳定时常崩溃无数据，影响前端开发体验；
4. 产品上线后，需要维护定制，普通的网络模块隔离性、拓展性、自由度不高。害怕修改后影响原先功能，导致复制一份同样文件，增加代码冗余，写法各异，难以形成团队规范；
5. 某些接口展示请求状态提示信息，例如：错误提示，成功提示；
6. 开发环境下配置不好代理服务器；
7. 特定场景下需要取消向后端请求；

💻 测试环境

1. Vue.js 2.6.11；
2. Mockjs2；
3. Axios 0.21.1；

📙 规约原则

1. 配置生效原则遵循，后配置权重最高；
2. 数据模拟，根据接口约定的数据格式规则，返回随机生成数据，请求不真实发出，浏览器无法查询到接口调用，无需经过后端服务；

🧩 目录结构

network
├─api.js				// 请求接口
├─config.js			// 配置
├─http.js				// Axios实例
├─intercept.js	// 拦截器
├─request.js		// 请求方法实例
└utils.js				// 辅助方法

🚀 工作流程

简要的功能流程描述图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qKbe89Jw-1683452074497)(null)]

📌 请求方法说明

基于axios实例，封装了get、post、upload等请求方法，根据url自动注册Mock拦截，支持在请求方法中设置默认的配置。灵感来源于切面编程的思想，提高接口的灵活度，具体逻辑处理移步查阅request.js文件。

// request.js

/**
 * get请求方法
 * @param {String}  url         接口地址 必填														
 * @param {Object}  mockData    随机数据（硬编码对象｜Mock数据格式｜函数）选填
 * @param {Boolean} FWS         数据模拟功能开关 选填
 */
get(url, mockData, FWS)

/**
 * post请求方法
 * @param {String}  url         接口地址 必填														
 * @param {Object}  mockData    随机数据（硬编码对象｜Mock数据格式｜函数）选填
 * @param {Boolean} FWS         数据模拟功能开关 选填
 */
post(url, mockData, FWS)

/**
 * 上传请求方法
 * @param {String}  url         接口地址 必填														
 */
upload(url)

/**
 * 通过URL链接下载文件
 * @param {String}  url         文件地址 
 * @param {String}  filename    文件名称 
 */
downloadFileByUrl(url, filename)

/**
 * 通过二进制流下载文件
 * @param {Blob}      content   二进制流
 * @param {String}    filename  文件名称（不带后缀）   
 * @param {String}    MIME      MINE类型        
 * @param {Function}  callback  回调函数
 */
downloadFileByBlob(url, fileName, MIME, callback)

💡 请求接口约定示例

无数据

无数据模拟功能的正常接口，只有一个参数。

// api.js
const login = get('/user/login')
const register = post('/user/register')

有数据无逻辑

有数据模拟功能，但是不能根据请求参数进行逻辑处理后返回。当模拟功能开启时，调用请求接口并不会真实的发出，而是通过第二个参数控制返回随机数据。如果第二个参数为普通的对象，则原样返回，若第二个参数为mock数据格式，则由数据格式生成数据后返回。数据模拟功能在开发环境下默认开启，生产环境下默认关闭，支持通过传入第三个布尔值参数，精准控制接口数据模拟功能的开关状态。

// api.js
const mockTest = get("/mock/test", {
  // 生成含5-10个元素的数组
  "persons|5-10": [
    {
      "name|1-6": "花", // 字符串
      "status|1": true, // 布尔值
      "type|1": ["在线", "离线"], // 数组中其一
      "headIcon|": Mock.Random.image("50x50", '#ec7168', "花森"), // 特定尺寸图片
      'key|+1': 1, // 递增整型
      "longitude|119.8": 1.36, // 经度
      "latitude|26.8": 1.03, // 纬度
    }
  ]
}, true)

有数据有逻辑

既有数据模拟功能，又能根据请求参数进行逻辑处理后返回。当模拟功能开启时，调用请求接口并不会真实的发出，而是通过第二个参数传入函数经过逻辑控制后返回数据，其中函数的形参包含有请求携带的参数。该功能同样在开发环境下默认开启，生产环境下默认关闭，支持通过传入第三个布尔值参数，精准控制接口数据模拟功能的开关状态。

// api.js
const mockTest = get("/mock/test", function (param) {
  console.log("请求参数", param)
  // 逻辑判断代码块
  return {
    name: 'huasen',
    age: 18
  }
}, true)

🤖 请求接口调用说明

灵感来源于切面编程的思想，我们在多个阶段可以设置请求配置，它们逐层覆盖，提高接口的灵活度。具体优先级规则如下所示：

1. 生成Axios示例时候的配置优先级最低；
2. 封装get、post请求方法时候的配置优先级较高；
3. 请求接口调用时候配置的优先级最高；

// 约定的请求接口
const login = get('user/login')

/**
 * 请求接口调用说明
 * @param {Object} param    请求携带的参数      
 * @param {Object} config   请求配置   
 */
login(param, config)

// 调用示例
login({}, {baseURL: '/demo-dev'})

🐛 快速入门

入门整合教程选取Vue-cli搭建的工程，并且默认已经安装Axios、Mockjs2。若项目内未有相关的依赖，可以执行npm install axios mockjs2 --save进行安装。

模块引入

引入工作十分简单，复制network到前端工程的src目录下，可以任何位置引用api.js文件，调用请求接口发起请求。

src
├─...			// 其他文件
└network  // 网络模块目录

约定请求接口

通常在api.js文件中约定请求接口，当然不同团队可以建立专属的请求接口文件，最后汇总到api.js统一导出。

// 引入相关资源
import Mock from 'mockjs'
import { get, post } from './request.js'
// 约定的请求接口
const login = get('/user/login')
const register = post('/user/register')
const mockTest = get("/mock/test", {
  "persons|5-10": [
    {
      "name|1-3": "花",
      "status|1": true,
      "type|1": ["在线", "离线"],
      "headIcon|": Mock.Random.image("50x50", '#ec7168', "花森"),
      'key|+1': 1,
      "longitude|119.8": 1.36,
      "latitude|26.8": 1.03,
    }
  ]
})
// 统一导出
export default {
		login,
    register,
    mockTest,
}

绑定 Vue 原型

进入main.js入口文件，把请求api绑定到Vue的原型中，免去后期频繁引入，.vue单文件组件中直接可以通过this进行访问，快速调用请求接口，进行发起请求。

import Vue from 'vue'
import api from '@/network/api.js'
Vue.prototype.API = api;

发起请求

单文件组件

由于.vue结尾的单文件组件直接继承于Vue原型，所以直接通过this.API可以访问到约定的请求接口，快速调用发起请求。

// Home.vue文件中
...
mounted() {
  // mock功能请求
  this.API.mockTest().then(res => {
    console.log('mock随机数据', res.data);
  });
  // 正常请求
  this.API.login();
},

js文件

普通javascript的文件需要引入Vue，通过Vue.prototype.API可以访问到约定的请求接口。

import Vue from 'vue'
Vue.prototype.API.login()

取消请求

某些场景下，需要通过取消已经发送但未响应的请求来减少性能的消耗。网络模块默认封装的get、post请求方法预留取消令牌的配置，可以调用请求接口时在请求配置中传入_cancelable字段控制请求是否可被取消。经过调用时配置后，我们就可以从config.js文件中导出source对象，调用cancel方法实现取消已经发出但为响应的请求。

import Config from '@/network/config.js'
// 调用请求接口
this.API.login(
  {
    name: '花森',
    age: 18,
  },
  {
    _cancelable: true,
  },
);
// 取消请求
Config.source.cancel('手动取消请求');

🥳 联系我们

由于涉及知识面较广，文字讲解篇幅过大，可以关注我的 Bilibili 账号，后续更新视频教程，感兴趣的小伙伴可以添加站长微信 ，进入前端技术交流群！

🐧企鹅QQ：184820911

😸微信 ：huasencc（站长邀请进入前端交流群）

📮邮箱 ：184820911@qq.com

📺哔哩哔哩：花森酱 JioJio

🦑代码示例地址：https://github.com/huasenjio/huasen-portal/tree/main/src/network