在 Nuxt 中愉快的管理 Axios

模組化 axios 呼叫。

▍問題

最近用 nuxt 接了很多 API，位置都是在每個 vue 檔案裡面，每次要更改時都很麻煩。

所以參考了很多文章，決定把每個不同檔案裡的 api 集中管理。

▍架構

如左圖，在根目錄建立 api 及 service 的資料夾。

api 裡主要放所有要接的 api，而 service 裡放的是 axios 相關設定。

▍架構內容

service/index.js

在 service.js 裡去引入 axios 並設置 baseURL，之後建立其他檔案只需要引入 service.js 即可。

設置 baseURL 是為了方便管理域名，如果域名更改之需更改這裡即可，非常方便。

下面的 service.interceptors.request.use( … ) 是 axios 攔截器，主要是在每次api 請求前做的事，service.interceptors.response.use( … ) 是在請求後回傳前做的。

使用 service

這裡不一定要叫 foo.js 看你的頁面叫甚麼就取甚麼。

第一行先 import 前面的 service/index.js，然後在裡面寫要 export 的 Fuction。

使用 Fat arrow function

當然你也可以使用胖箭頭函式（Fat arrow function），看起來比較乾淨一點。

傳入參數

傳入參數的方式就跟普通 Function 一樣。

▍使用方式

// page/foo.vue
import { apiFoo } from "~/api/foo";

async asyncData() {
  const foo = await apiFoo()
    .then(res => res.data)
    .catch(err => console.error(err));

  return { foo }
}

呼叫我是在 asyncData 裡呼叫，呼叫完可以附加 Callback

下面是示範使用 try catch 來除錯

// page/foo.vue
import { apiFoo } from "~/api/foo";

methods: {
  getFoo() {
    try{
      const { data } = await apiFoo()
      this.foo = data // set data
    } catch(err) {
      console.err(`apiFoo Error: ${err}`)
    } finally {
      this.loading = false
    }
  }
}

▍結論

有效管理 axios API 模組能在維護專案時或除錯時帶來最大效益，另外攔截器也可以好好善用，能意外減少很多程式碼。