axios实现取消请求的方法详解

本文我们讨论的问题是——axios 是如何实现取消请求（Cancel requests）的？

在 axios 中取消请求

axios 是这样取消请求的。

const controller = new AbortController();

axios.get('https://httpstat.us/200', {
  signal: controller.signal
}).catch(error => {
  // 2) 在 catch 中捕获错误
  console.log(error) // { message: 'canceled', name: 'CanceledError', code: 'ERR_CANCELED' }
});
// 1) 取消请求
controller.abort()

AbortController 是在 DOM 标准中定义的 API，统一了取消类操作的实现，在浏览器端已经受到广泛支持了。

取消请求的实现

取消请求的实现位于 lib/adapters/xhr.js（暂不考虑 Node.js 实现）。

// /v1.6.8/lib/adapters/xhr.js#L244
if (config.signal) {
  config.signal.aborted
    ? onCanceled() :
    config.signal.addEventListener('abort', onCanceled)
}

内部会判断是否传入了 signal 配置项。如果传入了，就监听 controller.signal 上的 abort 事件，这个事件会在调用 controller.abort() 方法时触发。

不过，还有一种可能是传入 controller.signal 时，先前就已经调用了 controller.abort()，这样 abort 事件永远都不会触发了。

不过没有关系，调用了 controller.abort() 后，controller.signal.aborted 属性会置为 true，因此可以通过 aborted 属性，确保 onCanceled 回调函数始终被调用。

onCanceled 处理函数内容如下。

// /v1.6.8/lib/adapters/xhr.js#L234
onCanceled = cancel => {
  reject(!cancel || cancel.type
    ? new CanceledError(null, config, request) 
    : cancel
  );
  request.abort();
};

调用 controller.abort() 后，处理函数 onCanceled 会接受一个 cancel Event 参数，结构类似 { type: 'abort' } 这样，然后就会返回 axios 自定义的 CanceledError 错误。

这里有 2 个知识点：

• axios 对接口请求过程使用 new Promise((resolve,reject)){...} 进行了封装，确保始终返回 Promise 对象，这里的 reject(...) 表示“请求以失败告终”
• 至于 reject(cancel) 的分支逻辑，是为了兼容 CancelToken 的写法，这是旧的取消请求的实现，不过现在已经弃用了，新项目中不要再用了

最后，调用 request.abort()，这是实际终止当前请求的地方。

request 就是 XMLHttpRequest 实例，abort() 是 XMLHttpRequest 天然支持的用于终止请求的方法。

// /v1.6.8/lib/adapters/xhr.js#L76
let request = new XMLHttpRequest();

到此，我们就完成了 axios 取消请求的实现介绍。你是否看懂了呢？

总结

取消请求是 axios 提供的核心功能之一，本文我们介绍了它在浏览器端的实现。

axios 在浏览器端是使用 XMLHttpRequest API 提供请求能力的，其实例上提供了 abort() 方法用于终止请求，而 axios 就是利用这一点跟 AbortController API 配合实现请求的取消的。

到此这篇关于axios实现取消请求的方法详解的文章就介绍到这了,更多相关axios取消请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论