看一遍学会Vue结合axios使用mockjs

网上搜了一下也没有比较全的代码，下面总结后介绍一下

mockjs作用：在后端接口未开发完成情况下，前端自己模拟接口返回的数据

步骤：

1.下载mockjs与axios

npm i mockjs

npm i axios

2.在vue文件src下新建mock文件夹与内部mock.js 文件

 mock.js 文件内部：

• 引入mockjs
• 设置延时请求时间
•  配置请求拦截

// 引入mockjs
import Mock from "mockjs";

//延时200-600毫秒请求到数据
Mock.setup({
  timeout: "200-600",
});

// 配置请求拦截
Mock.mock('/mock/tableDataOne', {
  data: {
    mtime: "@datetime", // 随机生成日期时间
    "score|1-800": 800, // 随机生成1-800的数字
    "rank|1-100": 100, // 随机生成1-100的数字
    "stars|1-5": 5, // 随机生成1-5的数字
    nickname: "@cname", // 随机生成中文名字
  },
});

3.main.js文件中引入mock.js文件

import './mock/mock.js'

4.src下新建api文件夹与reques.js封装axios请求

//这里建议给axios统一设置了基地址，大家根据需求配置请求响应拦截即可
import axios from 'axios'
const require = axios.create({
    baseURL:'/mock'
})
export default require

 5.在.vue文案中引入request并发送请求(这里在mouted中做了简单的测试使用)

第2步我们在mock.js文件中mock了一个路径，采用的是：

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回。

这意味着当mockjs匹配到‘/mock/tableDataOne’这个路径时，就会返回对象中的数据

async mounted() {    
    // 发请求获取mock数据
    const tableDataOne = await request({
      url: "/tableDataOne",
      method: "get",
    }); 
    console.log(tableDataOne, "tableDataOne");
 },

控制台打印结果：

 总结：mockjs可以拦截到匹配 rurl路径 的 Ajax 请求，这里的url可以是固定的路径地址，也可以使用正则表达式进行匹配，同时Mock.mock方法有不同的参数，上面只列举了一种参数，具体大家可以参考mockjs官网：Mock.mock() · nuysoft/Mock Wiki · GitHub

扩展：

第2步mock.js文件中添加mock模拟代码

Mock.mock(/\/mock\/mode1/, (option) => {
  console.log(option, "option"); // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null }
  return Mock.mock({
    msg: "successful",
    outData: {
      name: "@cname", // 随机生成中文名字
    },
  });
});

第5步在.vue文件的mounted中使用封装的request发送一个新的请求

const mode1 = await request({
      url: "/mode1",
      method: "get",
      params: {
        name: 123,
      },
    });
    console.log(mode1, "mode1");

控制台打印结果：