Nuxt.js 2.x 實戰手冊(7) - Axios

前言

axios 是一套非常好用的 AJAX 套件，本身 Nuxt.js 也非常貼心的幫你整合進去，而使用方式也會有一點不同。

@nuxtjs/axios

我們在使用 Vue Cli 的時候，非常常使用一個套件，也就是 axios，那本身 Nuxt.js 就有整合了 Axios 套件，也就是 @nuxtjs/axios 套件，因此你在使用上會非常方便，但是如果你想要在 Nuxt.js 中使用的話，要稍微注意一下寫法上的差異。

舉例來講前面章節我們知道 Nuxt.js 的 asyncData 會幫我們將資料 SSR 渲染在 HTML 上，因此如果要在 asyncData 中使用 axios 的話，就必須這樣寫：

1
2
3
4
5
6
7
8

export default {
  async asyncData({ $axios }) {
    const res = await $axios.get('...');
    return {
      data: res.data,
    }
  }
}

你必須透過解構的方式將 axios 給取出來使用(你也可以選擇解構 $http)，這邊要注意不是 this.$http 這種寫法，因為在 asyncData 中並沒有所謂的 this。

那也有另一種寫法是使用 callback 的方式：

1
2
3
4
5
6
7
8
9
10

export default {
  asyncData({ $axios }, callback) {
    $axios.get('...').then((res) => {
      callback(null,
      {
        data: res.data
      });
    })
  },
}

那這是屬於比較舊的寫法，通常來講 Nuxt.js 本身也會提示建議你改使用 async 與 await 寫法。

那麼脫離了 asyncData 的 Vue 中呢？在 Vue 中使用 axios 就非常簡單，因為跟之前在寫 Vue Cli 時期是一樣的作法，也就是 this.$axios 而已，只是在 Nuxt.js 中大多都是加上前字號的 axios。

擴充 axios

那麼 @nuxtjs/axios 之所以好用還有一個地方，你可以針對當前 axios 做擴充功能，舉例來講，當發出請求時，你可以先做某些事情，可能先吐個 console.log 等等，因此你先在 plugin 資料夾底下建立一個 axios.js 檔案，然後裡面寫以下

1
2
3
4
5

export default ({ $axios, redirect }) => {
  $axios.onRequest((config) => {
    console.log('我發出請求囉');
  })
}

透過這個方式，當 $axios 在發出請求時都會觸發這個 onRequest 方法，因此你也可以做到如果 axios 發生錯誤就往特定頁面跳轉

1
2
3
4
5
6
7
8
9
10
11
12

export default ({ $axios, redirect }) => {
  $axios.onRequest((config) => {
    console.log('我發出請求囉');
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status);
    if (code === 500) {
      redirect('/500');
    }
  })
}

當撰寫完畢後，你要記得到 nuxt.config.js 中載入這個 axios.js，否則會無法擴衝

1
2
3

plugins: [
    '~/plugins/axios.js',
  ],

因此你也可以在此撰寫一些 API 攔截器等等，後面我們會在聊這一塊 API 攔截器的用處。

參考文獻

• @nuxtjs/axios
• extend