abort() 来自 function 发出的请求

Question

我正在尝试通过修复任何 memory 泄漏来优化我的反应代码。 为此，我正在使用createAsyncThunk canceling-while-running 。

我成功地使用 useEffect 实现了这一点，我派遣了一个减速器来请求，当组件安装时，我可以在组件卸载时使用 useEffect 的返回自动触发 abort() 信号。 参考以下代码：

useEffect(() => {
    const promise = dispatch(getIssuedBooks())
    return promise.abort()
  }, []);

但是我还有其他减速器，它们会在 onClick 事件上被调度。 参考下面的代码：

const handleRequest = (id) => {
   dispatch(requestBook(id))
}

我的问题是当组件卸载时我该如何中止这个请求。 我尝试了一些东西，但没有成功。 请帮忙。 提前致谢。

Answer 1

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

const url = "video.mp4";
const downloadBtn = document.querySelector(".download");
const abortBtn = document.querySelector(".abort");

downloadBtn.addEventListener("click", fetchVideo);

abortBtn.addEventListener("click", () => {
  controller.abort();
  console.log("Download aborted");
});

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