超越Axios：手把手构建自己的精简HTTP客户端

前端

2023-10-23 17:15:42

前言

面试官不断追问Axios，这已经成为了一种陈词滥调。但我们真的了解Axios内部的工作原理吗？它的请求拦截器、响应拦截器、适配器和可重试机制如何协同工作？是时候超越Axios，深入探究HTTP客户端的迷人世界了。

手把手构建HTTP客户端

步骤1：创建基础架构

首先，创建一个名为http-client的新模块。
定义一个createClient工厂函数，该函数将返回一个HTTP客户端实例。
该实例应具有以下方法：get、post、put、delete 和 patch。

步骤2：添加拦截器

创建一个名为interceptors的对象，它将存储请求和响应拦截器。
请求拦截器用于在发送请求之前修改请求。
响应拦截器用于在接收到响应后修改响应。
您还可以添加自定義攔截器，例如添加授权標頭或處理錯誤。

步骤3：实现适配器

适配器负责将请求转换为底层网络库可以理解的格式。
创建一个名为adapters的对象，它将映射支持的适配器（如fetch和XMLHttpRequest）。
每个适配器都应具有以下方法：request和cancel。

步骤4：处理可重试和超时

添加一个名为retry的对象，它将存储重试选项。
添加一个名为timeout的对象，它将存储超时选项。
在createClient函数中，将这些选项应用于HTTP客户端实例。

示例用法

现在，我们的HTTP客户端已经准备好使用了：

const client = createClient({
  baseUrl: 'https://example.com',
  headers: {
    'Content-Type': 'application/json',
  },
});

client.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });