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如何使用

1. 创建一个 CancelToken 的实例,它有一个 executor 函数,可以通过调用 executor 参数中的 cancel 函数来取消请求。
2. 在 axios 请求配置中指定 cancelToken 属性,将 CancelToken 实例传递进去。
3. 当我们需要取消请求时,调用 CancelToken 实例的 cancel() 方法即可取消对应的请求。
4. axios 检测到配置的 cancelToken 被取消,就会取消掉这个请求,并在错误回调中返回一个 Cancel 错误。
5. axios 内部会监听 cancelToken 实例的 cancel 信号,一旦触发就会跳出队列,取消对应请求的执行。

使用方法：

import axios from 'axios';
const CancelToken = axios.CancelToken;
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel('Operation canceled by the user.');