关于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/