【个人学习笔记】vue项目拦截前端请求并使用mock模拟后台返回数据

步骤

首先在项目中安装mock

npm install mockjs

安装完成后在项目中添加mock文件夹，在文件夹中新建index.js

在该文件中引入mock、声明随机数据、暴露拦截方法

const Mock = require("mockjs")    //引入mockjs

const data = Mock.mock({    //声明用mock随机生成的数据
    id:"@id()"
})

module.exports = function (app) {    //暴露一个函数，用于拦截请求时触发
//app是一个请求实例，.get方法第一个参数传需要拦截的url，第二个参数传一个函数，该函数有两个参数
//通过res.json将上面声明的随机数据转为json并作为请求的返回值返回
    app.get('/api/testMock', (req, res) => {    
        res.json(data)
    })
}

在config.js中配置拦截，使用devServe.before，这是一个在所有请求前先进行的函数，如果在这里请求有返回值，就不会继续走真实请求，这也是拦截请求的原理和关键步骤。我们在这里直接引入刚刚编辑好的index.js，该js文件暴露的函数将在这里调用。

//config.js文件代码
module.exports