0
点赞
收藏
分享

微信扫一扫

【个人学习笔记】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 = {
  devServer: {
    before: require("./src/mock/index.js")
  }
}

此时我们再请求"/api/testMock"就会在浏览器控制台的netWork里面看见一个跟访问真实接口一样的请求,且请求返回值正如我们设定的一样。

总结原理:

前端发送请求后在devServe.before中运行mock/index.js暴露的函数,捕捉到url一致,直接返回mock设定的数据,有返回值了就不会继续真实请求,拦截成功,请求没有往后台去,而是在前端完成了虚拟请求。

小白自学,欢迎指教!

举报

相关推荐

0 条评论