vue使用Mock模拟接口数据

1.开发环境 vue22.电脑系统 windows11专业版3.在开发的过程中,我们在没有接口的时候需要模拟接口数据,怎么操作呢?使用Mockjs。4.安装Mock:

yarn add mockjs -D
or
npm i mockjs -D

5.在项目中新建Mock相关的文件(GolbMethods/MockApi.js):

import Mock from "mockjs";

const drawData = {
  result: 1,
  reward: {
    productName: "家长伴学月卡",
  },
};

Mock.mock("/api/draw", "get", drawData);//生抽抽奖模拟接口

5-1.新建Api文件,存放接口(GolbMethods/Api.js):

import axios from "axios";

// export const drawApi = () => axios.get("/api/draw");
export const drawApi = () =>
    new Promise((resolve) => {
      setTimeout(() => {
          return resolve(axios.get("/api/draw"));
      }, 3000);
});

6.在main.js中引入:

require("./GolbMethods/MockApi.js");

7.在对应的vue文件中使用:

import { drawApi } from "../GolbMethods/Api.js";

methods代码:

async drawA() {
  const res = await drawApi();
  console.log(res);
},

mounted代码:

this.drawA();

// 效果如下:

8.本期的分享到了这里就结束啦,希望对你有所帮助,让我们一起努力走向巅峰。