Axios源码全解析-入门篇

Sauce
567 阅读3分钟

本文中axios版本为0.19.2，内容为自己学习总结，如有错误敬请指出，感谢

介绍

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。无论是vue还是react都推荐使用其作为项目里的请求库。本文中axios版本为0.19.2

官方github仓库中列出了如下功能：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

我们就来看看，axios是如何一步一步实现的。

最简单的一个XMLHttpRequest封装

先来看一个简单的封装ajax代码

这个ajax满足了基本的请求功能，支持POST与GET两种方法。 可看到主要分四个步骤：

  1. 创建一个XMLHttpRequest对象
  2. 处理url, data, type等配置
  3. 设置headers, 发送请求(open, send)
  4. 回调监听，通过xhr对象的onreadystatechange属性

关于什么是XMLHttpRequest对象可以看MDN上的文档，文末有附链接。 在Axios源码中，实际同样也是这四个步骤，如

  • 在1步骤中，使用Promise包裹XMLHttpRequest对象
  • 在2步骤中，增加序列化,baseURL,withCredential等自定义配置
  • 在3步骤中，增加XSRF携带token，auth用户身份校验等
  • 在4步骤中，增加超时timeout,请求与响应的拦截，数据的转换等功能

这样看来，axios实际并不复杂

目录结构

我们前往axios将源码下载下来，先看看目录结构，如图

我们先不去管单元测试与示例内容，直接找核心代码也就是lib目录，lib目录结构如下

-lib
    -adapters                           --- 请求对象
        - http.js                           --- node环境，request对象
        - xhr.js                            --- 浏览器环境，创建XMLHttpRequest对象
    -cancel                             --- 取消类
        - Cancel.js                         --- Cancel对象，含message属性
        - CancelToken.js                    --- CancelToken对象，取消request请求
        - isCancel.js                       --- 工具函数，判断是否取消过
    -core                               --- 核心
        -Axios.js                           --- Axios类
        -buildFullPath.js                   --- 拼接请求URL
        -createError.js                     --- 创建enhanceError对象
        -dispatchRequest.js                 --- 发送请求
        -enhanceError.js                    --- enhanceError对象类
        -interceptorManager.js              --- 拦截器对象
        -mergeConfig.js                     --- 合并配置工具函数
        -settle.js                          --- status监听判断
        -transformData.js                   --- data数据转换
    -helpers                            --- 工具函数
        -bind.js                            --- 绑定上下文
        -buildURL.js                        --- 处理get请求url参数
        -combineURLs.js                     --- 组合baseURL与config.url
        -cookies.js                         --- 读写cookies信息
        -deprecatedMethod.js                --- 不知道干啥的
        -isAbsoluteURL.js                   --- 判断是否完整请求地址
        -isURLSameOrigin.js                 --- 是否同域
        -normalizeHeaderName.js             --- 规范headers名称格式
        -parseHeaders.js
        -spread.js
    - axios.js                          --- 输出Axios
    - defaults.js                       --- 默认配置
    - utils.js                          --- 基础工具函数

一眼看过去像是很多模块，不过细看发现一个js文件内功能单一，代码量并不大。

入口与输出

我们看最外层的index.js，就只有一行内容

我们找到对应的axios文件

省略其中部分内容，我们可以看到主要内容为
引用一个Axios类，调用createInstance方法并传入defaults配置将其实例化并输出

我们在项目中使用到的axios API都源自这个实例

最后

因内容较多，在后续笔记中，我们再继续深入了解这个实例包含的属性与方法的具体实现，感谢。

参考资料

axios官方github
MDN关于XMLHttpRequest文档

avatar
文章
阅读
粉丝