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

在Nuxt.js项目中，封装axios请求和全局设置API接口通常是为了保持代码整洁、易于管理和复用。以下是基本步骤：

1. **创建Axios实例**:
首先，在项目的`plugins`文件夹下创建一个名为`axios.js`的文件。在这里，你可以创建一个单例的Axios实例，并配置基础URL（如果你的API不是默认的localhost）。

export default async function ({ app }) {
  const axios = require('axios')
  // 如果有基础URL，例如：https://api.example.com
  const instance = axios.create({
    baseURL: process.env.API_URL || 'http://localhost:3000/api',
    headers: { 'Content-Type': 'application/json' },
    timeout: 5000,
    withCredentials: true, // 如果需要发送跨域请求
  })

  app.config.globalProperties.$axios = instance
}

2. **封装axios方法**:
创建一个单独的文件，如`api.js`，用于封装常见的API操作，比如获取数据、创建、更新和删除等。这可以使用ES6的默认参数和箭头函数。

// api.js
export const fetchData = (url, params) => $axios.get(url, { params })
export const postData = (url, data) => $axios.post(url, data)
// 添加其他方法，如 put、delete 等

3. **在组件中使用**:
在任何一个需要使用API的组件里，直接引入`api.js`里的方法即可，如`asyncData`钩子或生命周期钩子。

<script>
import { fetchData } from '@/api'

export default {
  async asyncData({ params }) {
    try {
      return await fetchData('/users', params)
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

4. **错误处理**:
可以考虑在`axios.js`中添加全局的错误处理，以便在整个应用中捕获网络错误。

instance.interceptors.response.use(
  response => response.data,
  error => {
    console.error('Error fetching data:', error.message)
    throw new Error(error.message)
  }
)