关于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. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰。