Axios源码浅析

Axios简介

基于Promise的HTTP客户端，用于浏览器和node.js

• 支持浏览器端 ajax 请求
• 支持从 node.js 发出http请求
• 支持 Promise API
• 支持拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防范XSRF

源码目录介绍

源码架构

• 建立一个 Axios 构造函数，添加默认配置，拦截器，原型上挂载请求方法

// core/axios.js
  // 构造Axios构造函数
  function Axios(instanceConfig) {
    this.defaults = instanceConfig;
    // 添加拦截器
    this.interceptors = {
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
  }
  // 实际请求方法
  Axios.prototype.request = function() {};
  Axios.prototype.getUri = function() {};

  // 没有请求体 delete get head options
  Axios.prototype.get = function(url, config = {}) {
    return this.request(Object.assign(config, {
      method: 'get',
      url
    }))
  };

  // 有请求体 post put patch
  Axios.prototype.post = function(url, data, config = {}) {
    return this.request(Object.assign(config, {
      method: 'post',
      url,
      data
    }))
  };
复制代码

• 实例化一个Axios实例context，接着建立instance指向Axios.prototype.request方法，并绑定了上下文context；
• 经过extend方法把context中的原型方法和实例方法所有拷贝到instance上 ，返回instance
• 建立一个默认实例，挂载快捷方法create,CancelToken,all等方法

// axios.js
  // 建立一个Axios实例，挂载辅助方法，并导出该混合对象
  function createInstance(defaultConfig = {}) {
    var context = new Axios(defaultConfig);
    var instance = bind(Axios.prototype.request, context);
    // Copy axios.prototype to instance
    utils.extend(instance, Axios.prototype, context)
    // copy context to instance
    utils.extend(instance, context)
    return intance
  }
  // create the default instance to be exported
  var axios = createInstance({})
  axios.Axios = Axios
  axios.create= function(config) {
    return createInstance(Object.assign(axios.defaults, config))
  }
  // 取消请求
  axios.Cancel = require('./cancel/Cancel')
  axios.CancelToken = require('./cancel/CancelToken')
  axios.isCancel = require('./cancel/isCancel')

  // Prmoise.all 的语法糖
  axios.all = Promise.all
  axios.spread = require('./helpers/spread')
复制代码

🤔 如何实现 axios 所支持的的功能

支持 Node 和 浏览器 端的 http 请求

• 关键代码

  • lib/adpters
  • lib/defaults.js

• 原理介绍

  • 经过 process 区分出 Node 环境和浏览器环境
  • 浏览器环境使用 XMLHttpRquest 发起http请求，Node环境使用http，https 模块发起请求
  • 经过 Promise 包装实现请求方法

请求响应拦截器

• 关键代码

  • lib/core/InterceptorManager.js
  • lib/core/Axio.js

• 拦截器运行示意

Promise
  .then(request[1].fulfilled, request[1].rejected)
  .then(request[0].fulfilled, request[1].rejected)
  .then(dispatchRequest, undefined)
  .then(response[0].fulfilled, response[0].rejected)
  .then(response[1].fulfilled, response[1].rejected)
  .then() // user opt
复制代码

• 原理介绍
  • 实现一个拦截器类中维护一个数组，添加拦截器方法 use , 移除拦截器方法 eject, 遍历拦截器方法 forEach
  • 利用数组 unshift, push 方法，添加请求拦截器和响应拦截器
  • 利用 Promise.then 链式调用添加的拦截器

若是你们有了解过Koa的中间件原理，可能会发现很类似

转换请求和响应数据

• 关键代码

  • lib/core/transformData.js
  • lib/default.js

• 原理介绍

  • 默认配置中内置默认 transformRequest, transformResponse 方法，处理常见状况
  • 编写transformData 方法，遍历多个转换器，处理数据

function transformData(data, headers, fns) {
    /*eslint no-param-reassign:0*/
    utils.forEach(fns, function transform(fn) {
      data = fn(data, headers);
    });

    return data;
  };
复制代码

• dispatchRequest 请求前，调用 transformData 调用全部的请求转化器处理请求数据
• 请求完成后，调用 transformData 调用全部的响应转化器处理响应数据

取消请求

• 关键代码

  • lib/cancel/CancelToken.js
  • lib/adpters/xhr.js

• 原理介绍

  • 建立一个 CancelToken 构造函数接受一个 executor 函数，内部实例化一个 pending 状态的 Promise 对象，而后用一个 resolvePromise 变量指向 resolve 函数。
  • 接着执行 executor 函数，传入一个 cancel 函数，在 cancel 函数内部，会调用 resolvePromise 把 Promise 对象从 pending 状态变为 resolved 状态。
  • 在 request 请求中的 resolvePromise.then 被执行

客户端支持防范 XSRF

• XSRF介绍

• 防范方法

  • 验证请求 referer, 但因为 referer 也能够伪造，做用有限
  • 服务器端生成 token，并经过 set-cookie 的方式种到客户端，而后客户端发送请求的时候，从 cookie 中对应的字段读取出 token，而后添加到请求 headers 中。因为这个 token 比较难伪造，因此就能区分这个请求是不是用户正常发起的。

• 关键代码

  • lib/helpers/isURLSameOrigin.js
  • lib/adpters/xhr.js

• 原理介绍

  • 首先判断若是是配置 withCredentials 为 true 或者是同域请求，咱们才会请求 headers 添加 xsrf 相关的字段。
  • 若是判断成功，尝试从 cookie 中读取 xsrf 的 token 值。
  • 若是能读到，则把它添加到请求 headers 的 xsrf 相关字段中。

完整流程

如何开发一个 Axios 这样的开源工具库

• 需求分析，例如 Axios 支持的 feature，就是需求分析
• 项目搭建，完整的构建发布流程和完备测试case能够增长开发效率和信任度， Axios 采用 grunt 构建 (如今更多会选择 webpack, rollup, parcel 等)，并具备完备的测试，示例代码。
• API 设计，肯定需求以后，必定要花时间设计友好，易用的API， Axios 就有多种多样的使用方式，足够灵活。
• 实际编码，这部分多是花时间最少的哦😯~
• 完整的测试用例和示例，Axios 的测试case很是之多，example 下的示例代码也很丰富
• 详细的文档，列出使用的方法，可能存在的问题，
• issue 模板，方便用户反馈使用中的问题

结语

阅读社区优秀的源码，有助于开拓视野，作到知其因此然，遇到问题才能轻松解决~

• 转载请注明原文地址