Axios之开篇+Axios实例

前言

本系列文章是在阅读Axios源码基础上学习总结背后的实现思想。

详细内容

这部分分为两块进行介绍：

• axios源码项目核心代码的目录结构
• Axios构造函数以及通过Axios()构造函数构建axios实例

Axios项目核心

上图中是Axios项目中核心代码的目录结构

• adapters：HTTP请求的实现
• cancel：令牌取消相关的实现
• core：核心目录，axios构造函数、实例方法等的实现
• helpers：辅助工具目录
• axios.js：创建并暴露axios实例，你可以看成入口文件
• defaults.js：请求的默认配置对象
• utils.js：工具

注：具体目录下的文件的具体功能，之后分析到会具体说明其功能

axios.js

创建axios实例，并暴露该实例对象

// 该文件主要构建axios()、所有方法的暴露
// 实际上axios是一个函数，内部实际上是调用request方法
var axios = function wrap(defaults) {
    return Axios.prototype.request.apply(context, [...defaults]);
};

需要关注的几点有：

• 在createInstance中，实际上就两个处理：

  • 创建Axios实例
  • 将Axios实例以及Axios.prototype上所有的方法都定义在axios上，就是在使用axios时提供的的axios.get()等别名方法。

• axios.create方法实际上内部还是调用createInstance()

• axios.all实际上就是Promise.all

在axios.js中实际上依赖的外部模块有：

• defaults.js默认的配置对象模块
• Axios.js核心模块，定义了Axios构造函数、request方法以及各种方式的请求

总结

从Axios项目中的流程分析可知：

axios({}).then()的使用实际上是调用Axios.prototype.request方法，axios.create()亦是

下篇文档就具体分析下request方法的具体处理流程。