【JavaScript】终止网络请求

AbortController.abort()

通过 AbortController 和 AbortSignal 来中⽌⽹络请求。

使⽤ AbortController 创建⼀个新的 AbortController 对象,然后使⽤它的 abort() ⽅法来中⽌请求。在创建请求时,将 AbortController.signal 分配给请求的 signal 属性,以便在调⽤ abort() ⽅法时取消请求。

js 复制代码
const controller = new AbortController();
const signal = controller.signal;
fetch(url, { signal })
  .then((response) => {
    // Handle the response
  })
  .catch((error) => {
    if (error.name === "AbortError") {
      console.log("Request was cancelled");
    } else {
      console.log("Request failed:", error);
    }
  });
// To abort the request, call the following:
controller.abort();

abort() ⽅法会在 DOM 请求完成之前中⽌它。它能够中⽌ fetch 请求、各种响应主体或者流的消耗。

XMLHttpRequest.abort()

js 复制代码
const xhr = new XMLHttpRequest()
xhr.open(method,url)
xhr.send()
// 然后在某个时间点调⽤ abort() ⽅法
xhr.abort();

当⼀个请求被终⽌,它的 readyState 将被置为 XMLHttpRequest.UNSENT (0),并且请求的

status 置为 0。

CancelToken

js 复制代码
const source = axios.CancelToken.source();
 axios.get('/api/data', {
  cancelToken: source.token
 }).then(response => {
  // 处理响应
}).catch(error => {
  if (axios.isCancel(error)) {
    console.log('请求已被取消:', error.message);
  } else {
    console.log('请求出错:', error.message);
  }
 });
 source.cancel('请求已被⽤户取消');
相关推荐
1uther5 分钟前
Unity核心概念⑨:Screen
开发语言·游戏·unity·c#·游戏引擎
Nan_Shu_6145 分钟前
Web前端面试题(2)
前端
知识分享小能手11 分钟前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
C_Liu_28 分钟前
C++:类和对象(下)
开发语言·c++
coderxiaohan32 分钟前
【C++】类和对象1
java·开发语言·c++
阿幸软件杂货间1 小时前
Office转PDF转换器v1.0.py
开发语言·pdf·c#
蚂蚁RichLab前端团队1 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
扯淡的闲人1 小时前
多语言编码Agent解决方案(5)-IntelliJ插件实现
开发语言·python
丑小鸭是白天鹅1 小时前
Kotlin协程详细笔记之切线程和挂起函数
开发语言·笔记·kotlin
孩子 你要相信光1 小时前
css之一个元素可以同时应用多个动画效果
前端·css