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

本文主要是介绍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>