网络中断时接口status显示canceled,无法捕捉到状态进行相关操作

遇到的问题:如图所示,loading状态栏无法关闭,因为.then和.catch还有.finally 中都无法捕捉到接口canceled的状态,导致一直在loading状态,无法进行操作关闭弹框这一步。
产生原因:客户端 在服务器响应前关闭了连接。(网络中断或者网卡导致的) 网络中断后,Promise可能没有正确 reject,因此 catch 块内的逻辑不会执行。
解决思路:尝试在网络中断的情况下手动 reject Promise,以确保 catch 块内的逻辑被执行。
解决办法使用 Promise 的 race 方法: 可以同时发起请求和设置一个超时 Promise,使用 Promise.race 来等待其中一个 Promise 完成。当网络连接断开或请求超时时,即可关闭加载状态。

代码如下:

// 创建超时抛出reject
const networkDisconnectedPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(new Error('Network disconnected'));
  }, 180000); // 设置超时时间为3分钟
});

// 当前真实需要调用的接口(Http.post是基于wx.request封装的的请求方法)
const requestPromise = Http.post({
  url: showStep ? `/mediator/mediation_case/update/${id}` : '/mediator/mediation_case/add',
  data: { ...form },
});

Promise.race([requestPromise, networkDisconnectedPromise]).then(() => {
  // 这里写接口调用成功后的操作(接口状态正常,后端有响应)
}).catch(error => {
  console.log("error",error);
  // 请求失败canceled处理
  if (error.message === "Network disconnected") {
    console.log("请求失败canceled处理");
  } else {
    console.error('请求失败:', error);
  }
}).finally(() => {
  // 不管成功或失败都会进入到finally这一步,所以在这里统一关闭loading状态
  setTimeout(() => {
    wx.hideLoading();
  }, 500);
});

拓展:关于 Promise 的 race 方法详解 

Promise.race 是 Promise 提供的一个静态方法,它接收一个可迭代对象(通常是一个数组),并返回一个新的 Promise。这个新的 Promise 的状态和第一个完成的 Promise 的状态一致,无论是成功还是失败。

具体来说,Promise.race 方法会等待传入的多个 Promise 中的任意一个状态发生改变,一旦有一个 Promise 状态发生改变(无论是成功还是失败),Promise.race 就会返回一个新的 Promise,并将这个状态传递给这个新的 Promise。这样,我们就可以通过 Promise.race 来实现一些特定的异步任务处理逻辑,比如设置超时、同时发起多个请求等。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

kafka Kerberos集群环境部署验证

背景 公司需要对kafka环境进行安全验证,目前考虑到的方案有Kerberos和SSL和SASL_SSL,最终考虑到安全和功能的丰富度,我们最终选择了SASL_SSL方案。处于知识积累的角度,记录一下kafka keberos安装部署的步骤。 机器规划 目前测试环境公搭建了三台kafka主机服务,现在将详细…

多家知名媒体到访“光子1号金融算力中心“ 交流AI与算力未来观

5月23日,企商在线 “光子1号金融算力中心媒体参观日”活动成功举办,十多家主流媒体、IT行业媒体及自媒体代表走进光子1号金融算力中心,深入了解企商业务发展、战略规划及“光子1号金融算力中心”等企商打造的新型数字基础设施,共同…

基于STC12C5A60S2系列1T 8051单片机的TM1637键盘数码管模块的数码管显示与单片机连接的按键的按键值的功能

基于STC12C5A60S2系列1T 8051单片机的TM1638键盘数码管模块的数码管显示与单片机连接的按键的按键值应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍TM1637键盘数码…

云计算期末复习(1)

云计算基础 作业(问答题) (1)总结云计算的特点。 透明的云端计算服务 “无限”多的计算资源,提供强大的计算能力 按需分配,弹性伸缩,取用方便,成本低廉资源共享,降低企…

坚守互联网底层逻辑,搜狐走向长期主义的next level

2024年以来,随着我国经济回升向好态势进一步巩固增强,网络内容供给不断丰富,新型消费持续活跃,互联网板块整体估值向预期进行修正。因此,中概互联网指数ETF(KWEB)一转颓势,截至5月21…

Aiseesoft Video Converter Ultimate视频转换大师,免安装中文旗舰版 v10.8.32

软件介绍 视频转换大师是一款集转码、编辑以及压缩功能于一身的专业软件,支持处理超过1,000种视频和音频格式。该工具不仅提供基础的格式转换服务,还拓展至高级功能,包括视频效果调整、数据压缩以及ID3信息编辑等,同时&#xff0…

MySQL简单测试和安装

MySQL 的特点 1、MySQL 性能卓越、服务稳定,很少出现异常宕机。 2、MySQL开放源代码且无版权制约,自主性及使用成本低。 3、MySQL历史悠久(版本众多),用户使用活跃,遇到问题可以寻求帮助。 4、MySQL体积小(相对大型关系型数据库)…

xxl-job入门

