nuxt 封装axios

在 Nuxt 中封装 Axios 可以通过在 plugins 目录下创建一个 axios.js 文件来实现。具体步骤如下：

1. 在 plugins 目录下创建 axios.js 文件。
2. 在文件中引入 axios 和 qs（如果需要）。
3. 创建一个 axios 实例，并配置一些默认参数，如 baseURL、timeout 等。
4. 创建一个插件函数，在函数中将 axios 实例挂载到 Vue.prototype 上，这样在组件中就可以通过 this.$axios 来使用了。
5. 在 nuxt.config.js 中引入该插件。

以下是一个简单的示例代码：

import axios from 'axios'
import qs from 'qs'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [data => qs.stringify(data)]
})

export default ({ app }, inject) => {
  inject('axios', instance)
}

相关问题

nuxt封装axios

Nuxt.js 是一个基于 Vue.js 的开源框架，主要用于构建服务端渲染 (SSR) 的 Web 应用程序。而 axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 环境下的 HTTP 请求。在 Nuxt.js 中使用 axios，可以通过封装 axios 实例来统一处理 HTTP 请求，方便使用和维护。以下是一个简单的封装 axios 实例的示例代码：

1. 在 plugins 目录下创建一个 axios.js 文件

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 接口的基础路径
  timeout: 10000 // 请求超时时间
})

// 请求拦截器
axiosInstance.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 响应拦截器
axiosInstance.interceptors.response.use(response => {
  // 对响应数据做些什么
  return response.data
}, error => {
  // 对响应错误做些什么
  return Promise.reject(error)
})

export default ({ app }, inject) => {
  // 将 axios 实例注入到 Vue 实例中
  inject('axios', axiosInstance)
}

2. 在 nuxt.config.js 中引入插件

export default {
  // ...
  plugins: [
    '~/plugins/axios'
  ],
  // ...
}

3. 在组件中使用 axios

export default {
  async asyncData({ $axios }) {
    const data = await $axios.$get('/api/data')
    return { data }
  }
}

通过上述封装，可以在组件中通过 this.$axios 访问封装后的 axios 实例，方便统一处理请求和响应。

nuxtjs axios二次封装

好的，针对你的问题，我可以给出一个简单的 nuxtjs axios 二次封装的示例代码：

// plugins/axios.js
import axios from 'axios'

const instance = axios.create({
  baseURL: process.env.BASE_URL,
  timeout: 5000
})

export default function ({ store }) {
  instance.interceptors.request.use(config => {
    const token = store.state.token
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  }, error => {
    return Promise.reject(error)
  })

  instance.interceptors.response.use(response => {
    return response.data
  }, error => {
    return Promise.reject(error)
  })

  return instance
}

在上面的代码中，我们首先创建了一个 axios 实例，并设置了一些默认配置。然后，我们通过 `interceptors` 对请求和响应进行了拦截和处理。在请求拦截器中，我们从 Vuex 中获取了用户的 token，并将其添加到请求头中；响应拦截器中，我们只返回响应数据的 `data` 字段。

最后，我们将这个 axios 实例作为插件导出，以便在 nuxtjs 中使用。