JavaScript实现串行请求的示例代码


Posted in Javascript onSeptember 14, 2020

使用async和await

var fn = async function(promiseArr) {
 for(let i = 0,len = arr.length; i<len; i++) {
  currentPromise = (promiseArr[i] instanceOf Promise) ? promiseArr[i] : Promise.resolve(promiseArr[i]);
  var result = await currentPromise;
  console.log(result)
 }
 }
 fn(arr)

Promise实现

依照 promises 规范,一旦一个 promise 被创建,它就被执行了。如果then方法里返回的是一个promise对象,那么执行下一个then 的时候必定是在上一个then执行完之后执行。

关键点在于then的时候再创建

var createPromise = function(time) {
 return (resolve, reject)=> {
  return new Promise((resolve, reject)=>{
   setTimeout(()=>{
    console.log('timein'+time)
    resolve();
   }, time*1000)
  })
 }
}

function serpromise(arr) {
 arr.reduce((pre, next, index, carr)=>{
  return pre.then(next)
 }, Promise.resolve())
}

var arr=[createPromise(2),createPromise(1),createPromise(3),createPromise(4),createPromise(5)];
// 相当于
// Promise.resolve().then(createPromise(2)).then(createPromise(1))......
serpromise(arr)

Array.prototype.reduce + async/await 版本

const reduceAsync = ( arr ) => {
 arr.reduce( async ( prev, curr ) => {
  const { rep } = await prev;
  const obj = await promise( curr, rep );
  console.log( obj );
  return obj;
 }, Promise.resolve( {} ) );
};

Array.prototype.reduce + Promise 版本

const reducePromise = ( arr ) => {
 arr.reduce( ( prev, curr ) => {
  return prev.then( data => {
   return new Promise( ( resolve, reject ) => {
    promise( curr, data.rep ).then( res => {
     console.log( res );
     resolve( res );
    } );
   } );
  } );
 }, Promise.resolve( {} ) );
};

# 执行结果
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }
{ req: 'PM:04:49:17', rep: 'PM:04:49:20', item: 4 }

Array.prototype.map + Promise 版本

const mapPromise = ( arr ) => {
 let temporary = Promise.resolve( {} );
 arr.map( ( item, index ) => {
  temporary = temporary.then( ( data ) => {
   if (i !== 0) {
    // 第一个初始promise
    console.log( data );
   }
   return promise( item, data.rep );
  } );
 } );
 // 最后一个promise
 temporary.then( data => console.log( data ) );
};

用 map 遍历时,需要过滤初始promise的返回值,并且在遍历结束后,需手动执行最后以后一个promise,否则就会变成如下结果

# 执行结果
{}
{ req: 'PM:04:49:08', rep: 'PM:04:49:11', item: 1 }
{ req: 'PM:04:49:11', rep: 'PM:04:49:14', item: 2 }
{ req: 'PM:04:49:14', rep: 'PM:04:49:17', item: 3 }

以上结果明显不是我们所需要的,但是需要手动过滤第一个promise和执行最后一个promise,会增项不必要的代码量和出错率 后将 mapPromise 修改如下,其原理和Array.prototype.reduce+Promise版本类似

const mapPromise = ( arr ) => {
 let temporary = Promise.resolve( {} );
 arr.map( ( item, index ) => {
  temporary = temporary.then( ( data ) => {
   // if (i !== 0) {
   //  // 第一个promise
   //  console.log( data );
   // }
   return new Promise( ( resolve, reject ) => {
    promise( item, data.rep ).then( data => {
     console.log( data );
     resolve( data );
    } );
   } );
  } );
 } );
 // 最后一个promise
 // temporary.then( d => console.log( d ) );
};

其他

Array.prototype.forEach、Array.prototype.filter、Array.prototype.some、Array.prototype.every等方法和Array.prototype.map类似,就不过多赘述

以上就是JavaScript实现串行请求的示例代码的详细内容,更多关于JavaScript实现串行请求的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
Javascript下判断是否为闰年的Datetime包
Oct 26 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
Jul 16 Javascript
js获取系统的根路径实现介绍
Sep 08 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
js控制文本框只输入数字和小数点的方法
Mar 10 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
AngularJS双向绑定和依赖反转实例详解
Apr 15 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
JS实现图片旋转动画效果封装与使用示例
Jul 09 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
ES6知识点整理之模块化的应用详解
Apr 15 Javascript
layui文件上传控件带更改后数据传值的方法
Sep 23 Javascript
浅谈JavaScript 声明提升
Sep 14 #Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 #Javascript
详解JavaScript 高阶函数
Sep 14 #Javascript
vue实现简单计算商品价格
Sep 14 #Javascript
Vue中添加滚动事件设置的方法详解
Sep 14 #Javascript
JavaScript位置参数实现原理及过程解析
Sep 14 #Javascript
swiper自定义分页器的样式
Sep 14 #Javascript
You might like
PHP语法速查表
2007/01/02 PHP
php下使用SMTP发邮件的代码
2008/01/10 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
PHP通过bypass disable functions执行系统命令的方法汇总
2018/05/02 PHP
top.location.href 没有权限 解决方法
2008/08/05 Javascript
JS实现从顶部下拉显示的带动画QQ客服特效代码
2015/10/24 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
AngularJS使用带属性值的ng-app指令实现自定义模块自动加载的方法
2017/01/04 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
2017/03/23 jQuery
vue bootstrap小例子一枚
2017/06/09 Javascript
浅谈js中的this问题
2017/08/31 Javascript
微信小程序 子级页面返回父级并把子级参数带回父级实现方法
2019/08/22 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python利用拉链法实现字典方法示例
2017/03/25 Python
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
python plotly绘制直方图实例详解
2019/07/22 Python
python多线程与多进程及其区别详解
2019/08/08 Python
Python Collatz序列实现过程解析
2019/10/12 Python
浅析pandas 数据结构中的DataFrame
2019/10/12 Python
python 实现视频 图像帧提取
2019/12/10 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
应届生会计电算化求职信
2013/10/03 职场文书
职称自我鉴定
2013/10/15 职场文书
医学生求职自荐信
2013/10/25 职场文书
高三英语复习计划
2015/01/19 职场文书
2016见义勇为事迹材料汇总
2016/03/01 职场文书
MySQL性能压力基准测试工具sysbench的使用简介
2021/04/21 MySQL
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
基于MySql验证的vsftpd虚拟用户
2021/11/07 MySQL
python对文档中元素删除,替换操作
2022/04/02 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS