nuxt axios request 请求封装

在Nuxt中，可以通过在nuxt.config.js中配置axios来对axios请求进行封装。首先，确保已经安装了@nuxtjs/axios和@nuxtjs/proxy两个模块。后，在nuxt.config.js中进行如下配置：

export default {
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      changeOrigin: true,
      target: 'http://XXX.XXX.X.X',
      pathRewrite: { '^/api': '' }
    }
  }
}

这样就完成了对axios请求的封装。其中，`changeOrigin`设置为true可以允许跨域，`target`指定了允许跨域的服务器地址，`pathRewrite`用于重写请求路径。

相关问题

如何在nuxt项目中封装axios请求和封装api接口

在Nuxt.js项目中，封装axios请求和API接口是一个常见的最佳实践，可以帮助提高代码复用性和模块化。以下是步骤：

1. **安装axios**：
首先，在`npm`或`yarn`中安装axios库：

   npm install axios
   # 或者
   yarn add axios

2. **创建Axios实例**：
在`plugins`目录下创建一个新的文件，比如`axios.js`，并初始化一个axios实例：

   export default function({ app }) {
     appaxios = axios.create({
       baseURL: process.env.API_URL, // 这里配置你的API基础地址
       timeout: 5000, // 设置超时时间
       headers: {'Content-Type': 'application/json'}, // 添加默认请求头
       withCredentials: true, // 是否发送跨域凭据，默认false
     })

     // 如果你想添加全局拦截器
     appaxios.interceptors.request.use(config => {
       // 在发送请求前做些处理，例如设置token等
       return config
     }, error => Promise.reject(error))

     // 请求错误拦截
     appaxios.interceptors.response.use(
       response => response.data,
       error => {
         // 捕获错误并处理
         console.error('Error', error)
         if (error.response) {
           return Promise.reject(error.response.data.message || error.response.statusText)
         }
         return Promise.reject(error)
       }
     )

     // 导出使用appaxios的函数
     return { appaxios }
   }

3. **封装常用API接口**：
在`api`目录下创建对应的模块，如`users.js`：

   import { mapActions } from 'vuex'
   import { useAppaxios } from '@/plugins/axios'

   const actions = {
     async getUsers({ commit }) {
       try {
         const response = await useAppaxios().get('/users')
         commit('SET_USERS', response.data)
       } catch (error) {
         // 处理错误
       }
     },
   }

   export default {
     actions: {
       ...mapActions(['getUsers'])
     }
   }

4. **在组件中使用封装后的API**：
在需要的地方导入并调用`actions`：

   <script>
   import { getters, actions } from '@/store/modules/users'
   import { useStore } from 'vuex'

   export default {
     computed: {
       ...getters
     },
     methods: {
       fetchData() {
         actions.getUsers()
       }
     },
   }
   </script>

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 中使用。