使用TypeScript封装Axios

• 安装 Axios 和相关类型定义：

npm install axios
npm install @types/axios --save-dev

• 创建封装模块：

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

interface ApiResponse<T> {
  data: T;
}

class ApiClient {
  private api: AxiosInstance;

  constructor() {
    this.api = axios.create({
      baseURL: 'http://api.example.com', // 设置基础URL
      timeout: 5000, // 设置请求超时时间
    });

    // 请求拦截器
    this.api.interceptors.request.use((config) => {
      // 在请求发送前可以做一些处理
      return config;
    });

    // 响应拦截器
    this.api.interceptors.response.use(
      (response) => {
        // 在获取响应数据后可以做一些处理
        return response;
      },
      (error) => {
        // 在发生错误时可以做一些处理
        return Promise.reject(error);
      }
    );
  }

  public get<T>(url: string, params?: any): Promise<T> {
    return this.api.get<ApiResponse<T>>(url, { params }).then((response) => response.data);
  }

  public post<T>(url: string, data: any): Promise<T> {
    return this.api.post<ApiResponse<T>>(url, data).then((response) => response.data);
  }

  public put<T>(url: string, data: any): Promise<T> {
    return this.api.put<ApiResponse<T>>(url, data).then((response) => response.data);
  }

  public delete<T>(url: string): Promise<T> {
    return this.api.delete<ApiResponse<T>>(url).then((response) => response.data);
  }
}

export default new ApiClient();

• 使用封装的请求：

import api from './api';

// 发起 GET 请求
api.get<User[]>('/users')
  .then((users) => {
    console.log(users);
  })
  .catch((error) => {
    console.error(error);
  });

// 发起 POST 请求
api.post<User>('/users', { name: 'John Doe', age: 30 })
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.error(error);
  });

// 发起 PUT 请求
api.put<User>('/users/1', { name: 'Jane Smith', age: 25 })
  .then((user) => {
    console.log(user);
  })
  .catch((error) => {
    console.error(error);
  });

// 发起 DELETE 请求
api.delete<void>('/users/1')
  .then(() => {
    console.log('User deleted successfully');
  })
  .catch((error) => {
    console.error(error);
  });