axios（三）- 源码

lib
└─ adapters    // 适配器，兼容xhr和node├─ http.js // node 环境下利用 http 模块发起请求├─ xhr.js // 浏览器环境下利用 xhr 发起请求
└─ cancel    // 取消请求├─ Cancel.js├─ CancelToken.js├─ isCancel.js
└─ core        // 核心源码，包含拦截器等├─ Axios.js // 生成 Axios 实例├─ InterceptorManager.js // 拦截器├─ dispatchRequest.js  // 调用适配器发起请求...
└─ helpers    // 辅助方法├─ mergeConfig.js // 合并配置├─ …
├─ axios.js    // 入口文件
├─ defaults.js    // 默认配置
├─ utils.js       // 公共工具方法

执行流程

思路：

axios.create 创建单独实例，或直接使用 axios 实例(axios/axios.get…)
request 方法是入口，axios/axios.get 等调用都会走进 request 进行处理
请求拦截器
请求数据转换器，对传入的参数 data 和 header 做数据处理，比如 JSON.stringify(data)
适配器，判断是浏览器端还是 node 端，执行不同的方法
响应数据转换器，对服务端的数据进行处理，比如 JSON.parse(data)
响应拦截器，对服务端数据做处理，比如 token 失效退出登陆，报错 dialog 提示
返回数据给开发者

1、整体流程
request(config) ==> dispatchRequest(config) ==> xhrAdapter(config)
2. request(config):
将请求拦截器 / dispatchRequest() / 响应拦截器通过 promise 链串连起来,
返回 promise
3. dispatchRequest(config):
转换请求数据 ===> 调用 xhrAdapter()发请求 ===> 请求返回后转换响应数
据. 返回 promise
4. xhrAdapter(config):
创建 XHR 对象, 根据 config 进行相应设置, 发送特定请求, 并接收响应数据,
返回 promise

总结：

为了支持 axios() 简洁写法，内部使用 request 函数作为新实例
使用 promsie 链式调用的巧妙方法，解决顺序调用问题
数据转换器方法使用数组存放，支持数据的多次传输与加工
适配器通过兼容浏览器端和 node 端，对外提供统一 api
取消请求这块，通过外部保留 pendding 状态，控制 promise 的执行时机

axios（三）- 源码相关推荐

博弈六子棋安徽省2020省三源码
博弈六子棋安徽省2020省三源码以下是才开始编写的时的代码,代码的大体框架已将搭建出来,算法方面还是不够完善有许多不足资源链接 #属性类 class Setting():def __init__(s ...
Linux软件安装管理 - CentOS (三) ---- 源码包管理
1. 软件包管理简介 2. rpm命令管理(Redhat Package Manager) 3. yum在线安装 4. 源码包管理 4.1 源码包和RPM包的区别 4.1.1 区别安装前:概念上的区 ...
Linux驱动入门(三)——源码下载阅读、分析和嵌入式文件系统介绍
文章目录从内核出发获取内核源码使用Git 安装内核源码使用补丁阅读Linux内核源码 Source Insight简介阅读源码内核开发的特点无libc库抑或无标准头文件 GNU C 没 ...
axios post object object_深入学习Axios源码（构建配置）
axios是我们日常代码中常用的一个http库,它可以用来在浏览器或者node.js中发起http请求:它强大的功能和简单易用的API受到了广大前端童鞋们的青睐:那么它内部是如何来实现的呢,让我们走进 ...
阅读axios源码中工具函数
首先下载axios的源码, 然后运行start命令, 就会打开一个网址, 这网址就是axios的调试网址在lib文件夹下有一个utils.js文件,这个就是工具函数的文件. 一,判断类型的方法有三种 ...
axios源码中的10多个工具函数，值得一学~
大家好,我是若川.最近组织了源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列> ...
axios核心内容（四）源码分析
axios之源码分析 1.源码目录结构 2.源码分析 (1)axios与Axios的关系 (2)instance与axios的区别 (3)axios运行的整体流程 (4)axios的请求/响应拦截器 ...
前端网络基础 - axios源码分析
前端网络基础 - axios使用_qfc_128220的博客-CSDN博客在上一节中,我们分析了axios的基本使用,其中有很多让人一时无法参悟透奥妙的设计.我们来逐一通过源码解析下. 目录 axi ...
python threading模块多线程源码示例(二)
一.思路概述 Python线程创建使用threading模块的Thread类的接口如下 class Thread( group=None, target=None, name=None, args= ...
5单个编译总会编译全部_玩转Android10(五)源码编译开发中常用命令
源码开发编译中,熟练掌握常用命令,可以提高开发工作效率.Android源码中,将相关的命令分为如下几类: 1.初始化源码编译环境初始化编译环境,为后续提供如lunch.make.xxgrep.god ...

axios（三）- 源码

0、热门请求库

1、axios的特性

2、axios的使用

3、核心目录结构

4、执行流程

5、Axios 中的公共方法

6、Axios 如何支持不同的使用方式?

7、请求 / 响应拦截器是如何生效的？

8、派发请求 dispatchRequest

9、转换请求 / 响应数据

10、适配器（adapter）处理请求

11、取消请求

12、自己写一个取消重复请求

13、总结

热门请求库

axios的特性

axios的使用

核心目录结构

执行流程

总结：

axios（三）- 源码相关推荐

最新文章

热门文章