AbortController通过简单的方式取消请求

180 阅读1分钟

例子:当用户频繁点击按钮发送网络请求的时候,可能我们需要通过取消前几次请求,或者通过防抖的形式减少请求的发送次数。这里以取消前几次请求为例子

let networkMap = {};
let url = "/home/proxy";
const sendRequest = () => {
  try {
    let controller = networkMap[url];
    if (controller) {
      controller.abort();
    }
    controller = new AbortController();
    networkMap[url] = controller;

    axios("http://localhost:8848/home/proxy", {
      method: "post",
      signal: controller.signal,
    }).then((res) => {
      console.log(res.data);
    });
  } catch (e) {
    console.log(e);
  }
}

通过定义networkMap存储每次请求时的url和controller的映射,如果networkMap[url]值存在,则进行取消网络请求。这里只是一个简单的例子,实际情况应该放在axios请求的实例中。取消请求后,再次赋值controller。

Snipaste_2024-04-18_15-26-55.png