【接口调试】AbortController
- AbortController
- AbortController 和 AbortSignal 的来源
- 总结
 
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 请求,还可以用于其他支持取消操作的场景,例如定时器、事件监听器等。
 通过这种方式,开发者可以更灵活地控制应用程序中的异步流程,提升应用性能和用户体验。