用Promise实现前端并发请求

news2024/9/28 14:50:20
/**
* 构造假请求
*/
async function request(url) {
  return new Promise((resolve) => {
    setTimeout(
      () => {
        resolve(url);
      },
      // Math.random() * 500 + 800,
      1000,
    );
  });
}

请求一次,查看耗时,预计应该是1s:

async function requestOnce() {
  const t1 = Date.now();
  const res = await request(1);
  console.log('一次请求耗时=', Date.now() - t1, 'ms,请求结果=', res);
}
requestOnce();

结果:在这里插入图片描述

12个数据发起并行请求,预计耗时1s:

async function requestAsync() {
  const t2 = Date.now();
  const requests = new Array(12).fill(2).map(request);
  const res2 = await Promise.all(requests);
  console.log('批量请求耗时=', Date.now() - t2, 'ms,请求结果=', res2, ',预计是 1000 ms');
}

requestAsync();

结果:
在这里插入图片描述

12个请求并发进行,但限制最多3个请求可并发,预计耗时4s:

async function concurrencyRequest(urls, maxNum) {
  const buffer = [];//并发请求池,最多有maxNum个
  const t3 = Date.now();
  const res = [];
  for (let i = 0; i < urls.length && buffer.length < maxNum; ++i) {
    // console.log('next=', i);
    const promise = new Promise((resolve) => request(urls[i]).then(resolve));
    buffer.push(promise);
    promise
      .then((response) => (res[i] = response))
      .finally(() => {//每个请求完成后都从buffer中删除并保存响应
        const index = buffer.findIndex((item) => item === promise);
        buffer.splice(index, 1);
        // console.log('删除一个promise', buffer.length);
      });
    if (buffer.length === maxNum) {//必须等待buffer size小于maxNum才能继续请求
      await Promise.race(buffer);
    }
  }
  await Promise.all(buffer);//需要等待最后剩下的几个请求完成才算完成
  console.log('并发请求耗时=', Date.now() - t3, '请求结果=', res, '预计时间是 4000 ms');
}

concurrencyRequest(
  new Array(12).fill(1).map((_, i) => i + 1),
  3,
);

在这里插入图片描述

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

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

相关文章

vue 项目打包更新后,界面未刷新时js与css资源加载404,监听资源文件404后自动重新加载页面。

问题 vue 项目打包更新&#xff08;生成环境&#xff09;后&#xff0c;界面未刷新时js与css资源加载404&#xff0c;如图&#xff1a; 期望 希望可以监听到资源文件加载404时&#xff0c;刷新界面&#xff0c;解决打包后由于文件名的变化导致点击旧页面时 JS 和 CSS 文件出…

Spring MVC常用注解(绝对经典)

文章目录 一、元注解1.1 Target&#xff1a;1.2 Retention&#xff1a; 二、常见注解2.1 Controller&#xff1a;2.2 SpringBootApplication&#xff1a;2.3 RequestMapping&#xff1a;2.4 RequestParam&#xff1a;2.5 PathVariable&#xff1a;2.6 RequestPart&#xff1a;2…

OpenCV 形态学相关函数详解及用法示例

OpenCV形态学相关的运算包含腐蚀(MORPH_ERODE)&#xff0c;膨胀(MORPH_DILATE)&#xff0c;开运算(MORPH_OPEN)&#xff0c;闭运算(MORPH_CLOSE)&#xff0c;梯度运算(MORPH_GRADIENT)&#xff0c;顶帽运算(MORPH_TOPHAT)&#xff0c;黑帽运算(MORPH_BLACKHAT)&#xff0c;击中…

『网络游戏』GoLand服务器框架【01】

打开GoLand创建项目 编写Go程序&#xff1a;main.go package mainimport ("fmt""newgame/game/gate""os""os/signal""syscall""time" )var (SinChan make(chan os.Signal, 1)closeChan chan struct{} )func ma…

【JavaEE】——线程池大总结

阿华代码&#xff0c;不是逆风&#xff0c;就是我疯&#xff0c; 你们的点赞收藏是我前进最大的动力&#xff01;&#xff01;希望本文内容能够帮助到你&#xff01; 目录 引入&#xff1a;问题引入 一&#xff1a;解决方案 1&#xff1a;方案一——协程/纤程 &#xff08;1…

SwiftUI简明概念(3):Path.addArc的clockwise方向问题

一、画个下半圆 SwiftUI中绘制下半圆的一个方法是使用Path.addArc&#xff0c;示例代码如下&#xff1a; var body: some View {Path { path inpath.addArc(center: CGPoint(x: 200, y: 370), radius: 50, startAngle: Angle(degrees: 0), endAngle: Angle(degrees: 180.0), …

谷歌发布Imagen 3,超过SD3、DALL・E-3,谷歌发布新RL方法,性能提升巨大,o1模型已证明

谷歌发布Imagen 3&#xff0c;超过SD3、DALL・E-3&#xff0c;谷歌发布新RL方法&#xff0c;性能提升巨大&#xff0c;o1模型已证明。 谷歌DeepMind发布了全新文生图模型Imagen 3&#xff0c;在文本语义还原、色彩搭配、文本嵌入、图像细节、光影效果等方面相比第二代大幅度提升…

