前端取消请求

取消请求

发送一个异步请求获取数据，并在控制台中打印出返回结果。这里使用了 fetch 方法来发送请求，同时使用 AbortController 对象来实现请求的取消操作。

具体来说，代码中定义了一个 list 函数，该函数会创建一个 AbortController 对象，并将其传递给 fetch 方法的 signal 参数中，以便在需要取消请求时使用。在发送新的请求之前，会先检查上一次请求是否已经完成，如果没有完成，则会使用 AbortController 对象的 abort 方法来取消上一次请求。

图下面代码所示

在里面使用异常捕获，因为再多次发送请求时并取消请求会提示This operation was aborted

let controller;

const list = async () => {
  controller && controller.abort();
  controller = new AbortController();

  try {
    const result = await fetch(
      "http://129.211.12.48:8080/api/forum/loadArticle",
      { signal: controller.signal }
    ).then((resp) => resp.json());

    console.log(result);
  } catch (error) {
    console.log("取消了上一次请求");
  }
};

list();
list();

请求取消只能在fetch中实现，在xhr中无法实现，如相关库axios也是基于xhr实现的无法请求取消

axios 取消请求

首先创建了一个 CancelToken 实例，然后将其传递给请求的配置对象中。如果需要取消请求，可以调用 cancel 方法，并传递一个取消请求的原因。在请求的 catch 方法中，可以检查错误对象是否是由于请求被取消而导致的，如果是，就可以根据需要进行处理。

需要注意的是，如果请求已经发送并且正在等待响应，那么取消请求将不起作用，因为请求已经在服务器上处理了

import axios from "axios";
​
// 创建 CancelToken 实例
const source = axios.CancelToken.source();
​
// 发送请求
axios
  .get("http://129.211.12.28:8080/api/forum/loadArticle", {
    cancelToken: source.token,
  })
  .then((response) => {
    console.log(response.data);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log("请求已取消：", error.message);
    } else {
      console.log("请求出错：", error.message);
    }
  });
​
// 取消请求
source.cancel("请求被用户取消");