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 }, inject) => {
inject(‘axios’, {
get(url, config) {
return instance.get(url, config)
},
post(url, data, config) {
return instance.post(url, data, config)
},
// 其他请求方法的封装
})
}
“`
在这个插件中，我们创建了一个 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
},
},
}
“`
这样，我们就可以在整个项目中共享这些封装好的请求方法了，并且可以通过全局配置来统一处理一些网络请求的细节。