2024新版IDEA创建JSP项目

1. 创建项目 依次点击file->new->Project 配置如下信息并点击create创建项目 2. 配置Web项目 点击file->Project Structure 在点击Project Settings->Module右键右边模块名称->ADD->Web 点击Create Artifact 出现如下界面就表示配置完毕&#xff0c;…

3.整数二分

模板 package base;public class Bsearch {public int binary_search1(int l, int r){while (l<r){int mid (lr1)>>1;if(check(mid)) lmid;else r mid-1;}return l;}public int binary_search2(int l, int r){while (l<r){int mid (lr)>>1;if (check(mid…

Python酷库之旅-第三方库Pandas(129)

目录 一、用法精讲 576、pandas.DataFrame.merge方法 576-1、语法 576-2、参数 576-3、功能 576-4、返回值 576-5、说明 576-6、用法 576-6-1、数据准备 576-6-2、代码示例 576-6-3、结果输出 577、pandas.DataFrame.update方法 577-1、语法 577-2、参数 577-3、…

实操了 AI 大模型项目落地, 程序员成功转变为 AI 大模型工程师

根据《2024 年全球人工智能行业报告》最新的数据显示&#xff0c;全球 AI 市场预计将以每年超过 40% 的速度增长&#xff0c;到 2030 年市值将达到数万亿美元&#xff0c;这也是预示着在接下来的十年到十五年里&#xff0c;人工智能将获得巨大的发展红利。 在过去的一年多时间…

如何配置flutter(超详细的哦)

目录 首先先去官网下载zip包 下载下来之后就是解压 配置环境变量 winr查看是否配置成功 解决报错 [!] Android toolchain - develop for Android devices (Android SDK version 35.0.0)X cmdline-tools component is missing Android license status unknown 首先先去官…

docker pull 超时的问题如何解决

docker不能使用&#xff0c;使用之前的阿里云镜像失败。。。 搜了各种解决方法&#xff0c;感谢B站UP主 <iframe src"//player.bilibili.com/player.html?isOutsidetrue&aid113173361331402&bvidBV1KstBeEEQR&cid25942297878&p1" scrolling"…

力扣 简单 111.二叉树的最小深度

文章目录 题目介绍题解 题目介绍 题解 最小深度&#xff1a;从根节点到最近叶子结点的最短路径上节点数量 class Solution {public int minDepth(TreeNode root) {if (root null) {return 0;}int left minDepth(root.left);int right minDepth(root.right);// 如果 node 没…

处理not in gzip format异常

1、为什么会触发这个异常&#xff1f; 当我们使用GZIPInputStream的read方法进行读取数据时&#xff0c;它会自动处理gzip格式的压缩数据&#xff0c;将它解析成原始的二进制数据。但是&#xff0c;如果你没有将原始数据进行gzip压缩后传入GZIPInputStream流&#xff0c;进行r…

JavaEE——多线程Thread 类及常见方法

目录 一、Thread(String name) 二、是否后台线程 isDeamon() 三、是否存活 isAlive() 四、run()方法和start()方法的区别 五、中断线程 法一&#xff1a; 法二&#xff1a; 六、线程等待join() 七、线程休眠sleep() 一、Thread(String name) 定义&#xff1a;这个东西…

免杀对抗—C++混淆算法shellcode上线回调编译执行

前言 上次讲了python混淆免杀&#xff0c;今天讲一下C混淆免杀。其实都大差不差的&#xff0c;也都是通过各种算法对shellcod进行混淆免杀&#xff0c;只不过是语言从python换成c了而已。 实验环境 测试环境依旧是360、火绒、WD还有VT。 shellcode上线 下面是最基本几个sh…

数据恢复篇:如何恢复几年前删除的照片

您是否曾经遇到过几年前删除了一张图片并觉得需要恢复旧照片的情况&#xff1f;虽然&#xff0c;没有确定的方法可以丢失或删除的照片。但是&#xff0c;借助奇客数据恢复等恢复工具&#xff0c;可以恢复多年前永久删除的照片、视频和音频文件。 注意 – 如果旧数据被覆盖&…

差速轮纯跟踪算法

fig.1 差速轮纯跟踪原理图 纯跟踪是基于几何关系的跟踪控制算法&#xff0c;不管是阿克曼模型&#xff0c;还是差速轮模型&#xff0c;都是控制机器驱动轮&#xff08;通常是后轮&#xff09;中心经过目标点 T。 基于机器驱动轮中心&#xff0c;车头朝向为 X 轴正方向&#xf…

ESP32 Bluedroid 篇(1)—— ibeacon 广播

前言 前面我们已经了解了 ESP32 的 BLE 整体架构&#xff0c;现在我们开始实际学习一下Bluedroid 从机篇的广播和扫描。本文将会以 ble_ibeacon demo 为例子进行讲解&#xff0c;需要注意的一点是。ibeacon 分为两个部分&#xff0c;一个是作为广播者&#xff0c;一个是作为观…