接口和数据模拟

网络请求

使用axios进行远程接口请求。

建议完善返回及请求数据的类型定义。

import http from '@/utils/http'
export interface LoginData {
    username: string;
    password: string;
    key?:string,
    captcha?:string;
}

export function getCaptcha(){
    return http.get('/admin/login/captcha');
}

mock解决方案

import Mock from 'mockjs';
import {
    successResponseWrap,
} from '@/utils/setup-mock';

Mock.mock(new RegExp('/api/chatList'), () => {
    const data = Mock.mock(successResponseWrap({
        'data|4-6': [
            {
                'id|+1': 1,
                username: '用户7352772',
                content: '马上就开始了，好激动！',
                time: '13:09:12',
                'isCollect|2': true,
            },
        ],
    }));

    return data.data;
});

当客户端发送请求的 url 被 new RegExp('/api/chatList') 匹配到，Mock.js 就会拦截这条请求，并执行对应的回调函数，返回回调函数中 return 的数据。

注意：被 Mock.js 匹配并拦截的请求，不会出现在开发者工具的 network 面板中。

关闭 Mock

为了方便开启和关闭数据模拟功能，每个 Mock 都会被 setupMock.setup 包裹，setupMock 如下：

import { debug } from './env';
export default ({ mock, setup }: { mock?: boolean; setup: () => void; }) => {
    if (mock !== false && debug) setup();
};

非生产环境下默认启动数据模拟，当我们需要调试接口的时候只需要将 setupMock 的 mock 参数置为 false 即可，如下：

为了方便开启和关闭数据模拟功能，每个 Mock 都会被 setupMock.setup 包裹，setupMock 如下：

import Mock from 'mockjs';
import setupMock from '../utils/setupMock';

setupMock({
    mock: false
    setup() {
        // 用户信息
        Mock.mock(new RegExp('/api/userInfo'), () => {
            return {
                name: 'name',
            };
        });
    },
});