mock数据

仅供参考
记录一下前端mock数据的的方法

传统的mock方法可以看mock.js官网：http://mockjs.com/
（虽然mock数据都是一样为了给联调打基础，最好是用自己习惯的方法
作者只是在工作之余记录一下在实体项目中本次的使用方法）

在看如何mock之前，先记录一下封装的axios（视自己项目的情况配置）

src/utils/request

import axios, { AxiosResponse } from 'axios';
import { message } from 'antd';

const enum CMD_CODE {
    SUCCESS = '0',
    FAILURE = '-1',
}
interface CmdResponseData<TData = any> {
    c: CMD_CODE;
    d: TData;
    m: string;
}

axios.interceptors.response.use(
    (response: AxiosResponse<CmdResponseData>) => {
        const { data: responseData } = response;
        const { m: message, c: code } = responseData;
        if (code && code !== CMD_CODE.SUCCESS) {
            message.error({
                title: `请求失败`,
                content: message,
            });
            return Promise.reject(new Error(message));
        } else {
            return response ? response.data.d : response;
        }
    },
    (error) => {
        const { status, data } = error.response;
        if (status === 451 || status === 401) {
            return Promise.reject(error);
        }
        message.error({
            title: `请求失败`,
            content: status === 504 ? '网关超时,请重试' : data.m || data,
        });
        return Promise.reject(error);
    }
);
export default axios;

接下来就是mock方法了
src/mock

import MockAdapter from 'axios-mock-adapter';

import axios from '@/utils/request';

//new MockAdapter(axiosInstance: AxiosInstance, options?: MockAdapterOptions | undefined): MockAdapter
//参数类型
const mock = new MockAdapter(axios);

mock.onGet('url').reply(200, {
    c: 0,
    m: '',
    d: {
        data
    },
});
mock.onPost('url').reply(200, {
    c: 0,
    m: '',
    d: {
       data
    },
});

最重要的一步是在项目的入口文件中引入这个mock文件，将mock与整个项目连接起来。