Promise + Async&Await + Array.reduce + 函数递归 解决网络/接口请求的依次/排队不间断间隔访问
背景
试想在一个需要频繁更新数据的场景(例如:监控、图表类),常规方法是设置一个间隔 N 秒的定时器 setInterval
;但是这种方式存在一个问题,当前一个请求时间过长时(超过了间隔时间),后一个请求的接口响应会先于前一个请求,也就是说,将导致旧的数据渲染会覆盖新的数据渲染。
解决方案
利用 Array.reduce
的迭代性,注册异步(Async)的匿名函数,在函数内部将网络请求封装成 Promise 实例,在整个迭代周期中等待(Await)前一个请求完成以后再请求后一个请求,完成一个请求周期以后递归调用自己,开启新的一轮一模一样的请求周期,模拟不间断的依次网络请求。
// 模拟网络请求
function simulateRequest () {
const time = 1000;
return new Promise(resolve => setTimeout(() => {
resolve();
console.log(`模拟请求花费 ${time}ms`);
}, time));
}
// 循环顺序请求
function cycleRequest () {
console.log('新的一轮开始请求');
// 一个请求周期,这边为了模拟方便长度为 10,实际情况可能是 10000 或 99999 这样的
const arr = new Array(10).fill(undefined);
arr.reduce(async (last, curr, index) => {
await last;
return simulateRequest()
.then(() => {
if (index + 1 === arr.length) {
// 完成一轮后重复
cycleRequest();
}
});
}, undefined);
}
// 启动
cycleRequest();
结果打印:
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
模拟请求花费 1000ms
新的一轮开始请求
模拟请求花费 1000ms
模拟请求花费 1000ms
...
版权声明
本博客所有的原创文章,作者皆保留版权。转载必须包含本声明,保持本文完整,并以超链接形式注明作者后除和本文原始地址:https://blog.mazey.net/2317.html
(完)
Promise + Async&Await + Array.reduce + 函数递归 解决网络/接口请求的依次/排队不间断间隔访问的更多相关文章
- vue使用技巧:Promise + async + await 解决组件间串行编程问题
业务场景描述 大家都通过互联网投递过简历,比如在智联.58.猎聘等平台.投递心仪的职位前一般都需要前提创建一份简历,简历编辑界面常规的布局最上面是用户的个人基本信息,如姓名.性别.年龄.名族等,接着是 ...
- Promise,async/await解决回调地狱
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行. 写一个async 函数 as ...
- promise async await使用
1.Promise (名字含义:promise为承诺,表示其他手段无法改变) Promise 对象代表一个异步操作,其不受外界影响,有三种状态: Pending(进行中.未完成的) Resolved( ...
- 一道题理解setTimeout,Promise,async/await以及宏任务与微任务
今天看到这样一道面试题: //请写出输出内容 async function async1() { console.log('async1 start'); await async2(); consol ...
- angular2 学习笔记 ( Rxjs, Promise, Async/Await 的区别 )
Promise 是 ES 6 Async/Await 是 ES 7 Rxjs 是一个 js 库 在使用 angular 时,你会经常看见这 3 个东西. 它们都和异步编程有关,有些情况下你会觉得用它们 ...
- 如何解决异步接口请求快慢不均导致的数据错误问题? - DevUI
DevUI 是一款面向企业中后台产品的开源前端解决方案,它倡导沉浸.灵活.至简的设计价值观,提倡设计者为真实的需求服务,为多数人的设计,拒绝哗众取宠.取悦眼球的设计.如果你正在开发 ToB 的工具类产 ...
- ES6 class setTimeout promise async/await 测试Demo
class Person { async getVersion () { return new Promise((resolve, reject) => { setTimeout(functio ...
- Promise async await的用法实例一枚
getlog2() { console.log("222"); }, getlog3() { return new Promise((resolve, reject) => ...
- 【promise| async/await】代码的控制力
什么样的代码好控制? 结构 + 节奏 --- 什么鬼? 如何控制节奏? 具体例子看看怎么控制节奏?
- iOS 信号量解决-网络异步请求的数据同步返回问题
有那么一个场景如下 +PayWithBlock:(NSString*(^)(NSString *message)) block; 如果 block 返回是同步的那是没有问题的,但是如果block 内容 ...
随机推荐
- 【LeetCode动态规划#17】知道秘密的人,维护多个dp数组
知道秘密的人数 在第 1 天,有一个人发现了一个秘密. 给你一个整数 delay ,表示每个人会在发现秘密后的 delay 天之后,每天 给一个新的人 分享 秘密.同时给你一个整数 forget ,表 ...
- 苹果工程师对iOS线程开发的那点事津津乐道
pthread,Thread总结 pthread: 通用的多线程API 使用方法 // 1. 创建线程: 定义一个pthread_t类型变量 pthread_t thread; // 2. 开启线程: ...
- 【Azure 应用服务】Azure Function 部署槽交换时,一不小心把预生产槽上的配置参数交换到生产槽上,引发生产错误
问题描述 部署Function代码先到预生产槽中,进行测试后通过交换方式,把预生产槽中的代码交换到生产槽上,因为在预生产槽中的设置参数值与生产槽有不同,但是在交换的时候,没有仔细检查.导致在交换的时候 ...
- 【Azure 应用服务】App Service"访问控制/流量监控"四问
问题描述 一问:App Service有那些访问限制的方式 二问:访问限制中,是否可以通过域名来进行限制,而不只是IP地址 三问:App Service如何查看到访问者(客户端)的IP地址,访问时间 ...
- Taurus.MVC WebMVC 入门开发教程6:路由配置与路由映射
前言: 在本篇 Taurus.MVC WebMVC 入门开发教程的第六篇文章中, 我们将讨论如何配置路由并映射到控制器和操作方法. 路由是决定应用程序如何响应客户端请求的重要组成部分,因此在 Web ...
- opencv库图像基础4绘图-python
opencv库图像基础4绘图-python 1.绘画线条和简单图形 创建颜色字典和一个画布 import cv2 import numpy as np import matplotlib.pyplot ...
- C++ String //string字符串查找和替换 比较 存取 修改单个字符 插入和删除 string字串
1 //string字符串查找和替换 比较 存取 修改单个字符 插入和删除 string字串 2 #include <iostream> 3 #include<string> ...
- [MAUI] 混合开发概念
混合开发的概念是相对与原生开发来说的:App不直接运行原生程序,而是在原生程序中运行一个Web程序,原生程序中包含Web运行时,用于承载Web页面.暂且将原生应用称之为Web容器,Web容器应该能 ...
- [更新/已解决] Nodejs 16.18.0 和 Nodejs 18.16.0 两个版本同时共存 nvm-desktop
[更新/已解决] https://github.com/1111mp/nvm-desktop/blob/main/README-zh_CN.md 软件名字叫 nvm-desktop 装完 window ...
- 单词本z custom cu = com 一起 都, st=suet 自己, om 尾缀, 都是自己身上的 = 习惯,习俗
单词本z custom cu = com 一起 都, st=suet 自己, om 尾缀, 都是自己身上的 = 习惯,习俗 custom 来自拉丁语 consuetus cu = com st = s ...