中了源码的毒，给你一副良药-51CTO.COM

[[348328]]

本文转载自微信公众号「全栈修仙之路」，作者阿宝哥。转载本文请联系全栈修仙之路公众号。

一、灵魂四连问

1.1 为什么要读源代码

1.2 如何选择项目

1.3 如何阅读源码

1.4 有实际的案例么

二、如何品读 Axios?

2.1 走进 Axios

Axios 是一个基于 Promise 的 HTTP 客户端，同时支持浏览器和 Node.js 环境。它是一个优秀的 HTTP 客户端，被广泛地应用在大量的 Web 项目中。

由上图可知，Axios 项目的 Star 数为「78.1K」，Fork 数也高达「7.3K」，是一个很优秀的开源项目，所以值得大家细细品读。

2.2 发现 Axios 的美

在确认 Axios 为 “追求目标” 之后，下一步我们就需要来发现它身上的优点(特性)：

每个人对 “美” 都有不同的看法，对于阿宝哥来说，我看中了图中已选中的三点。因此，它们也很光荣地成为读源码的三个切入点。当然切入点也不是越多越好，可以先找自己最感兴趣的地方作为切入点。需要注意的是，如果切入点之间有关联关系的话，建议做个简单的排序。

2.3 感受 Axios 的美

选择切入点之后，我们就可以开始逐一感受 Axios 的设计之美。以「能够拦截请求与响应」这个切入点为例，首先我们就会接触到「拦截器」的概念。所以我们需要先了解拦截器是什么、拦截器有什么作用以及如何使用拦截器，这里我们可以从项目的「官方文档」或者项目中的「README.md」文档入手。

2.3.1 拦截器的作用

Axios 提供了请求拦截器和响应拦截器来分别处理请求和响应，它们的作用如下：

请求拦截器：该类拦截器的作用是在请求发送前统一执行某些操作，比如在请求头中添加 token 字段。
响应拦截器：该类拦截器的作用是在接收到服务器响应后统一执行某些操作，比如发现响应状态码为 401 时，自动跳转到登录页。

2.3.2 拦截器的使用

// 添加请求拦截器 —— 处理请求配置对象 
axios.interceptors.request.use(function (config) { 
  config.headers.token = 'added by interceptor'; 
  return config; 
}); 
 
// 添加响应拦截器 —— 处理响应对象 
axios.interceptors.response.use(function (data) { 
  data.data = data.data + ' - modified by interceptor'; 
  return data; 
}); 
 
axios({ 
  url: '/hello', 
  method: 'get', 
}).then(res =>{ 
  console.log('axios res.data: ', res.data) 
});

在了解完拦截器的作用和用法之后，我们就会把焦点聚焦到「axios」对象，因为注册拦截器和发送请求都与它有紧密的联系。不过在看具体源码之前，阿宝哥建议先对功能点做一下梳理。以下是阿宝哥的分析思路：

Axios 的作用是用于发送 HTTP 请求，请求拦截器和响应拦截器分别对应于 HTTP 请求的不同阶段，它们的本质是一个实现特定功能的函数。这时我们就可以按照功能把发送 HTTP 请求拆解成不同类型的子任务，比如有「用于处理请求配置对象的子任务」，「用于发送 HTTP 请求的子任务」和「用于处理响应对象的子任务」。当我们按照指定的顺序来执行这些子任务时，就可以完成一次完整的 HTTP 请求。

既然已经提到了任务，我们就会联想到任务管理系统的基本功能：任务注册、任务编排(优先级排序)和任务调度等。因此我们就可以考虑从「任务注册、任务编排和任务调度」三个方面来分析 Axios 拦截器的实现。

2.3.3 任务注册

// 添加请求拦截器 —— 处理请求配置对象 
axios.interceptors.request.use(function (config) { 
  config.headers.token = 'added by interceptor'; 
  return config; 
}); 
 
// 添加响应拦截器 —— 处理响应对象 
axios.interceptors.response.use(function (data) { 
  data.data = data.data + ' - modified by interceptor'; 
  return data; 
});