promise.race方式使用

news/2024/6/15 15:08:30/文章来源:https://blog.csdn.net/Xiang_Gong_Ya_/article/details/137276554

Promise.race

赛跑机制,只认第一名

Promise.race其实使用的并不多,如果真要使用。我们可以提出这样一个需求:

比如:点击按钮发请求,当后端的接口超过一定时间,假设超过三秒,没有返回结果,我们就提示用户请求超时

<template><div class="box"><el-button type="primary" plain @click="clickFn">点击测试</el-button></div>
</template><script>
export default {name: "App",methods: {async clickFn() {// 第一个异步任务function asyncOne() {let async1 = new Promise(async (resolve, reject) => {setTimeout(() => {// 这里我们用定时器模拟后端发请求的返回的结果,毕竟都是异步的let apiData1 = "某个请求";resolve(apiData1);}, 4000);});return async1;}console.log("异步任务一", asyncOne());  // 返回的是pending状态的Promise对象// 第二个异步任务function asyncTwo() {let async2 = new Promise(async (resolve, reject) => {setTimeout(() => {let apiData2 = "超时提示";resolve(apiData2);}, 3000);});return async2;}console.log("异步任务二", asyncTwo()); // 返回的是pending状态的Promise对象// Promise.race接收的参数也是数组,和Promise.all类似。只不过race方法得到的结果只有一个// 就是谁跑的快,结果就使用谁的值let paramsArr = [asyncOne(), asyncTwo()]Promise.race(paramsArr).then((value) => {console.log("Promise.race方法的结果", value);if (value == "超时提示") {this.$message({type:"warning",message:"接口请求超时了"})  }else{console.log('正常操作即可');}})},},
};
</script>

Promise.all接收的是数组,得到的结果也是数组,并且一一对应,也可以理解为Promise.all照顾跑的最慢的,最慢的跑完才结束。
Promise.race接收的也是数组,不过,得到的却是数组中跑的最快的那个,当最快的一跑完就立马结束。

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

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

相关文章

Mamba解读(FlashAttention,SSM,LSSL,S4,S5,Mamba)

Sequence modelScale and EfficiencyFlashAttentionMotivationMethodFlashDecoding MambaState-Space Models&#xff08;SSM&#xff09;Selective State Space Models&#xff08;Mamba&#xff09; Sequence model seq2seq任务将 输入序列 x ( t ) x(t) x(t) 映射为 输出序…

Collection与数据结构 链表与LinkedList(四):双向无头非循环链表的实现与LinkedList的使用

1. 双向无头非循环链表的实现 下面我们给出一个接口,接口中的这些方法就是待实现的方法 public interface ILinkedList_2 {//头插法void addFirst(int data);//尾插法void addLast(int data);//任意位置插入,第一个数据节点为0号下标void addIndex(int index,int data);//查找…

Python框架下的qt设计之JSON格式化转换小程序

JSON转换小程序 代码展示&#xff1a; 主程序代码&#xff1a; from PyQt6.QtWidgets import (QApplication, QDialog, QMessageBox )import sys import jsonclass MyJsonFormatter(jsonui.Ui_jsonFormatter,QDialog): # jsonui是我qt界面py文件名def __init__(self):super()…

在Arduino IDE中使用文件夹组织源文件和头文件

在Arduino IDE中使用文件夹组织源文件和头文件 如果你是一名Arduino爱好者&#xff0c;你可能会发现随着项目的复杂度增加&#xff0c;代码的管理变得越来越困难。在Arduino IDE中&#xff0c;你可以通过使用文件夹来更好地组织你的源文件和头文件&#xff0c;使得代码更加清晰…

【PyTorch][chapter 25][李宏毅深度学习][ CycleGAN]【实战】

前言&#xff1a; 论文中直接提供了GitHub 的代码下载地址 GitHub - junyanz/pytorch-CycleGAN-and-pix2pix: Image-to-Image Translation in PyTorch 这里面简单的解读一下. 目录&#xff1a; 1. 模型参数配置 2&#xff1a; 生成器模型 3&#xff1a; 鉴别器模型 4&#…

[计算机效率] 文本编辑工具:Notepad++

3.12 文本编辑工具&#xff1a;Notepad Notepad是一款免费的文本编辑器&#xff0c;适用于Windows操作系统。它具有轻量级、高效、可定制性强等特点&#xff0c;并且支持多种语言。以下是关于Notepad的详细介绍&#xff1a; 功能特点&#xff1a; 多语言支持&#xff1a;Note…

Flutter 开发学习笔记(4):widget布局容器学习

文章目录 前言相关链接Widget 有状态和无状态Flutter 代码风格去掉烦人的括号后缀提示代码缩进 Flutter 布局最简单的布局widgets和Material widgets Dark语法习惯Flutter 布局默认布局Center居中Padding 填充Align对齐默认居中顶部底部右上角 通用 WidgetContainer处于性能原因…

Matlab|计及需求侧响应日前—日内两阶段鲁棒备用优化

目录 1 主要内容 日前计划模型 日内调整模型 不确定集建模 2 部分代码 3 程序结果 4 下载链接 1 主要内容 该程序复现文章《计及需求侧响应日前—日内两阶段鲁棒备用优化》&#xff0c;以6节点系统为例&#xff0c;综合考虑风电出力不确定性与电力设备 N-k强迫停运&…

小剧场短剧影视小程序源码,附带系统搭建教程

安装教程 linux/win任选 PHP版本&#xff1a;7.3/7.2&#xff08;测试时我用的7.2要安装sg扩展 不会的加QQ295526639&#xff09; 批量替换域名http://video.owoii.com更换为你的 批量替换域名http://120.79.77.163:1更换为你的 这两个都替换你的 /extend/yzf/lib/epay.config.…

Android获取连接到手机热点上的设备信息

主题&#xff1a;在手机开启热点网络的情况下&#xff0c;想要获取是哪个设备已经连接上了当前开启的热点。 实现思路&#xff1a;Android通过读取 /proc/net/arp 文件可以得到连接当前热点的设备信息&#xff0c;包括Mac地址、IP地址等信息。 一. 方法逻辑&#xff1a; /*** …

springboot读取绝对路径如何处理

我的需求是springboot集成kafka需要读取证书文件&#xff0c;然后进行消费工厂的创建和监听&#xff0c;当然这里需要用到绝对路径文件的读取&#xff0c;相对路径是不支持的。 开始之前我们使用常用的几种方式获取路径文件的方式&#xff1a; getClass().getClassLoader().ge…

网络安全应急响应:保护网络安全的最后一道防线

网络安全应急响应&#xff1a;保护网络安全的最后一道防线 网络安全是当今信息社会中至关重要的问题&#xff0c;网络攻击的频繁发生使得企业、政府和个人面临着越来越大的安全威胁。为了及时有效地应对网络安全事件&#xff0c;网络安全应急响应成为了必不可少的一环。 小德将…

【WSN覆盖】基于灰狼优化算法的三维无线传感器网络覆盖优化 三维WSN覆盖优化【Matlab代码#72】

文章目录 【可更换其他算法&#xff0c;获取资源请见文章第5节&#xff1a;资源获取】1. 基础灰狼算法2. 三维覆盖模型3. 部分代码展示4. 仿真结果展示5. 资源获取 【可更换其他算法&#xff0c;获取资源请见文章第5节&#xff1a;资源获取】 1. 基础灰狼算法 比较常见&#x…

硬件-1、体系架构

cpu 处理器 arm处理器的七种工作模式 arm寄存器 两张图是一样的&#xff0c;r0---r12是通用寄存器。其他寄存器可参考图一&#xff0c;cpu架构。 程序状态寄存器psr&#xff08;cpsr/spsr&#xff09; 程序异常处理 理解示例 当使用swi&#xff08;软中断指令&#xff09;指令…

Android仿高德首页三段式滑动

最近发现很多app都使用了三段式滑动&#xff0c;比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式&#xff0c;谷歌其实给了我们很好的2段式滑动&#xff0c;就是BottomSheet&#xff0c;所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果。…

010_documentation_in_Matlab中的帮助与文档

Matlab中的帮助与文档 1. 前言 一眨眼已经写了十篇文章。 000在Matlab中使用Python包CoolProp001Matlab运行时间测试与时间复杂度分析002避免使用for循环003Matlab中的向量约定004Matlab中的矩阵约定005Matlab中的数组索引006Matlab中的逻辑数组索引007Matlab学习的启动与加…

研发图纸管理软件,研发图纸管理软件解决方案

研发图纸管理软件行业的排名因市场变化和技术发展而不断变化&#xff0c;因此很难给出一个确切的排名。不过&#xff0c;以下是一些在研发图纸管理软件领域具有较高知名度和影响力的品牌&#xff0c;它们提供了丰富的功能和解决方案&#xff0c;帮助企业更好地管理和利用研发图…

uniapp创建opendb-city-china Schema文件后,如何导入城市的数据?

1.点击opendb-city-china后面的详情&#xff0c;进入到gitee代码仓库 2.下载如下图所示的data.json文件 3.将本地创建的opendb-city-china.schema.json上传到云端 4.点击导入json 如果直接将data.json导入会报错&#xff0c;如下图所示: 5.将data.json本来的数组对象&#…

游戏引擎架构01__引擎架构图

根据游戏引擎架构预设的引擎架构来构建运行时引擎架构 ​

idea端口占用

报错&#xff1a;Verify the connector‘s configuration, identify and stop any process that‘s listening on port XXXX 翻译&#xff1a; 原因&#xff1a; 解决&#xff1a; 一、重启大法 二、手动关闭 启动spring项目是控制台报错&#xff0c;详细信息如下&#xff…