Nuxtjs 2 - axios & mockjs
文章目录
- Axios Module - XHR 封装
- 安装
- 自定义 Axios
- Mockjs - 测试
- 安装
- 测试
- 可能遇到的坑
- request.upload.addEventListener is not a function
承接上一篇, 继续整合 axios module 和 mockjs …
Axios Module - XHR 封装
区别于直接引入 Axios 的做法, 这里使用 Axios Module, 后者是 Nuxt 提供的官方集成.
ref: https://axios.nuxtjs.org/
package.json 中,
"dependencies": {
...
"@nuxtjs/axios": "^5.3.6"
}
安装
如果在脚手架构建过程已经选择了 axios module, 可以忽略这一步.
npm install @nuxtjs/axios
nuxt.config.js
module.exports = {
modules: [
'@nuxtjs/axios',
],
axios: {
}
}
$axios 对象会被绑定到实例原型 (this 上), 使用方式和原生 Vue 中一样:
methods: {
async doRequest() {
const res = await this.$axios.get('/demo/test')
}
}
自定义 Axios
如果需要自定义 axios, 添加拦截器判断请求/响应, 异常处理等, 需要将其作为 plugin 引入.
在 nuxt.config.js 中, 加入:
然后在 ./plugins 目录下新建 axios.js, 加入需要的拦截方法:
更多用法参考: https://axios.nuxtjs.org/helpers
Mockjs - 测试
作用: 拦截 XHR, 不借助后端, 在前端即可完成数据模拟和测试. 具体的使用方法教程很多, 就不再赘述了.
安装
npm install --save-dev mockjs
同样先在 nuxt.config.js 中 plugins 下注册插件 @/plugins/mockjs. 然后在 ./plugins 下新建文件 mockjs.js.
测试
修改 Nuxt index.vue:
执行命令 npm run dev, 点击页面按钮观察控制台可以看到, 无论是 axios module 的拦截, 还是 mockjs 都已正常工作:
可能遇到的坑
request.upload.addEventListener is not a function
在执行最终测试的时候如果控制台提示如下信息:
request.upload.addEventListener is not a function
是由于 Mockjs 造成的, 原因和解决办法请参考笔者的另一篇文章…
下一篇