前端如何用mockjs插件模拟接口调用

mockjs的功能：1.生成随机数；2.拦截 Ajax 请求

npm install mockjs 

 1.生成随机数

// 导入 Mock
import Mock from 'mockjs'
// 调用方法得到随机数据
 const data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
       `list|1-10`: [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
		'id|+1': 1
	}]
})
// 将数据进行打印
console.log(JSON.stringify(data, null, 4))
 
// ==>
{
    "list": [
        {
            "id": 1
        },
        {
            "id": 2
        },
        {
            "id": 3
        }
    ]
}
 

JSON.stringify() 方法将 JavaScript 对象转换为字符串。

JSON.stringify(value[, replacer[, space]])

value:
必需， 要转换的 JavaScript 值（通常为对象或数组）。

replacer:
可选。用于转换结果的函数或数组。

如果 replacer 为函数，则 JSON.stringify 将调用该函数，并传入每个成员的键和值。使用返回值而不是原始值。如果此函数返回 undefined，则排除成员。根对象的键是一个空字符串：""。

如果 replacer 是一个数组，则仅转换该数组中具有键值的成员。成员的转换顺序与键在数组中的顺序一样。当 value 参数也为数组时，将忽略 replacer 数组。

space:
可选，文本添加缩进、空格和换行符，如果 space 是一个数字，则返回值文本在每个级别缩进指定数目的空格，如果 space 大于 10，则文本缩进 10 个空格。space 也可以使用非数字，如：\t。

2.拦截 Ajax 请求

当前端的静态页面铺设完成，而后端的接口还没有写好时，可以询问后端返回数据的格式，使用 mockjs 来模拟后端接口的调用

Mock.mock()拦截 Ajax 请求的三个参数：

第一个参数：要拦截的请求路径

第二个参数：要拦截的请求方式

第一个参数：拦截后的处理逻辑

// mock/index.js
import Mock from 'mockjs'
import mockServer from './mockServer'
/* 接口里的地址 请求方式 mock中对应的返回 */
/* 入库单列表 */
Mock.mock(/\/instock\/test/, 'post', mockServer.getInstockList)

// mock/mockServer.js
const list = {
	"code": 10000,
	"data": [
		{
			"num": "2000042812034758000007",
			"createTime": "2022-08-28 17:18:14",			
		},
		{
			"num": "2000042812034758000008",
			"createTime": "2022-08-28 17:18:14",
	  }
  ],
	"msg": "success"
}
export default {
  /* 入库单列表 */
  getInstockList: () => {
    return {
      total: list.length,
      data: list
    }
  }
}

//main.js
import '@/mock/index.js'

/* 封装mock接口 然后正常使用 */
export const instockListb= (data) => (
  service({
    url: '/instock/test',
    method: 'post',
    data,
  })
)