axios原理

文章目录

    • axios基本概念
    • axios多种方式调用
    • 工具函数
    • axios的拦截器如何实现?用的设计模式是哪种?
    • axios如何实现取消请求,和cancelToken如何使用

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.');

你可能感兴趣的:(面试,前端)