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 造成的, 原因和解決辦法請參考筆者的另一篇文章…

下一篇