axios的请求中断和请求重试

请求中断

场景:1、假如一个页面接口太多、或者当前网络太卡顿、这个时候跳往其他路由,当前页面可以做的就是把请求中断掉(优化)2、假如当前接口调取了第一页数据,又调去了第二页的数据,当我们调取第二页数据时就需要把第一页数据的请求中断掉(常见于在搜索大数据)3、取消下载
原理:AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求
技术:axios+vue3.0模拟

AbortController

  1. 实现
    	1、将中止控制器传递给 axios 的 调去接口的方法controller = new AbortController()2、axios里面有定义标识的属性signal3、点击事件:controller.abort()
    
    <script setup lang="ts">
    import axios from 'axios'
    import { ref } from 'vue'const progress = ref(0) // 进度条百分比
    let controller: AbortController // 中止控制器// 中止下载
    const abortDownload = () => {if (controller) {controller.abort() // 使用 abort 方法中止下载console.log('中止下载')}
    }// 下载视频
    const fetchVideo = () => {controller = new AbortController() // 创建 AbortControlleraxios({// 将中止控制器传递给 axios 的 get 方法method: 'GET',url: 'http://localhost:3000/video',signal: controller.signal,responseType: 'arraybuffer',onDownloadProgress: (progressEvent) => {// 计算进度百分比progress.value = Math.round((progressEvent.loaded / progressEvent.total!) * 100)}}).then((response) => {console.log('下载完成', response)// ✅ 保存下载的文件const { buffer } = new Uint8Array(response.data)const blob = new Blob([buffer], { type: 'application/octet-stream' })const link = document.createElement('a') // 创建链接元素link.href = URL.createObjectURL(blob) // 将 Blob 对象转换为 URLlink.download = 'video.mp4' // 设置文件名link.click() // 模拟点击链接元素}).catch((err) => {if (axios.isCancel(err)) {console.log('下载被取消')} else if (err.name === 'AbortError') {console.log('下载被中止')} else {console.error(`下载错误:${err.message}`)}})
    }
    </script><template><div><button class="download" @click="fetchVideo">下载视频</button><button class="abort" @click="abortDownload">中止下载</button><div class="progress-bar"><div class="progress" :style="{ width: progress + '%' }"></div>{{ progress }}%</div></div>
    </template><style scoped>
    .progress-bar {height: 20px;background-color: #eee;margin-top: 10px;
    }
    .progress {width: 0%;height: 100%;background-color: #4caf50;transition: width 0.2s linear;
    }
    </style>
    

请求重试

场景:当用户访问我们的 Web 应用程序时,HTTP 请求可能会由于网络不稳定而失败,例如超时或网络异常。
模拟 axios timeout: 2000,服务端加个延时3s。
axios里面设置两个参数:{retries: 3, // 设置重试次数为3次retryDelay: 1000, // 设置重试的间隔时间
}
在响应拦截返回失败时进行重试:设置重试次数的参数,再次发送请求

使用 Axios 的拦截器拦截响应,则尝试再次发送请求,通过设置 retry 和 retryDelay 来控制重试请求的数量和每个请求之间的间隔。

```js
<script setup lang="ts">
import axios from 'axios'const request = axios.create({baseURL: 'http://localhost:3000',// 设置请求超时时间为5秒timeout: 2000,retries: 3, // 设置重试次数为3次retryDelay: 1000, // 设置重试的间隔时间
} as any)// 添加响应拦截器
request.interceptors.response.use((response) => {// 对响应数据做些什么return Promise.resolve(response.data)},(error) => {const config = error.config// 如果config不存在或未设置重试选项,则拒绝if (!config || !config.retries) {return Promise.reject(error)}// 设置变量来跟踪重试次数config.__retryCount = config.__retryCount || 0// 检查是否达到最大重试次数if (config.__retryCount >= config.retries) {return Promise.reject(error)}// 增加重试计数器config.__retryCount += 1// 创建一个新的Promise来处理每次重试之前等待一段时间const backoff = new Promise((resolve) => {setTimeout(() => {resolve('重新请求:' + config.__retryCount)}, config.retryDelay || 1)})// 返回Promise,以便Axios知道我们已经处理了错误return backoff.then((txt) => {console.log(txt)return request(config)})},
)// 请求中止控制器
let controller: AbortController
// --- 获取数据 ---
const getData = async () => {controller = new AbortController()const res = await request({signal: controller.signal, // 添加请求中止标识method: 'GET',url: '/delay_3s_data',})console.log('成功获取数据', res)
}const stop = () => {// 中止网络请求controller.abort()
}
</script><template><h1>axios请求重试</h1><button @click="getData()">发送请求</button><button @click="stop()">中止请求</button>
</template>

axios-retry 插件

	插件可以更方便实现请求重试npm install axios-retry
导入以下数据就可以了
// axios-retry 插件
axiosRetry(request, {retries: 3, // 设置重试次数retryDelay: () => 500, // 设置重试延迟时间shouldResetTimeout: true, // 重置请求超时时间// error.code===ECONNABORTED表示请求超时了 ERR_NETWORK网络出错retryCondition: (error) => ['ECONNABORTED', 'ERR_NETWORK'].includes(error.code!), // 重试条件
})
<script setup lang="ts">
import axios from 'axios'
import axiosRetry from 'axios-retry'const request = axios.create({baseURL: 'http://localhost:3000',timeout: 2000,
})// axios-retry 插件
axiosRetry(request, {retries: 3, // 设置重试次数retryDelay: () => 500, // 设置重试延迟时间shouldResetTimeout: true, // 重置请求超时时间retryCondition: (error) => ['ECONNABORTED', 'ERR_NETWORK'].includes(error.code!), // 重试条件
})// 请求中止控制器
let controller: AbortController
// --- 获取数据 ---
const getData = async () => {// 请求控制器controller = new AbortController()const res = await request({method: 'GET',url: '/delay_3s_data',signal: controller.signal, // 添加请求中止标识})console.log('成功获取数据', res)
}const stop = () => {// 中止网络请求controller.abort()
}
</script><template><h1>axios请求重试-axiosRetry</h1><button @click="getData()">发送请求</button><button @click="stop()">中止请求</button>
</template>

推荐阅读

axios的issues
掘金-Axios 项目有哪些值得借鉴的地方

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/102941.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Learning Sample Relationship for Exposure Correction 论文阅读笔记

这是中科大发表在CVPR2023的一篇论文&#xff0c;提出了一个module和一个损失项&#xff0c;能够提高现有exposure correction网络的性能。这已经是最近第三次看到这种论文了&#xff0c;前两篇分别是CVPR2022的ENC&#xff08;和这篇文章是同一个一作作者&#xff09;和CVPR20…

cap分布式理论

cap 理论 cap是实现分布式系统的思想。 由3个元素组成。 Consistency&#xff08;一致性&#xff09; 在任何对等 server 上读取的数据都是最新版&#xff0c;不会读取出旧数据。比如 zookeeper 集群&#xff0c;从任何一台节点读取出来的数据是一致的。 Availability&…

Unity基于C#事件委托机制

事件委托是一种用于实现观察者模式的设计模式&#xff0c;它允许对象在发生特定事件时通知其他对象。在Unity中&#xff0c;事件委托机制为开发者提供了一种简单而有效的方式来处理游戏中的事件和交互。 对啦&#xff01;这里有个游戏开发交流小组里面聚集了一帮热爱学习游戏的…

解决方案 | 法大大电子签精准击破销售场景签约难题

新商业形态及新交易模式不断涌现&#xff0c;电子签已经成为现代商业活动中不可或缺的一部分。特别是在销售场景中&#xff0c;电子签的应用不仅可以提高销售效率&#xff0c;还可以降低成本&#xff0c;提高客户满意度。本文将详细分析电子签在销售场景中的应用价值能力&#…

快速解决“找不到msvcr120.dll无法执行代码”问题,总结5解决方法

计算机已经成为我们生活和工作中不可或缺的一部分。然而&#xff0c;在使用计算机的过程中&#xff0c;我们常常会遇到各种问题&#xff0c;其中之一就是找不到msvcr120.dll文件。这个问题可能会可能导致计算机程序软件&#xff0c;游戏无法正常运行&#xff0c;影响到我们的工…

(十四)VBA常用基础知识:当前excel文件所有sheet循环,获取sheet名,获取最大行数最大列数

获取当前excel的所有sheet以及sheet名 Sub test()Dim ws As WorksheetFor Each ws In Worksheetsws.ActivateDebug.Print ws.NameNext ws End Sub 输出结果&#xff1a; Sheet1 Sheet2 Sheet3 Sheet4 Sheet52.获取最大行数 首先要明白取最大行的方式&#xff0c;为什么这样取…

Qt 读写数据流文件(转 CppGuiProgrammingWithQt4)

读取文件&#xff1a; update 20140525&#xff1a;添加线程处理&#xff0c;在读取大文件时优化&#xff0c;防止 app 出现 application 假死状态。 bool SpreadSheet::readFile(const QString &filePath){QFile file(filePath);if ( !file.open(QIODevice::ReadOnly)) …

ceph 分布式存储与部署

目录 一、存储基础&#xff1a; 1.单机存储设备&#xff1a; 2. 单机存储的问题&#xff1a; 3. 商业存储解决方案&#xff1a; 4. 分布式存储&#xff1a; 5. 分布式存储的类型&#xff1a; 二、Ceph 简介&#xff1a; 三、Ceph 优势&#xff1a; 四、Ceph 架构&#xff1a…

Vue或uniapp引入自定义字体

一、为什么引入字体 对于大部分APP或网站而言&#xff0c;字体是很重要的一部分。在前端开发中&#xff0c;选用合适的字体往往会极大地提升网站的视觉体验。然而&#xff0c;网页中默认字体的种类和风格有限&#xff0c;且在不同的设备、浏览器上渲染效果不尽相同。因此&…

01 时钟配置初始化,debug

1. 开启debug series&#xff0c;否则只能下载一次&#xff0c;再次下载要配置boot 2.f0外部时钟配置 h750 配置 实测可用

FPGA面试题(1)

一.FPGA内部结构 可编程I/OPLL锁相环&#xff08;其作用为&#xff1a;分频&#xff0c;倍频&#xff0c;相位调节、占空比&#xff09;逻辑阵列块LAB&#xff08;每个LAB由16个逻辑器件LE组成&#xff0c;每个LE包括一个查找表LUT和一个RAM构成。Cyclone IV EP4CE6F17C8中包含…

【Spring AOP】统一异常处理

统一异常处理 统⼀异常处理使⽤的是 ControllerAdvice ExceptionHandler 来实现的&#xff0c; 类上面加上 ControllerAdvice 注解表示控制器通知类方法上面加上 ExceptionHandler 表示异常处理器&#xff0c;并添加异常返回的业务代码 两个结合表示当出现异常的时候执⾏某个…

Android终极大招之全面取代drawble文件实现View圆角背景样式的新方案

简介 最近一直忙于音视频SDK的开发&#xff0c;遇到很多问题&#xff0c;简单来说&#xff0c;就是怎么让别人接入SDK时越简单越好。相信大多数Android开发都会遇到一个场景&#xff0c;给TextView或Button添加背景颜色&#xff0c;修改圆角&#xff0c;描边等需求。一看到这样…

React 组件传 children 的各种方案

自定义组件的时候往往需要传 children&#xff0c;由于写法比较多样&#xff0c;我就总结了一下。 方案列表 1. 类组件1.1 类组件&#xff0c;不使用解构1.2 类组件&#xff0c;使用解构 2. 函数组件2.1 函数组件&#xff0c;不使用解构2.2 函数组件&#xff0c;外部解构2.3 函…

docker 登录本地仓库harbor问题

1、报错如下&#xff1a; 添加目标harbor 仓库的hosts vim /etc/hosts 2、报错如下&#xff1a; 添加修改/etc/docker/daemon.json文件中的 insecure-registries vim /etc/docker/daemon.json 然后 systemctl daemon-reload systemctl restart docker再次登录

HQChart实战教程66-动态调整HQChart布局大小

HQChart实战教程66-动态调整HQChart布局大小 需求小程序h5AppHQChart插件源码地址 需求 在不销毁hqchart实例的情况下&#xff0c;动态调整K线图或分时图的大小&#xff0c; 如下图&#xff0c;把图1的K线图大小调整为图2的大小 图1 图2 小程序 调整画布大小&#xff0c;并…

echrat 的tooltip轮播播放高亮

在src目录下建立utils文件建立tooltip-auto-show-vue.js export function autoHover(myChart, option, num, time) {var defaultData {// 设置默认值time: 2000,num: 100}if (!time) {time defaultData.time}if (!num) {num defaultData.num}var count 0var timeTicket n…

(c语言进阶)指针的进阶

一.字符指针 1.一般应用 &#xff08;1&#xff09;%c的应用 &#xff08;2&#xff09;%s的应用 字符指针没有权限通过解引用去改变指针指向的值 2.笔试题 题目&#xff1a;判断输出结果 int main() { const char* p1 "abcdef"; const char* p2 "…

前端开发工具vscode

一、下载安装 https://code.visualstudio.com/ 二、安装插件 三、使用 ①、创建一个空目录 ②、利用vscode工具打开该目录 ③、将该目录设置为工作区 在工作区中添加文件&#xff0c;还可以进行浏览器访问&#xff08;提前安装了Live Server插件&#xff09; 为工具…

Dubbo-SPI机制

1、Java的SPI机制 SPI的全称是Service Provider Interface&#xff0c;是JDK内置的动态加载实现扩展点的机制&#xff0c;通过SPI可以动态获取接口的实现类&#xff0c;属于一种设计理念。 系统设计的各个抽象&#xff0c;往往有很多不同的实现方案&#xff0c;在面向的对象的…