前言:由于我觉得我水平太烂了,博主建议我每天读一些源代码。恰巧作为某校园项目负责人,在参考BuildAdmin二次封装Axios后,看到众多掘金作者对无效二次封装方案的深恶痛疾,我赶紧进行code review。为了对Axios有更深入的理解,于是乎我选择了Axios作为最近阅读的源码...
Axios简介
思唯大哥的《最全、最详细Axios源码解读---看这一篇就足够了》)也是学习axios源码的非常详细的文章,我在对axios源码的学习时,有啥不太理解的也能在他那里找到思路,这里给大家安利一下。
本文和思唯大哥的文章相比,提供了另一种阅读方向,思唯大哥直接对axios源码进行解析,而我通过我们平时使用axios中出发,向大家展示某某功能底层为啥能实现,希望能给大家对axios源码的阅读带来帮助。
我们平时使用的三大框架都是对页面的开发,如果不连接服务器端,庞大的数据就无法在浏览器进行动态显示,因此我们需要发起网络请求。
现代有2种进行网络请求的方案那就是XMLHttpRequest
和fetch
。互联网上的方案之争屡见不鲜但是对请求方案的讨论相对来说并不激烈,因为“不论黑猫白猫,抓到老鼠的就是好猫”。网络请求也只是项目构建的一部分。
我们的主角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
呢?其实目的就是为了管理,当遇到某些请求网络地址
、响应结构
等配置不同的时候,我们可通过对实例对象单独进行定制化措置再封装,就非常方便项目的拓展和团队成员的使用了。
axios和create函数的代码都在/lib/axios.js
文件中,来看看我们平时使用的axios和create函数分别是怎样实现的吧!
我们使用的axios如果直接使用axios(config)
其实就是使用默认创建好的实例,其中还有大量的方法被绑定上去。
下面是createInstance
的过程,同时,我们的create
方法也在其中被挂载。在createInstance
主要完成上下文的硬绑定和属性的拷贝。
关于axios中bind
的操作在之前js讨论apply、call、bind已经进行解析(对硬绑定不熟的同学可以移步那篇文章进行浏览),主要是负责上下文的绑定并且返回一个函数对象,他就是需要暴露的axios实例;而attend方法则是对下文forEach函数的调用,是对属性的拷贝。
使用的get、post等的请求
上面的一段是我们完成了日常的axios的生成和相关属性的挂载,那么我们常用的get
、post
等请求方法在哪里?其实Axios的原型链中已经有了俺们的方法。ctrl+鼠标左键点击Axios
进入源代码!
下面是进行forEach循环挂载相关请求对应的方法:
forEach实际就是进行判空、是否能迭代的判定,循环遍历传入的对象的每一项作为传入函数的参数进行实现
。
拦截器
在发起网络请求前或者得到响应后,大部分项目都会针对网络请求或者网络响应进行处理。
在axios内部,在进行拦截器创建和拦截器内部的行为时候,其实是不分响应拦截和请求拦截的。他们的结构都是InterceptorManager
并使用命名为hander
的栈进行存储。
对拦截器的注册行为如下,传入对请求拦截器的操作并且返回在栈下的索引供给用户进行删除拦截器的操作。
提供循环执行每一项的方法,主要是传入方法,并循环执行,执行的时候会对拦截器进行判空:
以axios为代表的一系列前端网络请求工具对前后端交互是非常重要的!axios的存在说实在比我开始学前端还早得多得多,且目前可见的,axios的火热也会继续存在一段时间。学习axios目前为止对我的帮助很大,希望大家能一起交流!
我是momo,我们下期见!
开启掘金成长之旅!这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天,点击查看活动详情