前端Axios失败重试

前端Axios失败重试

失败重试次数写在vite全局配置中,之后统一修改即可

vite环境变量

# 失败重试次数
VITE_BASE_API_RETRY=5# 失败重试时间
VITE_BASE_API_RETRY_DELAY=3000

Axios重试

思路

  1. 在Axios创建中读取vite环境变量配置,将其赋值
  2. 在发送请求时,如果出错不返回也就是不return之后设置定时器去重试之前的请求
  3. 写在Axios中好处是不用一个一个去配置了
  4. 当重试次数大于约定次数则返回
  5. 如果期间成功了就回到主页

未解决问题

  1. 本来想的是,如果失败了就跳转到失败页这样在失败页中做一些失败的显示,比如重试次数之类显示
  2. 如果使用windows.lcoation方式跳转,在我的谷歌浏览器中会将进行弹窗拦截无法实现跳转,解决无法跳转问题移入vuerouter
  3. 如果请求成功后本来想的是,成功就返回上一次页面,但是会出现页面跳来跳去问题只能让它成功后跳转到固定页面
  4. 因为自定义的配置Axios不支持会报错Vue: Object literal may only specify known properties, and 'retry' does not exist in type 'CreateAxiosDefaults<any>'.

定义Axios变量

在创建请求时将重试次数和时间放入到Axios配置中

const request = axios.create({// 默认请求地址baseURL: import.meta.env.VITE_BASE_API,// 设置超时时间timeout: import.meta.env.VITE_BASE_API_TIMEOUT,retry: import.meta.env.VITE_BASE_API_RETRY, //设置全局重试请求次数(最多重试几次请求)retryDelay: import.meta.env.VITE_BASE_API_RETRY_DELAY, //设置全局请求间隔// 跨域允许携带凭证// withCredentials: true,
});

失败重试

失败的emit

error.config中可以获取到之前在Axios配置中的变量

使用全局总线在/500页面中接受失败的次数以及是否成功

async error => {const config = error.config;// 重试次数const retry = config.retry;// 重试时间const retryDelay = config.retryDelay;// 当前重试次数config._retryCount = config._retryCount || 0;// 如果重试次数大于定义次数返回错误if (config._retryCount > retry) {return Promise.reject(new Error(error.response.statusText));}// 失败后打开到500页面await router.push('/500');mittBus.emit('system-request-error', { retry, retryCount: config._retryCount, isSuccess: false });// 设置请求间隔 在发送下一次请求之前停留一段时间,时间为上方设置好的请求间隔时间const backoff = new Promise(function (resolve) {setTimeout(() => resolve(true), retryDelay || 1000);});// 如果失败次数加1config._retryCount += 1;// 再次发送请求return backoff.then(() => request(error.config));
}
成功的emit

如果成功使用全局事件总线,在错误页面接受之后跳转

(response: any) => {// 返回消息内容mittBus.emit('system-request-error', { retry: 0, retryCount: 0, isSuccess: true });return data;
}

错误页

