HTTP请求前端：Axios的TypeScript封装指南

2023-10-23 08:24:59







**Axios 简介** 

Axios 是一个基于 Promise 的 HTTP 客户库，它可以轻松地在浏览器和 Node.js 中发送 HTTP 请求。它提供了许多有用的功能，包括：

* 简单易用：Axios 具有直观易用的 API，可以轻松地发送 GET、POST、PUT 和 DELETE 请求。
* 支持多种数据格式：Axios 支持 JSON、表单数据、多部分数据等多种数据格式。
* 可配置性强：Axios 允许您自定义请求头、超时时间、重试策略等。
* 支持拦截器：Axios 允许您使用拦截器来处理请求和响应。

**Axios 的 TypeScript 封装** 

TypeScript 是一种流行的 JavaScript 超集，它可以帮助您编写更健壮和可维护的 JavaScript 代码。TypeScript 可以对 Axios 进行封装，以提供类型安全性和其他好处。

要封装 Axios，您可以使用以下步骤：

1. 安装 Axios 和 TypeScript 的类型定义文件。
2. 创建一个新的 TypeScript 文件，并导入 Axios。
3. 定义一个类型来表示 Axios 请求的配置。
4. 定义一个类型来表示 Axios 的响应。
5. 使用 Axios 发送 HTTP 请求。

以下是一个封装 Axios 的示例：

```typescript
import axios from 'axios';

interface AxiosRequestConfig {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  data?: any;
  headers?: any;
  timeout?: number;
}

interface AxiosResponse<T> {
  data: T;
  status: number;
  statusText: string;
  headers: any;
  config: AxiosRequestConfig;
}

const axiosInstance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
});

axiosInstance.get('/users').then((response: AxiosResponse<any>) => {
  console.log(response.data);
});