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中实现暂停的几篇文章
Mar 04 Javascript
Javascript中的isNaN函数使用说明
Nov 10 Javascript
window.showModalDialog参数传递中含有特殊字符的处理方法
Jun 06 Javascript
jquery获得keycode的示例代码
Dec 30 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
react-redux中connect()方法详细解析
May 27 Javascript
Node.Js中实现端口重用原理详解
May 03 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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
DC漫画《蝙蝠侠和猫女》图透 猫女怀孕老爷当爹
2020/04/09 欧美动漫
PHP 和 XML: 使用expat函数(二)
2006/10/09 PHP
php下连接mssql2005的代码
2011/01/17 PHP
PHP中替换换行符的几种方法小结
2012/10/15 PHP
php 判断IP为有效IP地址的方法
2018/01/28 PHP
phpcmsv9.0任意文件上传漏洞解析
2020/10/20 PHP
Javascript倒计时代码
2010/08/12 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
js读写json文件实例代码
2014/10/21 Javascript
JQuery控制Radio选中方法分析
2015/05/29 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
JavaScript运动框架 多物体任意值运动(三)
2017/05/17 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
ES6 Array常用扩展的应用实例分析
2019/06/26 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
浅谈python 中类属性共享的问题
2019/07/02 Python
在Pytorch中使用样本权重(sample_weight)的正确方法
2019/08/17 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
加拿大当代时尚服饰、配饰和鞋类专业零售商和制造商:LE CHÂTEAU
2017/10/06 全球购物
物流经理自我评价
2013/09/23 职场文书
2014迎新年晚会策划方案
2014/02/23 职场文书
党员志愿者活动总结
2014/06/26 职场文书
学校通报表扬范文
2015/05/04 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Django debug为True时,css加载失败的解决方案
2021/04/24 Python
简述Java中throw-throws异常抛出
2021/08/07 Java/Android
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers
DE1103使用报告
2022/04/05 无线电
zabbix 代理服务器的部署与 zabbix-snmp 监控问题
2022/07/15 Servers