使用 Typescript 封装 Axios

作者：System 时间：2024年08月15日分类：所有,typescript 字数：1224

这篇文章距离上次修改已过234天，其中的内容可能已经有所变动。

在使用TypeScript封装axios时，可以创建一个axios实例并添加配置，然后导出这个实例，以便在应用程序中重用。同时，可以封装请求方法，如get, post, put, delete等，以简化调用。

以下是一个简单的示例：

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

class HttpClient {
  private instance: AxiosInstance;

  constructor(baseURL?: string) {
    this.instance = axios.create({
      baseURL,
      timeout: 10000, // 请求超时时间
      // 其他配置...
    });
  }

  public get<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
    return this.instance.get<T>(url, config);
  }

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

  // 其他请求方法...
}

export default new HttpClient('https://api.example.com'); // 根据实际API地址配置

使用封装后的axios实例：

import httpClient from './path/to/HttpClient';

httpClient.get<any>('/endpoint').then(response => {
  // 处理响应
}).catch(error => {
  // 处理错误
});

httpClient.post<any>('/endpoint', { data: 'payload' }).then(response => {
  // 处理响应
}).catch(error => {
  // 处理错误
});

这段代码创建了一个HttpClient类，其中封装了get和post方法，通过axios实例发送请求。然后导出了一个实例化后的HttpClient，以便在应用程序中重用。这样可以减少重复代码，并提供一个统一的接口来管理HTTP请求。

使用 Typescript 封装 Axios

评论已关闭

推荐阅读