XMLHttpRequest 截获拦截器执行顺序

前端

2023-12-12 20:32:56

Axios拦截器执行顺序：揭秘XMLHttpRequest事件的影响

在现代网络开发中，Axios库因其简洁、强大的HTTP请求处理能力而备受推崇。其拦截器功能允许开发者在请求和响应的整个生命周期中轻松修改和处理数据。理解Axios拦截器的执行顺序对于充分利用其潜力至关重要。

XMLHttpRequest事件与拦截器执行

XMLHttpRequest，即Ajax的关键技术，在底层充当Axios的HTTP请求引擎。为了支持各种与请求相关的事件，XMLHttpRequest提供了一套事件类型。这些事件包括：

loadstart：请求开始时触发
load：请求成功完成时触发
loadend：请求无论成功与否都已完成时触发
progress：请求过程中持续触发，提供进度信息
error：请求出错时触发
abort：请求被中止时触发

当Axios发起请求时，XMLHttpRequest对象会按顺序触发这些事件，并调用相应的事件处理程序。而Axios拦截器正是通过劫持这些处理程序，实现对请求和响应的拦截和修改。

拦截器执行顺序

Axios拦截器的执行顺序与XMLHttpRequest事件的触发顺序密切相关，如下所示：

1. 请求拦截器

在loadstart事件触发后执行，用于处理请求配置（如添加请求头、修改参数等）。

2. XMLHttpRequest loadstart事件处理程序

3. 响应拦截器

在load或error事件触发后执行，用于处理响应结果（如转换数据结构、处理错误等）。

4. XMLHttpRequest load或error事件处理程序

因此，Axios拦截器的执行顺序为：

请求拦截器
XMLHttpRequest loadstart事件处理程序
响应拦截器
XMLHttpRequest load或error事件处理程序

自定义拦截器执行顺序

虽然Axios拦截器的默认执行顺序是固定的，但通过自定义XMLHttpRequestEventTarget.addEventListener方法，我们可以修改事件处理程序的执行顺序，从而影响拦截器的执行顺序。

例如，以下代码将交换请求拦截器和XMLHttpRequest loadstart事件处理程序的执行顺序：

XMLHttpRequestEventTarget.prototype.addEventListener = function(type, listener, options) {
  if (type === 'loadstart') {
    // 将请求拦截器推迟到XMLHttpRequest `loadstart`事件处理程序之后执行
    this.addEventListener('load', listener, options);
  } else {
    this.addEventListener(type, listener, options);
  }
};