使用abortcontroller作为删除活动听众的替代方案

自2017年推出以来， AbortController提供了一种取消fetch()请求的强大机制。该功能超出了简单的API调用，提供了用于管理活动听众的优雅解决方案，尤其是在诸如拖放互动之类的场景中。

一个简单的示例演示了取消fetch()请求：

 const Controller = new AbortController（）;
const res = fetch（'/'，{signal：controller.signal}）;
controller.abort（）;
console.log（res）; // =>承诺（被拒绝）：“ domexception：用户中止请求”

AbortController还改善了超时处理，为setTimeout提供了更清洁的替代方法：

功能超时（持续时间，信号）{
  返回新的承诺（（分辨率，拒绝）=> {
    const handle = settimeout（解析，持续时间）;
    信号？.addeventListener（'abort'，（）=> {
      cleartimeout（handle）;
      拒绝（新错误（“流产”））;
    }）;
  }）;
}

// 用法
const Controller = new AbortController（）;
const Promise =超时（10000，Controller.Signal）;
controller.abort（）;
console.log（Promise）; // =>承诺（被拒绝）：“错误：中止”

然而，重大进步在于Chrome 88对addEventListener中AbortSignal的支持。这允许一种简化的方法同时删除多个事件侦听器，从而取代了多个removeEventListener调用的需求。

考虑一个拖放示例。以前，管理mousedown ， mousemove和mouseup事件需要使用removeEventListener明确删除：

 //使用RemoveEventListener
el.AddeventListener（'Mousedown'，e => {
  if（e.buttons！== 1）返回;

  const onMouseMove = e => {
    if（e.buttons！== 1）返回;
    /* 工作 */
  };

  const onMouseUp = e => {
    if（E.Buttons＆1）返回；
    Window.RemoveEventListener（'Mousemove'，OnMouseMove）;
    window.removeEventListener（'MouseUp'，onMouseUp）;
  };

  Window.AddeventListener（'Mousemove'，OnMouseMove）;
  Window.AddeventListener（'MouseUp'，onMouseUp）;
}）;

使用AbortController ，一个abort()呼叫可干净地删除所有相关的听众：

 //使用abortcontroller
el.AddeventListener（'Mousedown'，e => {
  if（e.buttons！== 1）返回;

  const Controller = new AbortController（）;

  window.addeventlistener（'Mousemove'，e => {
    if（e.buttons！== 1）返回;
    /* 工作 */
  }，{信号：controller.signal}）;

  window.addeventListener（'MouseUp'，e => {
    if（E.Buttons＆1）返回；
    controller.abort（）;
  }，{信号：controller.signal}）;
}）;

目前，只有Chrome 88完全支持与addEventListener AbortSignal集成。虽然其他浏览器支持AbortController ，但此特定功能尚未广泛实现。多填充可用于更广泛的兼容性。

以上是使用abortcontroller作为删除活动听众的替代方案的详细内容。更多信息请关注PHP中文网其他相关文章！