Nuxtjs 2 - axios & mockjs

承接上一篇, 继续整合 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 造成的, 原因和解决办法请参考笔者的另一篇文章…

下一篇