对比原有的任务调度 1. 支持可视化的界面 2. 执行任务分片 3. 支持线上集成 安装 拉取gitee项目并解压 xxl-job: 一个分布式任务调度平台,其核心设计目标是开发迅速、学习简单、轻量级、易扩展。现已开放源代码并接入多家公司线上产品线,开箱即用。…

python数据处理与分析入门-Pandas数据可视化例子

相关内容 Matplotlib可视化练习 Pandas 数据可视化总结 柱状图 reviews[points].value_counts().sort_index().plot.bar()散点图 reviews[reviews[price] < 100].sample(100).plot.scatter(xprice, ypoints)蜂窝图 reviews[reviews[price] < 100].plot.hexbin(xprice…

数据仓库ETL

小白的数据仓库学习笔记 2024/5/20 18:25 文章目录 ETLdim打开创建项目&#xff08;选这个&#xff0c;这个是做etl的&#xff09;建立元数据的连接同样的&#xff0c;建立与数据仓库的连接新建ssis包序列容器全量etl增量etl建立sql任务双击打开&#xff0c;设置连接、内容 双击…

nohup java -jar 启动java项目,设置linux服务器自启动

研究两天终于完成了,兄弟们点个赞啊 .sh文件需要改成如下图Notepad改 .sh文件内容路径啥的根据自己目录改 if ps aux | grep -v grep | grep "ruoyi-admin.jar"这里改成你自己的jar包 #!/bin/bash # 设置环境变量 export JAVA_HOME/usr/local/java/jdk-17.0.10 e…

Leecode560:和为 K 的子数组

这道题用暴力解法时间复杂度会很高&#xff0c;但是涉及到和等于多少的情况&#xff0c;一般情况下会考虑以空间换时间来存储前面获得的信息&#xff0c;然后将答案为某值的结果返回。 这里利用了累加然后通过哈希表寻找值的思想。就是先将前面的数全部加起来&#xff0c;统计…

区块链fisco联盟链搭建(二)搭建多群组联盟链

本文章只讲搭建的命令方法 以单机、四机构、三群组、八节点的星形组网拓扑为例 第一步创建并进入工作目录&#xff08;继续以fisco为例&#xff09; mkdir /fisco cd /fisco 获取搭链脚本上一篇文章区块链fisco联盟链搭建 (一)搭建单群组四节点联盟链中有 第二步生成多群组…

若依前端vue实现 输入框下拉选择加搜索用户

探索代码以及详细的注解 <template><div><el-select v-model"selectedUserId" filterable placeholder"选择用户" change"handleChange"><el-optionv-for"user in filteredUsers":key"user.userId":l…

wordpress教程视频 wordpress教程网盘 wordpress教程推荐wordpress教程网

WordPress&#xff0c;作为一款强大且灵活的开源内容管理系统&#xff0c;已成为许多网站开发者与运营者的首选。其强大的功能、丰富的插件以及易于上手的特点&#xff0c;使得无论是初学者还是专业开发者都能轻松构建出个性化的网站。然而&#xff0c;对于初学者来说&#xff…

Default Folder X for Mac v6.0.7激活版:高效、智能的文件管理新选择

在快节奏的工作与生活中&#xff0c;高效管理文件已成为每个Mac用户的迫切需求。Default Folder X for Mac正是为了满足这一需求而生&#xff0c;它以其卓越的性能和丰富的功能&#xff0c;为Mac用户带来了前所未有的文件管理体验。 Default Folder X for Mac拥有直观易用的界面…

学生用小台灯什么牌子的好?五款专业护眼灯的牌子在线解析

台灯已成为每个家庭中不可或缺的照明设备&#xff0c;它的作用不仅限于在夜晚提供充分的光亮&#xff0c;还能迅速营造出适宜的氛围&#xff0c;为用眼提供一个更佳的环境。随着生活品质的提高&#xff0c;人们对台灯的期望也逐步升级&#xff0c;智能化和护眼功能逐渐成为消费…

蔬菜水果店做配送分销小程序的作用是什么

蔬菜水果是人们生活必需&#xff0c;传统为线下市场、超市、路边小摊等场景购买&#xff0c;如今快节奏时代&#xff0c;用户需要更快完成消费、商家也需要摆脱竞争获客转化以及提升自己的运营能力。 蔬菜水果隔三岔五或每天都会购买&#xff0c;老客粘性较高&#xff0c;还需…

秋招突击——算法打卡——5/24——两数相加

问题描述 第一次实现代码 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(nullptr) {}* ListNode(int x) : val(x), next(nullptr) {}* ListNode(int x, ListNode *next) : val(x)…

人工智能的明天:机器学习与自动化的演进之旅

方向一&#xff1a;技术革新与行业应用 现状分析&#xff1a; 当前的IT行业正处于一个技术革新的高峰期。量子计算虽然还处于研究和开发阶段&#xff0c;但其潜力巨大&#xff0c;未来可能在药物发现、材料科学和复杂系统模拟等领域带来突破。虚拟现实&#xff08;VR&#xff…