关于vue.js:vue使用Mock模拟接口数据

1.开发环境 vue2
2.电脑系统 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.本期的分享到了这里就完结啦,心愿对你有所帮忙,让咱们一起致力走向巅峰。