【momo的源码之路】自顶而下解析Axios源码(上篇)

80 阅读5分钟

前言:由于我觉得我水平太烂了,博主建议我每天读一些源代码。恰巧作为某校园项目负责人,在参考BuildAdmin二次封装Axios后,看到众多掘金作者对无效二次封装方案的深恶痛疾,我赶紧进行code review。为了对Axios有更深入的理解,于是乎我选择了Axios作为最近阅读的源码...

Axios简介

  思唯大哥的《最全、最详细Axios源码解读---看这一篇就足够了》)也是学习axios源码的非常详细的文章,我在对axios源码的学习时,有啥不太理解的也能在他那里找到思路,这里给大家安利一下。
  本文和思唯大哥的文章相比,提供了另一种阅读方向,思唯大哥直接对axios源码进行解析,而我通过我们平时使用axios中出发,向大家展示某某功能底层为啥能实现,希望能给大家对axios源码的阅读带来帮助。

  我们平时使用的三大框架都是对页面的开发,如果不连接服务器端,庞大的数据就无法在浏览器进行动态显示,因此我们需要发起网络请求。
  现代有2种进行网络请求的方案那就是XMLHttpRequestfetch。互联网上的方案之争屡见不鲜但是对请求方案的讨论相对来说并不激烈,因为“不论黑猫白猫,抓到老鼠的就是好猫”。网络请求也只是项目构建的一部分。
  我们的主角Axios是基于promise形式的网络请求库,他能作用于node.js和浏览器,在node.js中使用http模块,在浏览器中使用XMLHttpRequest。目前,Axios在github上面已经有98.7k的star,如果想学其进行详细学习,建议使用官方文档。
  在实际项目中,axios的以下特性对有效提高俺们的开发效率,我们就通过其实现原理进行解析。

  • 网络请求和响应数据
  • 拦截请求和响应
  • 支持PromiseAPI
  • 取消请求
  • 自动转换JSON数据

axios和创建axios实例

  在axios的使用中,我们通常axios.create(config)创建axios实例对象instance对其进行运用。但是其实我们直接使用axios(config)是可以实现网络请求了,那为啥我们还要创建instance呢?其实目的就是为了管理,当遇到某些请求网络地址响应结构等配置不同的时候,我们可通过对实例对象单独进行定制化措置再封装,就非常方便项目的拓展和团队成员的使用了。

image.png image.png
  axios和create函数的代码都在/lib/axios.js文件中,来看看我们平时使用的axios和create函数分别是怎样实现的吧!
  我们使用的axios如果直接使用axios(config)其实就是使用默认创建好的实例,其中还有大量的方法被绑定上去。

image.png
  下面是createInstance的过程,同时,我们的create方法也在其中被挂载。在createInstance主要完成上下文的硬绑定和属性的拷贝。 image.png
  关于axios中bind的操作在之前js讨论apply、call、bind已经进行解析(对硬绑定不熟的同学可以移步那篇文章进行浏览),主要是负责上下文的绑定并且返回一个函数对象,他就是需要暴露的axios实例;而attend方法则是对下文forEach函数的调用,是对属性的拷贝。

image.png image.png

使用的get、post等的请求

  上面的一段是我们完成了日常的axios的生成和相关属性的挂载,那么我们常用的getpost等请求方法在哪里?其实Axios的原型链中已经有了俺们的方法。ctrl+鼠标左键点击Axios进入源代码!
  下面是进行forEach循环挂载相关请求对应的方法:

image.png


  forEach实际就是进行判空、是否能迭代的判定,循环遍历传入的对象的每一项作为传入函数的参数进行实现
image.png

拦截器

  在发起网络请求前或者得到响应后,大部分项目都会针对网络请求或者网络响应进行处理。

image.png
  在axios内部,在进行拦截器创建和拦截器内部的行为时候,其实是不分响应拦截和请求拦截的。他们的结构都是InterceptorManager并使用命名为hander的栈进行存储。

image.png
  对拦截器的注册行为如下,传入对请求拦截器的操作并且返回在栈下的索引供给用户进行删除拦截器的操作。

image.png
  提供循环执行每一项的方法,主要是传入方法,并循环执行,执行的时候会对拦截器进行判空:

image.png

  以axios为代表的一系列前端网络请求工具对前后端交互是非常重要的!axios的存在说实在比我开始学前端还早得多得多,且目前可见的,axios的火热也会继续存在一段时间。学习axios目前为止对我的帮助很大,希望大家能一起交流!
  我是momo,我们下期见!

image.png

开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天,点击查看活动详情