使用Ts封装axios

使用TypeScript来二次封装Axios，以规范项目前端开发流程中不同成员在网络请求以及一些对于请求安全的配置，同时也便于后期审阅与修改

首先，需要安装 axios。然后创建一个新的文件，比如 http.ts，并在其中编写的二次封装逻辑。

// http.ts

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

class HttpClient {
  private instance: AxiosInstance;

  constructor() {
    this.instance = axios.create({
      baseURL: 'https://api.example.com', // 设置默认的基础 URL
      timeout: 10000, // 设置默认的超时时间
      headers: {
        'Content-Type': 'application/json',
      },
    });

    this.setupInterceptors(); // 设置拦截器
  }

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

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

  // 设置拦截器
  private setupInterceptors() {
    this.instance.interceptors.request.use((config) => {
      // 在发送请求之前做些什么
      return config;
    }, (error) => {
      // 对请求错误做些什么
      return Promise.reject(error);
    });

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

export default new HttpClient();

通过这个 HttpClient 类，可以方便地进行 GET 和 POST 请求，并且可以根据自己的需求添加更多的方法和配置。

// 使用 HttpClient 进行 GET 请求
import http from './http';

async function fetchData() {
  try {
    const data = await http.get<MyData>('/data'); // 这里的 MyData 是您期望的响应数据结构类型
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

fetchData();

在这个示例中，我们假设服务器返回的数据符合 MyData 类型的结构。这样在请求成功后，将获得自动解析的类型化数据。通过这种方式，可以避免重复编写相同的 axios 配置，并确保整个应用程序中对 HTTP 请求的一致性和可维护性。