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

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

以下是 AbortController 的基本用法：

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

const controller = new AbortController();
1

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

const { signal } = controller;
1

将 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);
    }
  });
1
2
3
4
5
6
7
8
9
10
11

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

controller.abort();
1

调用 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 = true
    const res = await requestWithFetchAbort(inputVal.value)
    console.log(res);
    resText.value = res
    loading.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()
  }

  // 创建新的 AbortController
  currentAbortController = 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>


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99