一、前言

其实一开始是不想看源码的,但是之前有次使用axioscancel取消请求功能后,对这一块的实现比较好奇,就决定看一下源码这一部分的实现,但是看着看着最后还是需要看axios主要功能的实现,所以就有了这篇文章。
我画了一个关于axios的流程图,源码配合这个流程图看能让脑中有一个整体的架构,对axios的结构更清晰

1.1、流程图说明

流程图分为图片版html在线交互版

html交互版

name 优势 劣势
图片版 加载相对较快(其实也挺慢2M的图) 图片质量有限
html版 提供好的交互,图示更清晰 加载相对较慢(加载过一次后由于缓存的原因会快很多)

1.2、流程图预览

tip:在新标签页中打开更清晰哦

图片版axios流程图
图片版axios流程图

二、关键点

Axios 是一个基于 promise 的 HTTP 库,所以阅读源码前对Promise的了解程度很重要

axios Promise队列
axios Promise队列

三、流程

  1. axios的cancel取消请求的实现
  2. 以及拦截器原理
  3. node和web环境的适配
    都在上面的导图里清晰的说明了,进入html交互版上面的图片版仔细查看