s AbortController 接口取消多次请求 取消上次请求

2024-04-24 08:12

本文主要是介绍s AbortController 接口取消多次请求 取消上次请求,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

AbortController 是一个 JavaScript API,它允许您在客户端中止一个或多个 Fetch 请求。这个 API 是 Fetch API 的一部分,并且与 AbortSignal 对象一起使用,以提供一种机制来控制请求的生命周期。

以下是 AbortController 的基本用法:

创建一个 AbortController 实例:这将创建一个新的控制器对象,它可以用来中止一个或多个请求。

const controller = new AbortController();

获取 AbortSignal 对象:从 AbortController 实例中获取 signal 属性,该属性返回一个 AbortSignal 对象。

const { signal } = controller;

将 AbortSignal 传递给 fetch 请求:在发起请求时,将 AbortSignal 作为选项对象的一部分传递给 fetch 函数。

fetch(url, { signal: signal }).then(response => response.json()).catch(error => {if (error.name === 'AbortError') {// 处理请求被中止的情况console.log('Fetch aborted');} else {// 处理其他错误console.error(error);}});

中止请求:当需要中止请求时,调用 AbortController 的 abort 方法。

controller.abort();

调用 abort 方法后,AbortSignal 对象的状态将变为 “aborted”,并且 fetch 请求将被中止。如果请求已经被中止,它将抛出一个 AbortError。

AbortController 非常有用,特别是当你需要实现超时机制或者用户取消了某个操作时,需要立即停止正在进行的网络请求。

请注意,AbortController 仅适用于 fetch 请求,对于其他类型的异步操作,如 XMLHttpRequest,需要使用不同的方法来实现中止功能。

示例代码

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'import { ref } from 'vue'const loading = ref(false)
const inputVal = ref('')
const resText = ref({})async function queryHandler(t) {// console.log(inputVal.value);try {loading.value = trueconst res = await requestWithFetchAbort(inputVal.value)console.log(res);resText.value = resloading.value = false} catch (e) {if(e.name !== 'AbortError') {console.error(e);loading.value = false}}
}function request(keyword: string) {// return new Promise((resolve,reject) => {//   fetch('http://127.0.0.1:9090/api?keyword='+keyword)//   .then(res => res.json())//   .then(data=> {//     console.log(data);//     resolve(data)//   })//   .catch(err => {//     reject(err)//   })// })return fetch('http://127.0.0.1:9090/api?keyword=' + keyword).then(res => res.json())
}let currentAbortController: AbortController | null = null
function requestWithFetchAbort(keyword: string) {// 取消上次未完成的请求if (currentAbortController) {currentAbortController.abort()}// 创建新的 AbortControllercurrentAbortController = new AbortController()return fetch('http://127.0.0.1:9090/api?keyword=' + keyword, {signal: currentAbortController.signal}).then(res => res.json())
}
</script><template><!-- <div><a href="https://vitejs.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" /> --><!-- <button>点击发送请求</button> --><input type="text" v-model="inputVal" @input="queryHandler"><p v-if="loading">正在发送请求 ...</p><h3 style="color:blueviolet">结果: {{ resText }}</h3>
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}input {padding: 8px 30px;
}.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

这篇关于s AbortController 接口取消多次请求 取消上次请求的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/931209

相关文章

SpringBoot+Redis防止接口重复提交问题

《SpringBoot+Redis防止接口重复提交问题》:本文主要介绍SpringBoot+Redis防止接口重复提交问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录前言实现思路代码示例测试总结前言在项目的使用使用过程中,经常会出现某些操作在短时间内频繁提交。例

springboot下载接口限速功能实现

《springboot下载接口限速功能实现》通过Redis统计并发数动态调整每个用户带宽,核心逻辑为每秒读取并发送限定数据量,防止单用户占用过多资源,确保整体下载均衡且高效,本文给大家介绍spring... 目录 一、整体目标 二、涉及的主要类/方法✅ 三、核心流程图解(简化) 四、关键代码详解1️⃣ 设置

spring中的ImportSelector接口示例详解

《spring中的ImportSelector接口示例详解》Spring的ImportSelector接口用于动态选择配置类,实现条件化和模块化配置,关键方法selectImports根据注解信息返回... 目录一、核心作用二、关键方法三、扩展功能四、使用示例五、工作原理六、应用场景七、自定义实现Impor

MybatisPlus service接口功能介绍

《MybatisPlusservice接口功能介绍》:本文主要介绍MybatisPlusservice接口功能介绍,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友... 目录Service接口基本用法进阶用法总结:Lambda方法Service接口基本用法MyBATisP

python web 开发之Flask中间件与请求处理钩子的最佳实践

《pythonweb开发之Flask中间件与请求处理钩子的最佳实践》Flask作为轻量级Web框架,提供了灵活的请求处理机制,中间件和请求钩子允许开发者在请求处理的不同阶段插入自定义逻辑,实现诸如... 目录Flask中间件与请求处理钩子完全指南1. 引言2. 请求处理生命周期概述3. 请求钩子详解3.1

Java中的Closeable接口及常见问题

《Java中的Closeable接口及常见问题》Closeable是Java中的一个标记接口,用于表示可以被关闭的对象,它定义了一个标准的方法来释放对象占用的系统资源,下面给大家介绍Java中的Clo... 目录1. Closeable接口概述2. 主要用途3. 实现类4. 使用方法5. 实现自定义Clos

java对接第三方接口的三种实现方式

《java对接第三方接口的三种实现方式》:本文主要介绍java对接第三方接口的三种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录HttpURLConnection调用方法CloseableHttpClient调用RestTemplate调用总结在日常工作

Java 的 Condition 接口与等待通知机制详解

《Java的Condition接口与等待通知机制详解》在Java并发编程里,实现线程间的协作与同步是极为关键的任务,本文将深入探究Condition接口及其背后的等待通知机制,感兴趣的朋友一起看... 目录一、引言二、Condition 接口概述2.1 基本概念2.2 与 Object 类等待通知方法的区别

SpringBoot实现接口数据加解密的三种实战方案

《SpringBoot实现接口数据加解密的三种实战方案》在金融支付、用户隐私信息传输等场景中,接口数据若以明文传输,极易被中间人攻击窃取,SpringBoot提供了多种优雅的加解密实现方案,本文将从原... 目录一、为什么需要接口数据加解密?二、核心加解密算法选择1. 对称加密(AES)2. 非对称加密(R

Java对接Dify API接口的完整流程

《Java对接DifyAPI接口的完整流程》Dify是一款AI应用开发平台,提供多种自然语言处理能力,通过调用Dify开放API,开发者可以快速集成智能对话、文本生成等功能到自己的Java应用中,本... 目录Java对接Dify API接口完整指南一、Dify API简介二、准备工作三、基础对接实现1.