Axios Mock 的一种方法

前端在写页面逻辑时，后端的接口还没好，又不想等到接口好了再开发，这时候怎么办呢？就需要 Mock 来帮忙了，发同样的请求，返回的数据却可以自己定义，发请求的代码写好了也不用改，多好。

介绍一个工具 axios-mock-adapter 可以实现这个功能

使用方式

1. 以开发依赖的形式安装：

npm install axios-mock-adapter --save-dev

2. 创建适配器

var axios = require("axios");
var MockAdapter = require("axios-mock-adapter");

// 将 axios 实例作为参数传入，MockAdapter 就会改造这个 axios 示例，
// 通过这个 axios 实例发送的请求，将会被引导到自己定义的返回，而不会真正去请求接口
var mock = new MockAdapter(axios);

// 使用 mock 监听 /users 这个 GET 请求，并指定响应的数据
// 走 mock 时，该接口返回 reply 方法中指定的数据
mock.onGet("/users").reply(200, {
  users: [{ id: 1, name: "John Smith" }],
});

3. 代码中的接口请求逻辑

function listUsers() {
	// 不管是不是走 mock，这里都不用改动
	axios.get("/users").then(function (response) {
	  console.log(response.data);
	});
}

我的使用姿势

1. 创建一个 mock 对象，便于快速使用

/**
 * 使用 axios-mock-adapter 进行 mock
 */
export class UseMock {
    _axiosIns
    _mock
    _useInterceptor = true

    constructor(axiosIns, useDefaultRespInterceptor = true) {
        this._axiosIns = axiosIns
        this._useInterceptor = useDefaultRespInterceptor;
        return this._wrapper()
    }

    _wrapper() {
        if (!this._axiosIns) {
            this._axiosIns = require('axios')
        }

        if (this._useInterceptor) {
            this._axiosIns.interceptors.response.use(
                response => {
                    return response.data
                },
                error => {
                    return Promise.reject(error)
                }
            )
        }

        this._mock = new (require('axios-mock-adapter'))(this._axiosIns)
        return this._mock
    }
}

2. 调用

// 全局自定义 axios 对象
import request from '@/utils/request'

// 实际发请求的 axios 对象，默认是全局定义的，如果是 mock 则换成另外一个
let doRequest = request
const useMock = true

if (useMock) {
	// 使用 mock 就创建新的 axios 对象，否则请求还是会发到旧的 axios 路径上
    doRequest = require('axios')
    let mock = new UseMock(axiosIns);
    // 注册一个 mock
    mock.onPost('/test/list').reply(200, {
		Lines: [
            {LineId: 'path-Kd1cjf'},
            {LineId: 'path-qd1cjf'}
        ]
	})
}

// 业务逻辑里这样发请求
doRequest({
    url: '/test/list',
    method: 'post',
    data
})