vue3中的axios二次封装ts

在Vue3中进行axios的二次封装可以通过创建一个HttpRequest的类来实现。首先，你可以将axios进行加一层封装，将一些公共的功能封装进去，比如网络请求头添加Authorization（即token），加载loading效果等等，拦截器也可以进行灵活封装。然后在页面中使用这个封装好的类来发送请求。

下面是一个示例代码：

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';

class HttpRequest {
  private instance: AxiosInstance;

  constructor(baseURL: string) {
    this.instance = axios.create({
      baseURL,
      timeout: 5000,
      headers: {
        'Content-Type': 'application/json',
      },
    });

    // 拦截器配置
    this.instance.interceptors.request.use(
      (config: AxiosRequestConfig) => {
        // 在请求发送之前做一些处理，比如添加token等
        return config;
      },
      (error) => {
        // 请求错误处理
        return Promise.reject(error);
      }
    );

    this.instance.interceptors.response.use(
      (response: AxiosResponse) => {
        // 对响应数据做一些处理
        return response.data;
      },
      (error) => {
        // 响应错误处理
        return Promise.reject(error);
      }
    );
  }

  public async get<T>(url: string, params?: object): Promise<T> {
    const response = await this.instance.get<T>(url, { params });
    return response;
  }

  public async post<T>(url: string, data?: object): Promise<T> {
    const response = await this.instance.post<T>(url, data);
    return response;
  }

  // 其他请求方法同理，如put、delete等

}

// 在使用时，可以先实例化一个HttpRequest对象，并指定baseURL
const http = new HttpRequest('http://api.example.com');

// 然后可以使用get、post等方法发送请求
http.get('/user', { id: 1 })
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    console.error(error);
  });

这样，你就可以在Vue3中进行axios的二次封装了。