使用Mock.js模拟接口数据

前端可以使用 Mockjs 在后端接口给出之前，模拟接口返回。

下载

npm install mockjs @types/mockjs --save-dev

创建 mock/index.ts 并配置接口路径、接口类型、返回值

import Mock from "mockjs"

// 参数：url、type、body
Mock.mock("/api/getData", "get", {
	getData: () => {
	    return {
	      code: 200,
	      msg: "success",
	      data_list: [
	        {
	          name: "test1",
	          value: 100,
	        },
	
	        {
	          name: "test2",
	          value: 200,
	        },
	      ],
	    }
  	}
})

main.ts 中引入 mock/index.ts

import "@/mock/index"

此时 mockjs 会拦截请求， 所以控制台中看不到该接口对应的请求，但是模拟的数据已经拿到了。