vue3.0 axios 封装网络请求

在 Vue3.0 中，我们可以使用 axios 库来发送网络请求。为了更好地管理和封装网络请求，我们可以将 axios 的一些常用配置和方法进行封装，以便在多个组件中进行调用。

下面是一个简单的 axios 封装示例：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

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

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

export default {
  get(url, params) {
    return instance.get(url, {
      params
    })
  },
  post(url, data) {
    return instance.post(url, data)
  }
}

在上面的代码中，我们首先使用 `axios.create` 方法创建了一个 axios 实例，并对实例的一些常用配置进行了设置，如 `baseURL` 和 `timeout`。然后，我们使用 `interceptors` 对请求和响应进行拦截处理，以便在请求发送和响应返回时做一些额外的操作，如在请求发送之前添加请求头信息，或者在响应返回时对响应数据进行解析。

最后，我们将封装好的请求方法暴露出去，并使用 `instance.get` 和 `instance.post` 方法来发送 GET 和 POST 请求。

使用时，我们只需要在组件中引入封装好的请求方法，并调用即可：

import request from '@/api/request'

export default {
  methods: {
    fetchData() {
      request.get('/api/data', { page: 1, size: 10 }).then(res => {
        console.log(res)
      })
    }
  }
}

在上面的代码中，我们先引入了封装好的请求方法，并在方法中调用了 `request.get` 方法来发送 GET 请求，并传入了请求的 URL 和参数。请求成功后，我们将返回的数据打印到控制台上。