【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('请求已被⽤户取消');
相关推荐
Ashlee_code几秒前
什么是Web3?金融解决方案
开发语言·金融·架构·eclipse·web3·区块链·php
颜渊呐2 分钟前
uniapp中APPwebview与网页的双向通信
前端·uni-app
Evand J13 分钟前
【MATLAB例程】AOA与TDOA混合定位例程,适用于三维环境、4个锚点的情况,附下载链接
开发语言·matlab
机器视觉知识推荐、就业指导14 分钟前
Qt 与Halcon联合开发八: 结合Qt与Halcon实现海康相机采图显示(附源码)
开发语言·数码相机·qt
10年前端老司机14 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星15 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构16 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚17 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin18 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive19 分钟前
原型与原型链到底是什么?
javascript