AbortController用法记录

发表于 更新于 分类于 ， 阅读次数：

记录AbortController的两个使用场景，多多沉淀，防止遗忘。

场景一：取消请求接口

MDN文档见 RequestInit - Web APIs | MDN

用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const controller = new AbortController();
const signal = controller.signal;

function fetchVideo() {
  fetch(url, { signal })
    .then((response) => {
      console.log("Download complete", response);
    })
    .catch((err) => {
      console.error(`Download error: ${err.message}`);
    });
}

// 1s后如果没返回就取消
setTimeout(() => {
  controller.abort(); // 取消接口
}, 1000);

备注

当 abort方法被调用时，fetch将会抛出一个AbortError错误。

场景二：取消事件监听

MDN文档见 EventTarget.addEventListener() - Web API | MDN

传统用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const listener = () => {}; // 监听回调
// 添加监听
someElement.addEventListener(
  "mouseup",
  listener,
);

// other

// 配套取消监听
someElement.removeEventListener(
  "mouseup",
  listener,
);

缺陷

取消时需要传入添加监听时监听回调函数，如果添加和移除在两个不同的逻辑块，处理起来会麻烦很多。

现代用法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const controller = new AbortController();
const signal = controller.signal;

// 添加监听
someElement.addEventListener(
  "mouseup",
  () => {},
  { signal },
);

// other

// 配套取消监听
controller.abort();

优点

可以随时随地取消，监听回调可以使用匿名函数。

总结

以上只是列举了最简单实用场景，实际使用中，一个signal可以同时赋值给多个请求/监听，大大方便了批量操作，减少了心智负担。