本文转载自微信公众号《全栈修仙之路》，作者：阿宝哥。转载本文请联系全栈修真之路公众号。1.灵魂四连问1.1为什么要读源码1.2如何选择项目1.3如何读源码1.4有没有实际案例2.axios怎么读？2.1走进AxiosAxios是一个基于Promise的HTTP客户端，同时支持浏览器和Node.js环境。它是一个优秀的HTTP客户端，被广泛应用于大量的Web项目中。从上图可以看出，Axios项目的star数为“78.1K”，分叉数高达“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='addedbyinterceptor';returnconfig;});//添加响应拦截器-处理响应对象axios.interceptors.response.use(function(data){data.data=data.data+'-modifiedbyinterceptor';returndata;});axios({url:'/hello',method:'get',}).then(res=>{console.log('axiosres.data:',res.data)});了解了拦截器的作用和用法之后，我们就将重点放在“axios”对象上，因为无论是注册拦截器还是发送请求都与它息息相关。不过在看具体源码之前，阿宝哥建议先梳理一下功能点。以下是阿宝哥的分析思路：axios是用来发送HTTP请求的，请求拦截器和响应拦截器对应HTTP请求的不同阶段，它们的本质是一个实现特定功能的函数。这时，我们可以将发送HTTP请求按照功能分解成不同类型的子任务，比如“处理请求配置对象的子任务”、“发送HTTP请求的子任务”、“处理响应对象的子任务的子任务”。当我们按照指定的顺序执行这些子任务时，就可以完成一个完整的HTTP请求。既然提到了任务，我们就会想到任务管理系统的基本功能：任务注册、任务安排（优先级排序）和任务调度。因此，我们可以从“任务注册、任务编排、任务调度”三个方面来考虑Axios拦截器的实现。2.3.3任务注册//添加请求拦截器-处理请求配置对象axios.interceptors.request.use(function(config){config.headers.token='addedbyinterceptor';returnconfig;});//添加响应拦截器-处理响应对象axios.interceptors.response.use(function(data){data.data=data.data+'-modifiedbyinterceptor';returndata;});在lib/axios.js路径中，我们可以找到“axios”对象定义。为了直观的理解对象之间的关系，阿宝哥建议大家看源码的时候多画图。比如阿宝哥用下图总结了axios对象和InterceptorManager对象的内部结构和关系：2.3.4任务安排现在我们知道了如何注册拦截器任务，但是仅仅注册任务是不够的，我们还需要注册注册的Task，这样才能保证Task执行的顺序。同样对于任务安排，任务安排的结果也可以以图表的形式展示。“这里有个小技巧，就是可以将任务安排的结果以比较的形式展示出来，这样任务安排的处理逻辑会更加清晰。”2.3.5任务调度任务编排完成后，要发起一个HTTP请求，我们还需要进行任务编排，需要在编排后按顺序执行。需要注意的是，在阅读源码的过程中，不要太在意细节。比如在研究axios拦截器原理的时候，不需要去了解“dispatchRequest”背后的具体实现。你只需要知道这个方法是用来发送HTTP请求的，这样整条线就不会拉得太长。分析完具体的功能点，也许你已经看过具体的源码了。但是阿宝哥认为这还不是最重要的。“更重要的是思考它的设计思路，这样的设计有什么好处，有没有值得我们借鉴的地方。”例如，参考axios拦截器的设计模型，我们可以提炼出如下通用的任务处理模型：上面阿宝哥以axios拦截器为例，分享了阅读axios源码的思路和技巧。接下来阿宝哥会分享一些阅读源码的建议和辅助工具。三、源码阅读建议4、源码阅读辅助工具如果您对以下辅助工具感兴趣，可以直接通过下图源码链接打开各个工具的在线地址。（图片来源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd）五、总结除了以上内容，阅读优秀的开源项目还有很多值得关注的地方。阿宝哥在研究BetterScroll项目源码的时候，总结了一张思维导图：（来源：https://www.processon.com/view/link/5f6d2beff346fb166d0ac4fd）下面，阿宝哥用一张图总结了axios和better-scroll，两个开源项目：1、Axios项目的入口是从Github中的功能特性中选取的；2、BetterScroll的切入点来自掘金《BetterScroll2.0发布：卓越与你同行》在本文涵盖的功能亮点中找到。另外，阿宝哥也简单总结了本文介绍的阅读源码的思路和技巧article：站在巨人的肩膀上，提前阅读一些与项目相关的优质文章；总结学习或工作中遇到的问题，带着问题学习源码；清晰阅读主线或切入点源码；尽可能从一个简单的例子来分析每个功能点；先把主要流程梳理一下，不要太在意细节，避免把整行拉得太长；看完之后的过程中源码，需要多多画图，这样理解起来会更直观，阿宝哥在这篇文章中分享了他阅读源码的思路、技巧和工具，希望大家多多指教阅读这篇文章，它可以启发或帮助你。如果你有更好的源码阅读思路和技巧，欢迎与阿宝哥交流。文笔不好请见谅。
