Axios原理剖析与使用TS实现

前端

2023-11-19 02:39:37

前言

Axios是一个基于Promise的HTTP客户端，用于前端开发中的浏览器和Node.js。它可以轻松地发送异步HTTP请求，并以Promise的形式返回响应。Axios在开发人员中非常受欢迎，因为它简单易用，并且提供了许多有用的特性。

在本文中，我们将深入解析Axios的核心模块原理，并使用TypeScript实现一个简化版的Axios。通过动手实践，您将全面掌握Axios的运作机制，并能够轻松地使用它进行网络请求。

功能

Axios的核心功能包括：

发送GET、POST、PUT、DELETE等HTTP请求
支持多种数据格式，如JSON、表单数据、二进制数据等
允许设置请求头和请求参数
能够处理请求超时和响应错误
提供拦截器功能，允许您在请求和响应处理过程中进行自定义操作

原理剖析

Axios的核心原理是使用JavaScript的fetch API发送HTTP请求。fetch API是一个浏览器内置的API，允许您轻松地发送异步HTTP请求。Axios对fetch API进行了封装，并提供了许多有用的特性，使其更加易于使用。

请求发送

当您使用Axios发送一个请求时，Axios首先会将请求信息（如URL、方法、数据等）转换为fetch API的请求对象。然后，Axios调用fetch API发送请求，并等待服务器响应。

响应处理

当服务器响应后，Axios会将响应信息（如状态码、响应头、响应数据等）转换为一个JavaScript对象。然后，Axios会将这个JavaScript对象作为Promise的结果返回。

拦截器

Axios提供了一个拦截器功能，允许您在请求和响应处理过程中进行自定义操作。您可以使用拦截器来添加请求头、修改请求数据、处理响应错误等。

TS实现

现在，让我们使用TypeScript来实现一个简化版的Axios。

class Axios {
  constructor() {}

  request(config: AxiosRequestConfig): Promise<AxiosResponse> {
    return new Promise((resolve, reject) => {
      const xhr = new XMLHttpRequest();

      xhr.open(config.method, config.url);

      xhr.onload = () => {
        if (xhr.status >= 200 && xhr.status < 300) {
          resolve({
            status: xhr.status,
            statusText: xhr.statusText,
            data: JSON.parse(xhr.responseText),
          });
        } else {
          reject({
            status: xhr.status,
            statusText: xhr.statusText,
            data: null,
          });
        }
      };

      xhr.onerror = () => {
        reject({
          status: 0,
          statusText: 'Network Error',
          data: null,
        });
      };

      xhr.send(config.data);
    });
  }
}