<template><div class="not-container"><img alt="500" class="not-img" src="@/assets/images/tip1/500.png" /><div class="not-detail"><h2>500</h2><h4 v-if="isReTry">抱歉,您的网络不见了~🤦‍♂️🤦‍♀️</h4><h4 v-else class="mt-0 mb-2">您的网络不见了~ 正在重试 {{ retryCount }}/{{ retry }}</h4><button @click="router.push(HOME_URL)">返回首页</button></div></div>
</template><script lang="ts" setup>
import { HOME_URL } from '@/enums/constant/route.ts';
import { useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import mittBus from '@/utils/mittBus.ts';const router = useRouter();
const retry = ref(import.meta.env.VITE_BASE_API_RETRY);
const retryCount = ref(0);
const isReTry = ref(false);/*** * 监听失败消息*/
const onListenSystemRequestError = () => {mittBus.on('system-request-error', (value: any) => {if (value.isSuccess) {router.push('/');// router.go(-1);}retry.value = value.retry;retryCount.value = value.retryCount;if (parseInt(retry.value) === retryCount.value) {isReTry.value = true;}});
};onMounted(() => {onListenSystemRequestError();
});
</script><style lang="scss" scoped>
@import url('index.scss');
</style>

全部Axios代码

import { Message } from '@/components/Message/Message.tsx';
import router from '@/router';
import { localGet, localRemove } from '@/utils/util.ts';
import axios from 'axios';
import mittBus from '@/utils/mittBus.ts';const request = axios.create({// 默认请求地址baseURL: import.meta.env.VITE_BASE_API,// 设置超时时间timeout: import.meta.env.VITE_BASE_API_TIMEOUT,retry: import.meta.env.VITE_BASE_API_RETRY, //设置全局重试请求次数(最多重试几次请求)retryDelay: import.meta.env.VITE_BASE_API_RETRY_DELAY, //设置全局请求间隔// 跨域允许携带凭证// withCredentials: true,
});// 请求拦截器
request.interceptors.request.use(config => {// 当本地有token表示登录了,请求时将token带上const token = localGet('token');if (token !== null) {config.headers['token'] = token;}return config;
});// 响应拦截器
request.interceptors.response.use((response: any) => {// 返回相应数据const data = response.data;// 登录过期if (data.code === 208) {Message.warning(data.message);router.push('/').then();localRemove('token');}// 账户被封禁if (data.code === 209) {Message.warning(data.message);router.push('/').then();localRemove('token');}// 统一处理异常if (data.code !== 200 && data.code < 300) {Message.warning(data.message);} else if (data.code > 300) {Message.error(data.message);}// 返回消息内容mittBus.emit('system-request-error', { retry: 0, retryCount: 0, isSuccess: true });return data;},async error => {const config = error.config;// 重试次数const retry = config.retry;// 重试时间const retryDelay = config.retryDelay;// 当前重试次数config._retryCount = config._retryCount || 0;// 如果重试次数大于定义次数返回错误if (config._retryCount > retry) {return Promise.reject(new Error(error.response.statusText));}// 失败后打开到500页面await router.push('/500');mittBus.emit('system-request-error', { retry, retryCount: config._retryCount, isSuccess: false });// 设置请求间隔 在发送下一次请求之前停留一段时间,时间为上方设置好的请求间隔时间const backoff = new Promise(function (resolve) {setTimeout(() => resolve(true), retryDelay || 1000);});// 如果失败次数加1config._retryCount += 1;// 再次发送请求return backoff.then(() => request(error.config));},
);export default request;

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

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

相关文章

Obsidan插件开发

1 Obidian 开发 Obsidian 基于 Electron 框架开发&#xff0c;其前端主要使用了 HTML、CSS 和 JavaScript&#xff0c;而后端使用了 Node.js。Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境&#xff0c;使 JavaScript 能在服务器端运行。 在开发 Obsidian 插件时&…

qt 用宏控制静态接口的统一

1.概要 /** * 单件宏实验 * 创建一个可以生成单件的宏 * 起因&#xff1a;想让有些控件单件&#xff0c;但是c不支持静态的继承&#xff08;c#支持&#xff09; * 那么如果保证这些接口的统一呢&#xff0c;用宏 */ 2.代码 2.1 a.h #ifndef A_H #define A_H#include &…

分布式kettle调度管理平台简介

介绍 Kettle&#xff08;也称为Pentaho Data Integration&#xff09;是一款开源的ETL&#xff08;Extract, Transform, Load&#xff09;工具&#xff0c;由Pentaho&#xff08;现为Hitachi Vantara&#xff09;开发和维护。它提供了一套强大的数据集成和转换功能&#xff0c…

【C++】类、静态、枚举、重载、多态、继承、重写、虚函数

五、类 面向对象编程是一个巨大的编程范式。C中的类class就是基于对象的程序设计。 我们可以用类来定义一个新的类型&#xff0c;这些新类型就可以像内置类型一样使用。 内置类型颗粒度太太小&#xff0c;现实需求又非常复杂&#xff0c;这就需要我们把内置类型适度的进行拼搭…

源码学习:文件描述符

在进程描述学习中&#xff0c;扯到了max_fds&#xff0c;接着就联想到了日常运维中常见的ulimit参数、sysctl内核参数&#xff0c;原来以为max_fds与这些个关联性比较强&#xff0c;但经过一早上折腾以后&#xff0c;发现其实还是有一些差距的。但是在学习过程中&#xff0c;却…

【C++】数组、字符串

六、数组、字符串 讨论数组离不开指针&#xff0c;指针基本上就是数组的一切的基础&#xff0c;数组和指针的相关内容参考我的C系列博文&#xff1a;【C语言学习笔记】四、指针_通过变量名访问内存单元中的数据缺点-CSDN博客【C语言学习笔记】三、数组-CSDN博客 1、数组就是&…

RxJava快速入门

简单来说RxJava是一个实现响应式编程的类库。 那什么是响应式编程&#xff1f; 响应式编程的核心思想是"数据流是第一等公民”&#xff0c;程序的逻辑建立在数据流的变化之上。 响应式编程的几个核心概念: &#xff08;1&#xff09;数据流&#xff1a;在响应式编程中&…

数据结构03 链表的基本操作【C++数组模拟实现】

前言&#xff1a;本节内容主要了解链表的基本概念及特点&#xff0c;以及能够通过数组模拟学会链表的几种基本操作&#xff0c;下一节我们将通过STL模板完成链表操作&#xff0c;可以通过专栏进入查看下一节哦~ 目录 单链表及其特点 完整链表构成 完整链表简述 创建单链表 …

京东云备案流程图_云主机快速ICP备案_京东云服务器备案问题解答

京东云ICP备案流程&#xff0c;备案包括网站和APP备案&#xff0c;以及备案问题解答FAQ&#xff0c;阿腾云以京东云网站域名备案流程为例&#xff0c;先填写主办单位信息&#xff0c;选择网站备案或APP备案&#xff0c;申请授权码并验证&#xff0c;填写并上传主办单位详细信息…

【论文解读】Video Coding with Cross-Component Sample Offset

论文下载地址:Video Coding with Cross-Component Sample Offset 时间:2024 年 作者:Han Gao、Xin Zhao、Tianqi Liu和Shan Liu 级别:《IEEE Transactions on Image Processing》 机构:Tencent America 摘要 研究背景:传统的图像和视频压缩技术主要探索空间、时间和主观…

Python入门-基本数据类型-数字类型的操作

1.数字运算符 数字运算符是一些特殊的符号&#xff0c;主要用于数字之间的运算。根据功能可以将数字运算符分为算 术运算符、赋值运算符等。 1.1算术运算符 Python的算术运算符有“”“-”“*”“/”“%”“**”和“//”&#xff0c;这些都是双目运算符&#xff0c;用于对两…

光伏仿真软件是什么?都有哪些功能?

光伏仿真软件&#xff0c;作为现代光伏系统设计的重要工具&#xff0c;正日益受到设计师、工程师和决策者的青睐。它结合了物理学、工程学和计算机科学的原理&#xff0c;以数字化方式模拟光伏系统的运行&#xff0c;帮助用户预测和优化系统的性能。本文将详细探讨光伏仿真软件…

IntelliJ IDEA介绍

IntelliJ IDEA 是由 JetBrains 开发的一个集成开发环境 (IDE),专门为 Java 开发设计,同时也支持多种其他编程语言和框架。IntelliJ IDEA 以其智能代码分析、强大的重构功能以及丰富的插件生态系统而闻名,是许多开发者的首选 IDE。 IntelliJ IDEA介绍 IntelliJ IDEA 的主要…

发布一个Yii2扩展把debug信息存储到MongoDB中

这里写自定义目录标题 Yii 2 Debug For MongoDB目录结构安装依赖安装说明配置说明 Yii 2 Debug For MongoDB 本项目为yii2-debug的扩展&#xff0c;使用MongoDB对debug数据进行存储。如果使用Yii2进行多个应用的开发的话&#xff0c;把debug信息汇聚到一起可以方便查阅。 http…

[Go 微服务] go-micro + consul 的使用

文章目录 1.go-micro 介绍2.go-micro 的主要功能3.go-micro 安装4.go-micro 的使用4.1 创建服务端4.2 配置服务端 consul4.3 生成客户端 5.goodsinfo 服务5.1 服务端开发5.2 客户端开发 1.go-micro 介绍 Go Micro是一个简化分布式开发 的微服务生态系统&#xff0c;该系统为开…

Java学习【IO流:深入理解与应用(上)】

Java学习【IO流&#xff1a;深入理解与应用&#xff08;上&#xff09;】 &#x1f343;1.IO流体系结构&#x1f343;2.FileOutputStream&#x1f341;2.1FileOutputStream写数据的三种方式&#x1f341;2.2换行和续写 &#x1f343;3.FileInputStream&#x1f341;3.1每次读取…

软考高项备考经验分享

高项备考经验分享 在备考被论文卡两次后&#xff0c;这次终于通过了高项&#xff0c;分不是很高&#xff0c;比较幸运&#xff0c;对这次考试做个总结与分享&#xff0c;希望对同学们有所帮助。 1、备考时间 首先备考时间上不建议拉的太长&#xff0c;每天坚持看书3~6个月时…

《编译原理》阅读笔记:p25-p32

《编译原理》学习第 5 天&#xff0c;p25-p32总结&#xff0c;总计 8 页。 一、技术总结 1.lexical lexical这个单词后续会经常用到&#xff0c;所以首先要搞懂它的英文意思&#xff0c;不然看到中文的“词法&#xff0c;语法&#xff0c;文法”这三个词的时候就会懵了——l…

异常实践1

只针对不正常的情况才使用异常 异常只应该被用于不正常的条件&#xff0c;它们永远不应该被用于正常的控制流。《阿里手册》中&#xff1a;【强制】Java 类库中定义的可以通过预检查方式规避的RuntimeException异常不应该通过catch 的方式来处理&#xff0c;比如&#xff1a;Nu…

Java实现 现场评委给参赛选手打分的过程

通过评委的积极参与和公正评分,可以提高评选活动的公信力和可信度。 透明性:参赛者和观众应该清楚了解评审标准和评分过程,以便能够理解评委的评判依据。 可靠性:评委评分应该具有一致性和可靠性,不受主观因素或随机误差的影响。 编写程序&#xff0c;Java代码实现&#xff1…