【接口调试】AbortController

AbortController

AbortController 是一个接口，它允许你创建一个控制器对象，该对象可以用来中止一个或多个与之关联的Web请求。

• 当你创建一个 AbortController 实例时，你可以通过它的 signal 属性获取一个 AbortSignal 对象。

const controller = new AbortController();
const signal = controller.signal;

这个信号对象可以传递给支持取消操作的函数（比如 fetch），从而允许你在任何时候取消这些操作。

• 当你调用 AbortController 的 abort() 方法时，会发送一个取消信号到所有使用了这个 AbortController 生成的 AbortSignal 对象的异步操作。

const controller = new AbortController();
controller.abort();

一旦abort()被调用，相关的 AbortSignal 对象的 aborted 属性会被设置为 true，并且任何监听 abort 事件的处理程序都会被触发。

• 如果异步操作已经完成或者尚未开始，那么abort()将不会产生效果。

AbortController 和 AbortSignal 的来源

• AbortController：这个接口是在 DOM 标准中定义的，并不是 JavaScript 语言层面的规范。
  它是一个构造函数，用于创建新的控制器实例。
  AbortController 提供了一个 abort 方法来终止与之关联的所有请求，并且它有一个 signal 属性，返回一个 AbortSignal 对象。
• AbortSignal：这是一个信号对象，表示某个异步操作的取消状态。
  每个 AbortController 实例都会自动生成一个 AbortSignal 对象。
  当调用 controller.abort() 时，关联的 AbortSignal 对象的状态会变为已中止（aborted 属性为 true），并且它会触发 abort 事件。异步操作可以根据这个信号停止执行。

const controller = new AbortController(); // 创建一个新的 AbortController 实例
const signal = controller.signal; // 获取与之关联的 AbortSignal 对象

总结

AbortController 和 AbortSignal 一起工作，提供了一种标准化的方式来取消异步操作。

• AbortController 作为一个控制器，负责发送取消信号
• AbortSignal 则是这个信号的具体表现形式，它能够被异步操作监视并据此决定是否要中断当前的操作。

这种机制不仅适用于fetch 请求，还可以用于其他支持取消操作的场景，例如定时器、事件监听器等。
通过这种方式，开发者可以更灵活地控制应用程序中的异步流程，提升应用性能和用户体验。