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

1.开发环境 vue2
2.电脑系统 windows11专业版
3.在开发的过程中,咱们在没有接口的时候须要模仿接口数据,怎么操作呢?应用Mockjs。
4.装置Mock:

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