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 本身也會提示建議你改使用 asyncawait 寫法。

那麼脫離了 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 攔截器的用處。

參考文獻

Liker 讚賞

這篇文章如果對你有幫助,你可以花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與牡蠣鼓勵我。
或者你也可以考慮請我喝一杯咖啡

Google AD

撰寫一篇文章其實真的很花時間,如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話,我會非常感謝你 ヽ(・∀・)ノ