TS封装Axios最佳实践示例详解

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境。我们可以使用Axios来发送HTTP请求并处理响应。而在使用Axios时，封装Axios是一个不错的选择，有利于提高代码的复用性和可维护性。以下是TS封装Axios最佳实践示例的详细攻略。

环境搭建

在开始之前，确保你已安装好以下基础环境：

• Node.js
• TypeScript

创建项目

使用以下命令来创建一个新的Node.js项目：

npm init -y

然后，安装TypeScript和Axios：

npm install typescript axios

接着，创建一个名为src的文件夹，并在其中创建一个名为index.ts的文件。

定义API请求类

首先，我们需要定义一个API请求类，用于封装Axios请求。以下是一个简单的API请求类：

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

class ApiClient {
  private axiosInstance: AxiosInstance;

  constructor(config: AxiosRequestConfig) {
    this.axiosInstance = axios.create(config);
  }

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

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

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

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

export default ApiClient;

在上述代码中，我们创建了一个名为ApiClient的类，该类封装了Axios的基本请求方法。在该类中，我们使用泛型来指定返回结果的类型，并使用Axios的AxiosInstance和AxiosRequestConfig类型来实例化Axios。

使用API请求类

在使用API请求类进行API请求时，我们需要先实例化该类。以下是一个示例：

import ApiClient from './ApiClient';

const apiClient = new ApiClient({
  baseURL: 'https://jsonplaceholder.typicode.com',
});

const getUsers = async () => {
  const users = await apiClient.get<User[]>('/users');
  return users;
};

const createUser = async (user: User) => {
  const createdUser = await apiClient.post<User>('/users', user);
  return createdUser;
};

在上述示例中，我们使用了先前定义的ApiClient类来实例化一个名为apiClient的实例，并在该实例上调用了get和post方法来进行GET和POST请求。注意，我们在请求URL之前添加了/，以使请求的URL完整。

多实例管理

当我们需要调用不同的API时，可能需要创建多个ApiClient实例。为此，我们可以使用一个工厂模式来创建不同的实例，并使用单例模式来确保每个实例只被创建一次（单例模式可以使用Node.js的Map对象来实现）。以下是示例代码：

class ApiClientFactory {
  private static instanceMap: Map<string, ApiClient> = new Map();

  public static getInstance(baseUrl: string) {
    if (!this.instanceMap.has(baseUrl)) {
      const apiClient = new ApiClient({
        baseURL: baseUrl,
      });
      this.instanceMap.set(baseUrl, apiClient);
    }
    return this.instanceMap.get(baseUrl);
  }
}

export default ApiClientFactory;

在上述代码中，我们创建了一个名为ApiClientFactory的类，并使用instanceMap属性来存储每个实例。在getInstance方法中，我们检查当前实例是否已经存在于instanceMap中。如果不存在，我们再创建一个新的实例并添加到instanceMap中。

以下是一个示例，该示例使用两个不同的实例来调用两个不同的API：

import ApiClientFactory from './ApiClientFactory';

const apiClient1 = ApiClientFactory.getInstance('https://jsonplaceholder.typicode.com');
const apiClient2 = ApiClientFactory.getInstance('https://some-other-api.com');

const getTodo = async (id: number) => {
  const todo = await apiClient1.get<Todo>(`/todos/${id}`);
  return todo;
};

const createPost = async (post: Post) => {
  const createdPost = await apiClient2.post<Post>('/posts', post);
  return createdPost;
};

在上述示例中，我们使用了ApiClientFactory类来创建两个实例，分别对应于两个不同的API。并在每个实例上调用了get和post方法来进行相应的请求。

结语

封装Axios是提高代码可读性和可维护性的一种好方法。我们可以使用类和泛型来封装Axios，并使用工厂和单例模式来管理多个实例。希望本文提供的示例能帮助你理解如何使用TypeScript封装Axios。