nuxt3 请求封装

在 Nuxt.js 中，可以使用 axios 库来发送 HTTP 请求，并且可以对其进行封装以方便使用。下面是一个简单的示例来封装请求：

1. 首先，在项目的根目录下创建一个名为 `plugins/axios.js` 的文件。在该文件中，可以配置 axios 的一些默认设置，例如设置基本的 URL、请求超时时间等。

// plugins/axios.js

import axios from 'axios'

const axiosInstance = axios.create({
  baseURL: 'https://api.example.com', // 设置基本的 URL
  timeout: 5000 // 设置请求超时时间
})

export default function ({ app }, inject) {
  inject('axios', axiosInstance)
}

2. 然后，在 Nuxt.js 的配置文件 `nuxt.config.js` 中引入刚才创建的插件：

// nuxt.config.js

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

3. 现在，可以在项目的任何地方使用封装后的 axios 实例进行请求。例如，在一个页面组件中：

// pages/index.vue

export default {
  async asyncData({ $axios }) {
    try {
      const response = await $axios.get('/api/data') // 发送 GET 请求
      return {
        data: response.data
      }
    } catch (error) {
      console.error(error)
      return {
        data: null
      }
    }
  }
}

在上述示例中，我们通过 `inject` 方法将封装后的 axios 实例注入到了 `$axios` 变量上，可以在页面组件中直接使用。

这只是一个简单的封装示例，你可以根据实际情况进行自定义。希望对你有所帮助！