目录

1 axios相关

1.1 引入axios

1.2 添加请求拦截

1.3 使用axios调用接口

1.4 测试axios是否成功

2 mockjs相关

2.1 首先安装mockjs

2.2 根据自己的需求，创建一个文件夹，用于存放模拟接口的代码

2.3 在_modules创建一个文件test.js，编写一个测试代码

2.4 在mock/index.js下引入模块代码

2.5 在main.js引入mock

2.6 测试mock是否成功

---

源码地址https://github.com/liuxin00020/vue3-elementplus-axios-mock-echarts​​​​​​​1 axios相关

1.1 引入axios

npm install axios --save

1.2 添加请求拦截

在合适位置创建一个axios.js文件（博主在utils/axios.js）,博主比较懒，拦截写的很简单

/*
 * @Author: liuxin
 * @Date: 2022-04-19 15:42:34
 * @LastEditors: liuxin
 * @LastEditTime: 2022-06-10 14:13:53
 * @Description: 请求拦截
 */
import axios from "axios";
import { ElMessage } from 'element-plus'
import "element-plus/es/components/message/style/css"

// 这里打包后，可以修改根目录下的config.js进行修改
axios.defaults.baseURL = Window.apiConfig[process.env.NODE_ENV].baseUrl

// 请求拦截器，内部根据返回值，重新组装，统一管理。
axios.interceptors.response.use(res => {
    const { data } = res;
    if (typeof data !== 'object') {
        ElMessage.error('服务器异常，请联系管理员')
        return Promise.reject(res);
    }
    if (data.code != 200) {
        if (res.data.message)
            ElMessage.error(res.data.message)
        return Promise.reject(res.data);
    }

    return data
}, (err) => {
    ElMessage.error({
        showClose: true,
        message: '服务器异常，请联系管理员',
        type: 'error',
    })
    return Promise.reject(err)
})

export default axios;

1.3 使用axios调用接口

在合适的代码下面试试拦截有没有生效，博主代码在apis/mockTest.js

/*
 * @Author: liuxin
 * @Date: 2022-06-10 13:59:41
 * @LastEditors: liuxin
 * @LastEditTime: 2022-06-10 16:05:46
 * @Description: 测试mockjs
 */
import axios from "@/utils/axios.js"

/**
 * @description:  或者列表
 * @Author: liuxin
 */
export const getUseList = (param) => {
    return axios.post('/getUseList', param)
}

1.4 测试axios是否成功

这个时候如果没有后端，报错404，那说明axios已经成功了，成功则往下看，未成功自行查找原因

    /**
     * @description: 获取数据
     * @Author: liuxin
     */
    const getList = () => {
      state.loading = true;
      getUseList({ userName: state.userName })
        .then((res) => {
          state.loading = false;
          state.tableData = res.data;
        })
        .catch(() => {
          state.loading = false;
          state.tableData = [];
        });
    };

2 mockjs相关

2.1 首先安装mockjs

本人是开发环境下使用，所以装在开发依赖里面

npm install mockjs --save-dev

2.2 根据自己的需求，创建一个文件夹，用于存放模拟接口的代码

index.js是入口文件，_modules是相关模块的模拟接口代码，这里做了自动引入，也就是说，后续只需要在_modules创建文件写入相应代码即可

2.3 在_modules创建一个文件test.js，编写一个测试代码

/*
 * @Author: liuxin
 * @Date: 2022-06-09 17:21:17
 * @LastEditors: liuxin
 * @LastEditTime: 2022-06-10 16:44:38
 * @Description: 测试mock接口数据
 */
/**
 * @description:  测试
 * @Author: liuxin
 */
import Mock from "mockjs";
export default [
    {
        url: "/api/getUseList", // 这个url就是后端给的url，需要与apis里面调用的url保持一致
        type: "post",
        getData: (param) => {
            return Mock.mock({
                code: 200,
                message: "success",
                param: param,
                "data|1-20": [{
                    'date': "@date",
                    'name': param.userName + "@string(5)",
                    'age': "@integer(1, 100)",
                    'sex|1': ['男', '女', '未知'],
                }]
            })
        }
    },
];

2.4 在mock/index.js下引入模块代码

/*
 * @Author: liuxin
 * @Date: 2022-06-09 17:21:03
 * @LastEditors: liuxin
 * @LastEditTime: 2022-06-10 16:50:42
 * @Description: 模拟接口自动引入入口页
 */
import Mock from "mockjs";

// 自动引入模块
const modulesFiles = require.context('./_modules', true, /\.js$/);

const mocks = modulesFiles.keys().reduce((modues, item) => {
    return [...modues, ...modulesFiles(item).default];
}, [])

// 设置拦截ajax请求的响应时间
Mock.setup({
    timeout: "200-1000"
});
// 遍历mock配置项
mocks.forEach(item => {
    Mock.mock(item.url, options => {
        const { type, body } = options;
        if (item.type !== type.toLowerCase()) {
            return { code: 500, msg: `该接口不支持${type}方式` };
        } else {
            return item.getData(JSON.parse(body)); // 这样每次调用接口，返回的数据才不一样
        }
    });
});

2.5 在main.js引入mock

// 引入mocks，测试接口
if (process.env.NODE_ENV === "development") {
    require("./mock");
}

2.6 测试mock是否成功

之前调用接口报错404，现在刷新看一下结果，打印出来已经成功