axios封装,请求取消和重试,请求头公共参数传递

axios本身功能已经很强大了,封装也无需过度,只要能满足自己项目的需求即可。

常规axios封装,只需要设置:

  1. 实现请求拦截
  2. 实现响应拦截
  3. 常见错误信息处理
  4. 请求头设置
import axios from 'axios';// 创建axios实例
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, // api的base_urltimeout: 5000 // 请求超时时间
});// 请求拦截器
service.interceptors.request.use(config => {// 可以在这里添加请求头等信息// 例如:config.headers['Authorization'] = 'your token';// config.data = qs.stringify(config.data); // 序列化,比如表单数据return config;},error => {// 请求错误处理return Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use(response => {// 对响应数据做处理,例如只返回data部分const res = response.data;// 如果返回的状态码为200,说明成功,可以直接返回数据if (res.code === 200) {return res;} else {// 返回的状态码非200,说明有错误,此处可以根据后端返回的错误码进行进一步处理return Promise.reject(res || 'error');}},error => {// 服务器返回的错误处理return Promise.reject(error);}
);export default service;

需要取消接口调用的场景:

  1. 假如一个页面接口太多、或者当前网络太卡顿、这个时候跳往其他路由,当前页面可以做的就是把请求中断掉;(优化)
  2. 假如当前接口调取了第一页数据,又调去了第二页的数据,当我们调取第二页数据时就需要把第一页数据的请求中断掉; (常见于在搜索大数据)
  3. tab频繁切换,取消切换前的tab接口请求;
  4. 取消下载。
AbortController 取消接口请求:

        从 v0.22.0 开始,Axios 支持以 fetch API 方式—— AbortController 取消请求。AbortController 接口表示一个控制器对象,允许你根据需要中止一个或多个 Web 请求。

代码实现:

    1、将中止控制器传递给 axios 的 调去接口的方法controller = new AbortController()
    2、axios里面有定义标识的属性signal
    3、点击取消:controller.abort()

const controller = new AbortController();axios.get('/foo/bar', {signal: controller.signal
}).then(function(response) {//...
});
// 取消请求
controller.abort()

需要重发的场景:

比如有重要的接口,一旦调取失败会影响整个页面的展示和使用,在用户网络不好等情况下导致接口调用失败。

解决:

在响应拦截返回失败时进行重试:设置重试次数的参数,再次发送请求

模拟 axios timeout: 2000,服务端加个延时3s。
axios里面设置两个参数:{
    retries: 3, // 设置重试次数为3次
      retryDelay: 1000, // 设置重试的间隔时间
}
完整代码:

<script setup lang="ts">
import axios from 'axios'const request = axios.create({baseURL: 'http://localhost:3000',// 设置请求超时时间为2秒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()console.log('取消')
}
</script><template><h1>axios请求重试</h1><button @click="getData()">发送请求</button><button @click="stop()">中止请求</button>
</template>

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

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

相关文章

Qt主窗口 之:状态栏(QStatusBar)

成员函数 原文链接&#xff1a;https://blog.csdn.net/techenliu/article/details/133687883 1&#xff09;void setText(const QString &text) 设置状态栏的文本。参数text是要显示的消息文本。 2&#xff09;QString text() const 返回当前状态栏的文本。 3&#xff0…

【漏洞复现】WordPress Plugin LearnDash LMS 敏感信息暴漏

漏洞描述 WordPress和WordPress plugin都是WordPress基金会的产品。WordPress是一套使用PHP语言开发的博客平台。该平台支持在PHP和MySQL的服务器上架设个人博客网站。WordPress plugin是一个应用插件。 WordPress Plugin LearnDash LMS 4.10.2及之前版本存在安全漏洞&#x…

The Morning Star

题目描述 本题有多组数据。 给定 n 个点&#xff0c;第 i 个点的坐标为 xi​&#xff0c;yi​。 现需要将星星和指南针放在任意两个点上&#xff0c;使得星星在指南针的正北、正东、正西、正南、正东南、正东北、正西南或正西北方向&#xff0c;求一共几种放法。&#xff08…

遥感动态监测技术

很多人对动态监测和动态检测两个名词有疑惑。我们可以这样理解&#xff0c;动态监测是一个广义的名词&#xff0c;泛指数据预处理、变化信息发现与提取、变化信息挖掘与应用等&#xff0c;以对整个流程的叙述。动态检测是一个狭义的名词&#xff0c;主要指部分数据预处理、变化…

C++list的模拟实现

为了实现list&#xff0c;我们需要实现三个类 一、List的节点类 template<class T> struct ListNode {ListNode(const T& val T()):_pPre(nullptr),_pNext(nullptr),_val(val){}ListNode<T>* _pPre;ListNode<T>* _pNext;T _val; }; 二、List的迭代器…

JAVAEE之CSS

1.CSS 是什么&#xff1f; 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 1.1 CSS和HTML的区别 CSS&#xff0c;全称为层叠样式表(Cascading Style Sheets)&#xff0c;是…

RocketMQ(版本4.9.4)+RocketMQ_Dashbord环境搭建(生产者、消费者的前置环境搭建)

一、官方网站下载 RocketMQ源码包 https://rocketmq.apache.org/zh/docs/4.x/introduction/02quickstart 二、把rocketMQ上传到Linux环境下解压&#xff0c;编译&#xff0c;执行以下命令&#xff08;需要提前装jdk和maven并配置好环境变量&#xff09; unzip rocketmq-all-4…

学习java第二十九天

如何通过注解配置文件&#xff1f; Configuration 用于指定当前类是一个 spring 配置类&#xff0c;当创建容器时会从该类上加载注解&#xff0c;value 属性用于指定配置类的字节码。 ComponentScan 用于指定 Spring 在初始化容器时要扫描的包。basePackages 属性用于指定要扫…

AtCoder Beginner Contest 347 (ABCDEF题)视频讲解

A - Divisible Problem Statement You are given positive integers N N N and K K K, and a sequence of length N N N, A ( A 1 , A 2 , … , A N ) A(A_1,A_2,\ldots,A_N) A(A1​,A2​,…,AN​). Extract all elements of A A A that are multiples of K K K, divi…

计算机的组成原理

1.简单常识介绍 1.1认识一下计算机的真实相貌 1.2怎么通过电信号传二进制 工作原理 cpu的针脚也就跟我们的手指一样用来接收高低电频&#xff0c;来判断2进制数据 cpu和数据交互的原理 2.计算机系统 软件介绍 硬件的发展历史 电子管时代 晶体管时代 中小规模集成电路 大规模…

C#(winform) 调用MATLAB函数

测试环境 VisualStudio2022 / .NET Framework 4.7.2 Matlab2021b 参考&#xff1a;C# Matlab 相互调用 Matlab 1、编写Matlab函数 可以没有任何参数单纯定义matlab处理的函数&#xff0c;输出的数据都存在TXT中用以后期读取数据 function [result,m,n] TEST(list) % 计算…

Uibot6.0 (RPA财务机器人师资培训第6天 )发票验真机器人案例实战

类似于小北的这篇博客&#xff1a;Uibot (RPA设计软件&#xff09;Mage AI智能识别&#xff08;发票识别&#xff09;———课前材料五_uibot 添加mageai-CSDN博客https://blog.csdn.net/Zhiyilang/article/details/135591297?spm1001.2014.3001.5501训练网站&#xff1a;泓江…

Vue3之defineModel

随着vue3.4版本的发布&#xff0c;defineModel也正式转正了。它可以简化实现父子组件之间的双向绑定&#xff0c;也是目前官方推荐的双向绑定实现方式。 1.vue3.4的实现双向绑定 大家应该都知道v-model只是一个语法糖&#xff0c;实际就是给组件定义了modelValue属性和监听up…

Linux终端命令工具screen入门

screen是linux里可以进行后台保持Terminal交互的工具&#xff0c;日常工作需要多个会话窗口或者恢复窗口时screen很有帮助 screen的功能大体有三个&#xff1a; 会话恢复&#xff1a;**只要Screen本身没有终止&#xff0c;在其内部运行的会话都可以恢复。**这一点对于远程登录的…

电流镜恒流源简介

目录 工作原理 设计要点 应用场景 初步想法&#xff0c;为参加活动先占贴&#xff08;带家人出去玩没时间搞~~&#xff09;&#xff0c;后面优化 电流镜恒流源是一种利用电流镜原理设计的电路&#xff0c;它可以提供恒定的电流输出&#xff0c;不受负载变化或电源电压波动的…

使用Docker搭建SABnzbd

SABnzbd是一款开源的Usenet下载客户端&#xff0c;它能够高效地从Usenet服务器下载NZB文件或者通过NNTP协议下载文章。SABnzbd支持多个同时下载的任务&#xff0c;能够自动处理下载完成后的文件&#xff0c;如解压缩、分类存储等&#xff0c;并且具有Web界面&#xff0c;方便用…

Linux:ip协议

文章目录 ip协议基本认识ip协议的报头 ip协议基本认识 前面对于TCP的内容已经基本结束了&#xff0c;那么这也就意味着在传输层也已经结束了&#xff0c;那么下一步要进入的是的是网络层&#xff0c;网络层中也有很多种协议&#xff0c;这里主要进行解析的是ip协议 前面的TCP…

迅饶科技 X2Modbus 网关 GetUser 信息泄露漏洞复现

0x01 产品简介 X2Modbus是上海迅饶自动化科技有限公司Q开发的一款功能很强大的协议转换网关, 这里的X代表各家不同的通信协议, 2是T0的谐音表示转换, Modbus就是最终支持的标准协议是Modbus协议。用户可以根据现场设备的通信协议进行配置,转成标准的Modbus协议。在PC端仿真…

政安晨:【Keras机器学习实践要点】(十二)—— 迁移学习和微调

目录 设置 介绍 冻结层&#xff1a;了解可训练属性 可训练属性的递归设置 典型的迁移学习工作流程 微调 关于compile()和trainable的重要说明 BatchNormalization层的重要注意事项 政安晨的个人主页&#xff1a;政安晨 欢迎 &#x1f44d;点赞✍评论⭐收藏 收录专栏: T…

前端对数据进行分组和计数处理

js对数组数据的处理&#xff0c;添加属性&#xff0c;合并表格数据。 let data[{id:1,group_id:111},{id:2,group_id:111},{id:3,group_id:111},{id:4,group_id:222},{id:5,group_id:222} ]let tempDatadata; tempDatatempData.reduce((arr,item)>{let findarr.find(i>i…