关于vue3:vue3axios项目使用mockjs请求404

问题还原

• 我的项目中引入 mockjs 配置好测试，申请报 404 谬误
  

我的项目框架

• vue3.2+ts+webpack+axios+mockjs
• node: 14
• vuecli:4.5

操作步骤

1. 新建一个 vue3 我的项目

• vue create 我的项目名
  

2. 装置 axios

• npm i axios
  

3. 装置 mockjs

• npm i --save-dev mockjs
  
• npm i --save-dev @types/mockjs
  

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],
    },
  ],
  });

• 官网文档有具体的语法规定
  

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 内调用
  

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
  
  <script setup lang="ts">
  import {getList, getProductList} from "../api/index";
  
  const test = async () => {let res1 = await getList();
  let res2 = await getProductList({id: 0});
  console.log("mock-get", res1);
  console.log("mock-post", res2);
  };
  </script>
  
  <template>
  <div id="Container">
    <button @click="test">mock 数据 </button>
  </div>
  </template>
  
  <style lang="scss" scoped>
  #Container {
  height: 50vh;
  border: 10px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  </style>
  

总结：

• mockjs 依据匹配到的 url 字段拦挡 axios 申请，关上控制台 network 不会发网络申请，一旦匹配到相应的返回本人 mock 的响应数据；
• 之所以控制台报申请 404 的谬误，是因为没有拦挡到申请，在本地开发还没有后盾的时候仍然申请这个地址天然会报 404；
• 务必查看拦挡 url 字段 以及 申请形式（自己栽坑处）十分重要

相干链接

• mockjs 官网: http://mockjs.com/