¿Cómo axios en vue3 coincide con la interfaz de simulación de mockjs para importar módulos automáticamente, y los datos de cada interfaz de solicitud son inconsistentes?

Tabla de contenido

1 relacionado con axios

1.1 Introduciendo axios

1.2 Agregar intercepción de solicitudes

1.3 Use axios para llamar a la interfaz

1.4 Probar si axios tiene éxito

2 mockjs relacionados

2.1 Primero instale mockjs

2.2 Según sus propias necesidades, cree una carpeta para almacenar el código de la interfaz analógica

2.3 Cree un archivo test.js en _modules y escriba un código de prueba

2.4 Introduzca el código del módulo en mock/index.js

2.5 Introducir simulacro en main.js

2.6 Probar si el simulacro es exitoso

---

Dirección de origen https://github.com/liuxin00020/vue3-elementplus-axios-mock-echarts ​​​​​​​​1 axios relacionados

1.1 Introduciendo axios

npm install axios --save

1.2 Agregar intercepción de solicitudes

Cree un archivo axios.js en una ubicación adecuada (el blogger está en utils/axios.js), el blogger es perezoso y la intercepción es muy simple

/*
 * @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 Use axios para llamar a la interfaz

Prueba a ver si la intercepción se hace efectiva con el código apropiado. El código de Blogger está en 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 Probar si axios tiene éxito

En este momento, si no hay backend y se informa un error 404, significa que axios ha tenido éxito. Si tiene éxito, mire hacia abajo. Si falla, encuentre el motivo usted mismo.

    /**
     * @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 relacionados

2.1 Primero instale mockjs

Lo uso en el entorno de desarrollo, por lo que está instalado en la dependencia de desarrollo.

npm install mockjs --save-dev

2.2 Según sus propias necesidades, cree una carpeta para almacenar el código de la interfaz analógica

index.js es el archivo de entrada, y _modules es el código de interfaz analógica de los módulos relevantes, que se introduce automáticamente aquí, es decir, solo necesita escribir el código correspondiente en el archivo de creación de _modules en el futuro

2.3  Cree un archivo test.js en _modules y escriba un código de prueba

/*
 * @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 Introduzca el código del módulo en 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 Introducir simulacro en main.js

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

2.6 Probar si el simulacro es exitoso

Antes de llamar a la interfaz, se informó un error 404. Ahora actualice y mire el resultado, y la impresión ha sido exitosa.