多种中断HTTP请求的方式

逛街的猫啊

已于 2022-11-19 11:31:21 修改

阅读量1.5k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： WEB前端文章标签： http request 请求中断停止

于 2022-11-13 08:48:39 首次发布

本文链接：https://blog.csdn.net/swl979623074/article/details/127828204

WEB前端专栏收录该内容

52 篇文章

订阅专栏

本文对比了AJAX、fetch API和Axios库在处理GET请求、中止请求的不同方法，包括AbortController、AbortSignal和canceltoken的应用，适合理解现代前端和后端异步请求控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

🤩🤩🤩
To 个人主页关注不迷路 😙😙😙

一、XHR

const xhr = new XMLHttpRequest();
addListeners(xhr);
xhr.open("GET", url);
xhr.send();

// 中止请求
xhr.abort();

二、fetch

中止 fetch 的请求

2.1 AbortController

使用AbortController创建一个信号，自主控制请求的中止。

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

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

// 中止请求
controller.abort();

2.2 AbortSignal

使用AbortSignal创建一个超时信号

try {
  const res = await fetch(url, { signal: AbortSignal.timeout(5000) });
} catch (err) {
  if (err.name === "TimeoutError") {
    // ...
  } else if (err.name === "AbortError") {
    // ...
  } else if (err.name === "TypeError") {
    // AbortSignal.timeout() method is not supported
  } else {
    // A network error, or some other problem.
    console.error(`Error: type: ${err.name}, message: ${err.message}`);
  }
}

三、Axios

3.1 AbortController

从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 中止请求：

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

axios.get("/foo/bar", { signal }).then(function (response) {
  //...
});

// 中止请求
controller.abort();

3.4 CancelToken deprecated

您还可以使用 cancel token 取消一个请求。

Axios 的 cancel token API 是基于被撤销 cancelable promises proposal。
此 API 从 v0.22.0 开始已被弃用，不应在新项目中使用。

可以使用 CancelToken.source 工厂方法创建一个 cancel token ，如下所示：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios
  .get("/user/12345", {
    cancelToken: source.token,
  })
  .catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log("Request canceled", thrown.message);
    } else {
      // 处理错误
    }
  });

axios.post(
  "/user/12345",
  {
    name: "new name",
  },
  {
    cancelToken: source.token,
  }
);

// 取消请求（message 参数是可选的）
source.cancel("Operation canceled by the user.");