如何在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>