axios原理

原创

已于 2024-02-22 14:41:17 修改 · 1.7k 阅读

25 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2024-01-18 17:26:55 首次发布

本文详细介绍了axios的基本概念，包括其作为流行的JavaScript库的优点和特性。讲解了axios的不同调用方式，展示了其拦截器的实现原理，以及如何使用CancelToken实现请求取消，以责任链模式展示了整个流程。最后，还手写了axios的简单实现作为示例。

文章目录

axios基本概念

axios是目前比较流行的一个js库，是一个基于promise的网络数据请求库，主要用于发送网络数据请求，从后台服务器上获取数据返回给前端。

优点特性：

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

axios多种方式调用

axios的常用几种方式就是：

axios.get(url,config); url表示请求地址，config表示配置对象
axios.post(url,config)
axios(config)

从上面可以看出axios既可以当函数axios()使用又可以当对象axios.get()使用，原理：实质上axios是一个函数，但函数也属于是一个对象，所以同样可以向它身上追加属性和方法，我们所使用的axios是通过createInstance这个函数创造出来的，它简单实现的源码如下。
函数中实例化了Axios，Axios真正调用的是Axios原型链上的request方法；因此导出的axios需要关联到request方法，这里巧妙的通过bind函数进行关联，生成关联后的instance函数，同时指定它的调用上下文就是Axios的实例对象，因此instance调用时也能获取到实例对象上的defaults和interceptors属性；但是仅仅关联request还不够，再通过extend函数将Axios原型对象上的所有get、post等函数扩展到instance函数上，因此这也是我们才能够使用多种方式调用的原因所在。

function createInstance(defaultConfig) {
   
   
    // 1.实例化Axios
    var context = new Axios(defaultConfig);
    // 2.注意这里bind是一个自定义函数，返回一个函数（）=>{Axios.prototype.request.apply(context,args)}
    // 这里request基本是Axios的核心方法，相当于将这些方法全部绑到了实例化的对象上
    var instance = bind(Axios.prototype.request, context);

    // Copy axios.prototype to instance
    // 3.将Axios原型链上的其他方法也都绑定到instance上去，这些方法的this会指向contxt
    utils.extend(instance, Axios.prototype, context);

    // Copy context to instance
    // 4.将contxt上的属性复制到instance上去
    utils.extend(instance, context);

    return instance;
}

axios的构造函数Axios，Axios函数在原型对象上还挂载了request、get、post等函数，但是get、post等函数最终都是通过request函数来发起请求的。而且request函数最终返回了一个Promise对象，因此我们才能通过then函数接收到请求结果。

class Axios {
   
   
  constructor(instanceConfig) {
   
   
    this.defaults = instanceConfig;
    this.interceptors = {
   
   
      request: new InterceptorManager(),
      response: new InterceptorManager()
    };
  }
  request() {
   
   }
  
}

一个是将默认配置保存到defaults，另一个则是构造了interceptors拦截器对象
核心request函数主要作用：

兼容多种传参方式(1. request(‘example/url’, { method: ‘post’ }); request({ url: ‘example/url’, method: ‘post’ }))
合并参数
通过promise的链式调用，处理请求、响应拦截器以及发送请求等操作。

工具函数

bind：将Axios原型上的方法挂载到instance上
extend：将构造函数 Axios.prototype 上的方法挂载到新的实例 instance 上，然后将原型各个方法中的 this 指向 context

axios的拦截器如何实现？用的设计模式是哪种？

拦截器实现就只有一个属性（用于保存拦截器）及三个原型方法（添加、移除、执行）。

实例化axios后，就可以调用use进行绑定拦截器，需要注意的是，在传递use方法的第一个参数时必须返回config，保证下一个promise能获取到处理后的参数。 options是可选参数对象，可传入两个属性(synchronous, runWhen)，这么设计就是使用了责任链设计模式。

axios采用promise.resolve的方式将拦截器异步化。将所有请求拦截器放在请求方法之前unshift，所有的响应拦截器放在后push。遍历所有的方法通过promise的then方法将所有方法放在一条链上。

责任链模式是一种行为设计模式，允许你将请求沿着处理者链进行发送。收到请求后，每个处理者均可对请求进行处理，或将其传递给链上的下个处理者。
优点：

你可以控制请求处理的顺序。

单一职责原则。你可对发起操作和执行操作的类进行解耦。

开闭原则。你可以在不更改现有代码的情况下在程序中新增处理者。

责任链模式：执行的顺序是请求拦截器 -> 发起请求 -> 响应拦截器，这其实就是一个链条上串起了三个职责。

axios如何实现取消请求，和cancelToken如何使用

创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。（CancelToken内部通过promise实现，将promise的resolve方法暴露出去，手动控制promise状态）
在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例传递进去。（axios 内部注册回调取消函数，真正的取消方法，XMLHttpRequest 的abort方法取消请求）
当我们需要取消请求时,调用 CancelToken 实例的 cancel() 方法即可取消对应的请求。（内部executor传出来的函数，函数中包含了resolvePromise()，手动改变promise状态，执行then()，执行所有被注册的函数，也就是执行真正的abort()）

使用方法：

import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
// 【方法1】
axios.get('/user/12345', {
   
   
  cancelToken: new CancelToken(function executor(c) {
   
   
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;