Nuxt.js 是一個基于 Vue.js 的服務端渲染應用框架。它可以幫助我們快速地搭建一個高度可定制的、SEO 友好的、漸進式的 Web 應用程序。而在 Nuxt.js 的基礎上，我們可以使用 nuxt-axios 這個插件來進行網絡請求的封裝。
nuxt-axios 的安裝非常簡單，只需要在項目中安裝 axios 和 nuxt-axios 兩個依賴即可：
“`
npm install axios nuxt-axios
“`
安裝完成后，我們在 nuxt.config.js 中進行配置：
“`js
module.exports = {
modules: [
‘@nuxtjs/axios’,
],
axios: {
// 這里可以進行 axios 的全局配置
},
}
“`
在項目中使用 nuxt-axios 時，我們可以在頁面組件中通過 this.$axios 訪問 axios 實例。例如：
“`vue
{{ data }}
export default {
data() {
return {
data: null,
}
},
methods: {
async fetchData() {
const res = await this.$axios.get(‘/api/data’)
this.data = res.data
},
},
}
“`
這樣就可以發送一個 GET 請求，并將返回的數據渲染到頁面上。
但是，直接在頁面組件中使用 axios 并不是一個良好的實踐。我們可以通過 nuxt-axios 提供的一些功能來對網絡請求進行封裝，使得我們可以在整個項目中共享這些封裝好的請求。
首先，我們可以在 nuxt.config.js 中全局配置 axios：
“`js
module.exports = {
modules: [
‘@nuxtjs/axios’,
],
axios: {
baseURL: process.env.BASE_URL || ‘http://localhost:3000’,
},
}
“`
這里設置了 axios 的 baseURL 屬性，使得我們在發送請求時不需要寫完整的 URL，只需要寫相對路徑即可。同時，我們也可以在這里進行其他 axios 的全局配置，例如設置請求頭、響應攔截等等。
接著，我們可以創建一個 axios 實例，并將其封裝成一個插件。在 plugins 目錄下創建一個 axios.js 文件：
“`js
import axios from ‘axios’
const instance = axios.create({
baseURL: process.env.BASE_URL || ‘http://localhost:3000’,
})
export
default ({ app }, injios網站ect) => {
inject(‘axios’, {
get(url, config) {
return instance.get(url, config)
},
post(url, data, config) {
return instance.post(url, data, co網站轉apknfig)
},
// 其他請求方法的封裝
})
}
“`
在這個插件中，我們創建了一個 axios 實例，并將其封裝成了一個對象，該對象中包含了我們常用的請求方法。然后，我們通過 inject 將這個對象注入到 Vue 實例中，使得我們在整個項目中都可以使用 this.$axios 訪問這些封裝好的請求方法。
最后，在頁面組件中就可以這樣使用我們封裝好的請求方法了：
“`vue
{{ data }}
export default {
data() {
return {
data: null,
}
},
methods: {
async fetchData() {
const res = await this.$axios.get(‘/api/data’)
this.data = res.data
},
},
}
“`
這樣，我們就可以在整個項目中共享這些封裝好的請求方法了，并且可以通過全局配置來統一處理一些網絡請求的細節。
