axios 请求中断和请求重试

请求中断​

请求已经发出去了，怎样取消掉这个已经发出去的请求？
   微信扫码体验一下 （说不定哪天你就用得上）
  

用途：
   

• 比如取消正在下载中的文件
  
• 点击差别的下拉框选项，向服务器发送新请求但携带差别的参数，响应回来的数据在折线图内里展示。每次请求的数据量较大，但着实只要渲染最后一次选择。
  
• 应用场景迁移，一样平常在数据量较大的情况下，可通过请求中断，节流网络资源
  

  做法

1. 通过 AbortController 中断请求

复制代码

1. <script setup lang="ts">
2. import axios from 'axios'
3. import { ref } from 'vue'
5. const progress = ref(0) // 进度条百分比
6. let controller: AbortController // 中止控制器
8. // 中止下载
9. const abortDownload = () => {
10.   if (controller) {
11.     controller.abort() // 使用 abort 方法中止下载
12.     console.log('中止下载')
13.   }
14. }
16. // 下载视频
17. const fetchVideo = () => {
18.   controller = new AbortController() // 创建 AbortController
19.   axios({
20.     // 将中止控制器传递给 axios 的 get 方法
21.     method: 'GET',
22.     url: 'http://localhost:3000/video',
23.     signal: controller.signal,
24.     responseType: 'arraybuffer',
25.     onDownloadProgress: (progressEvent) => {
26.       // 计算进度百分比
27.       progress.value = Math.round((progressEvent.loaded / progressEvent.total!) * 100)
28.     }
29.   })
30.     .then((response) => {
31.       console.log('下载完成', response)
32.       // ✅ 保存下载的文件
33.       const { buffer } = new Uint8Array(response.data)
34.       const blob = new Blob([buffer], { type: 'application/octet-stream' })
35.       const link = document.createElement('a') // 创建链接元素
36.       link.href = URL.createObjectURL(blob) // 将 Blob 对象转换为 URL
37.       link.download = 'video.mp4' // 设置文件名
38.       link.click() // 模拟点击链接元素
39.     })
40.     .catch((err) => {
41.       if (axios.isCancel(err)) {
42.         console.log('下载被取消')
43.       } else if (err.name === 'AbortError') {
44.         console.log('下载被中止')
45.       } else {
46.         console.error(`下载错误：${err.message}`)
47.       }
48.     })
49. }
50. </script>
52. <template>
53.   <div>
54.     <button class="download" @click="fetchVideo">下载视频</button>
55.     <button class="abort" @click="abortDownload">中止下载</button>
56.     <div class="progress-bar">
57.       <div class="progress" :style="{ width: progress + '%' }"></div>
58.       {{ progress }}%
59.     </div>
60.   </div>
61. </template>
63. <style scoped>
64. .progress-bar {
65.   height: 20px;
66.   background-color: #eee;
67.   margin-top: 10px;
68. }
69. .progress {
70.   width: 0%;
71.   height: 100%;
72.   background-color: #4caf50;
73.   transition: width 0.2s linear;
74. }
75. </style>

复制代码

请求重试

拓展一个插件 axios-retry 插件
1 .axios-retry 1.6k 插件可以更方便实现请求重试。
2. 配置 axios-retry 核心属性

1. <script setup lang="ts">
2. import axios from 'axios'
3. import axiosRetry from 'axios-retry'
5. const request = axios.create({
6.   baseURL: 'http://localhost:3000',
7.   timeout: 2000,
8. })
10. // axios-retry 插件
11. axiosRetry(request, {
12.   retries: 3, // 设置重试次数
13.   retryDelay: () => 500, // 设置重试延迟时间
14.   shouldResetTimeout: true, // 重置请求超时时间
15.   retryCondition: (error) => ['ECONNABORTED', 'ERR_NETWORK'].includes(error.code!), // 重试条件
16. })
18. // 请求中止控制器
19. let controller: AbortController
20. // --- 获取数据 ---
21. const getData = async () => {
22.   // 请求控制器
23.   controller = new AbortController()
24.   const res = await request({
25.     method: 'GET',
26.     url: '/delay_3s_data',
27.     signal: controller.signal, // 添加请求中止标识
28.   })
29.   console.log('成功获取数据', res)
30. }
32. const stop = () => {
33.   // 中止网络请求
34.   controller.abort()
35. }
36. </script>
38. <template>
39.   <h1>axios请求重试-axiosRetry</h1>
40.   <button @click="getData()">发送请求</button>
41.   <button @click="stop()">中止请求</button>
42. </template>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。