vue3 + ts 封装 axios

在Vue 3和TypeScript中封装Axios，你可以创建一个用于发送HTTP请求的服务，并使用axios的拦截器来处理通用的逻辑，如错误处理或请求头设置。以下是一个简单的封装示例：

首先，安装axios:

npm install axios

然后创建一个http.ts文件来封装Axios：

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
 
class HttpClient {
  constructor() {
    // 设置默认请求配置
    axios.defaults.baseURL = 'https://your-api-url.com';
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    axios.defaults.timeout = 10000; // 请求超时时间
  }
 
  public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    // 在请求发送前进行一些处理
    // ...
 
    return axios(config);
  }
 
  public get<T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ ...config, method: 'GET', url });
  }
 
  public post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<AxiosResponse<T>> {
    return this.request({ ...config, method: 'POST', url, data });
  }
 
  // 可以根据需要添加其他HTTP方法的封装
}
 
// 创建实例
const httpClient = new HttpClient();
 
export default httpClient;

使用封装后的httpClient发送请求：

import httpClient from './http';
 
async function fetchData() {
  try {
    const response = await httpClient.get<any>('/your-endpoint');
    console.log(response.data);
  } catch (error) {
    console.error('An error occurred while fetching data:', error);
  }
}
 
fetchData();

在这个例子中，HttpClient类封装了Axios，并提供了request方法来发送任意类型的HTTP请求，以及get和post方法来发送GET和POST请求。你可以根据需要添加更多的方法，如put、delete等。同时，通过拦截器可以添加全局的请求处理逻辑，比如添加认证token、错误处理等。