vue3+axios项目使用mockjs请求404

问题还原
  • 项目中引入mockjs配置好测试,请求报404错误
    vue3+axios项目使用mockjs请求404_第1张图片
项目框架
  • vue3.2+ts+webpack+axios+mockjs
  • node: 14
  • vuecli:4.5
操作步骤
1.新建一个vue3项目
  • vue create 项目名
    vue3+axios项目使用mockjs请求404_第2张图片
2.安装axios
  • npm i axios
    image.png
3.安装mockjs
  • npm i --save-dev mockjs
    vue3+axios项目使用mockjs请求404_第3张图片
  • npm i --save-dev @types/mockjs
    vue3+axios项目使用mockjs请求404_第4张图片
4.mock接口
  • mock列表数据

    // src/mock/index.ts
    
    import Mock from "mockjs";
    
    const { item } = Mock.mock({
    "item|6": [
      {
        id: "@id",
        label: "@csentence(1,2)",
        value: "@sentence(1)",
        "status|1": ["published", "draft", "deleted"],
        time: "@datetime",
        pageNum: "@integer(0,100)",
        "active|1": [true, false],
      },
    ],
    });
  • 官网文档有详细的语法规则
    vue3+axios项目使用mockjs请求404_第5张图片
5.拦截axios请求
  • // src/mock/index.ts
    
    // 获取mock的响应数据
    const getResponse = (
    url: string,
    type: string,
    data: {}[],
    condition: boolean
    ) => {
    return {
      url,
      type: type || "get",
      response: (config: any) => {
        console.log(config, type);
    
        return condition
          ? {
              code: 200,
              success: true,
              message: "请求数据成功",
              content: {
                total: data.length,
                data,
              },
            }
          : {
              code: 500,
              success: false,
              message: "请求数据失败",
            };
      },
    };
    };
    
    const mocks = [
    getResponse("/api/list", "get", item, true),
    getResponse("/api/productList", "post", item, true),
    ];
    
    export const mockXHR = () => {
    for (const i of mocks) {
      Mock.mock(new RegExp(i.url), i.type || "get", i.response);
    }
    };
6.全局调用
  • mian.ts内调用
    vue3+axios项目使用mockjs请求404_第6张图片
7.测试请求
  • 封装请求api

    // src/api/index.ts
    
    import axios from "axios";
    
    export const getList = () => {
    return axios("/api/list");
    };
    
    export const getProductList = (data:object) => {
    return axios({
       method:'post',
       url:"/api/list",
       data
    });
    };
  • 页面调用接口测试

    // src/views/test.vue
    
    
    
    
    
    
    

    vue3+axios项目使用mockjs请求404_第7张图片

总结:
  • mockjs根据匹配到的url字段拦截axios请求,打开控制台network不会发网络请求,一旦匹配到相应的返回自己mock的响应数据;
  • 之所以控制台报请求404的错误,是因为没有拦截到请求,在本地开发还没有后台的时候依然请求这个地址自然会报404;
  • 务必检查拦截url字段 以及 请求方式(本人栽坑处)非常重要
相关链接

你可能感兴趣的