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 相关文章推荐
通过event对象的fromElement属性解决热区设置主实体的一个bug
Dec 22 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
js特殊字符过滤的示例代码
Mar 05 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
Feb 23 Javascript
新手vue构建单页面应用实例代码
Sep 18 Javascript
element-ui table span-method(行合并)的实现代码
Dec 20 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 28 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语法速查表
2006/12/06 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
php中Session的生成机制、回收机制和存储机制探究
2014/08/19 PHP
PHP使用feof()函数读文件的方法
2014/11/07 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
php实现将数据做成json的格式给前端使用
2018/08/21 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
JQuery实现自定义对话框的代码
2008/06/15 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
javascript通过class来获取元素实现代码
2013/02/20 Javascript
js propertychange和oninput事件
2014/09/28 Javascript
AngularJS延迟加载html template
2016/07/27 Javascript
原生js实现焦点轮播图效果
2017/01/12 Javascript
Vue项目组件化工程开发实践方案
2018/01/09 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
webpack-mvc 传统多页面组件化开发详解
2019/05/07 Javascript
pageGroup.js实现分页功能
2019/07/27 Javascript
js实现滑动滑块验证登录
2020/07/24 Javascript
python实现爬虫统计学校BBS男女比例(一)
2015/12/31 Python
python中的编码知识整理汇总
2016/01/26 Python
Python正则捕获操作示例
2017/08/19 Python
使用Python读取大文件的方法
2018/02/11 Python
网易有道2017内推编程题 洗牌(python)
2019/06/19 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
Pandas中DataFrame交换列顺序的方法实现
2020/12/14 Python
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
数控专业应届生求职信
2013/11/27 职场文书
爱情保证书范文
2014/02/01 职场文书
销售人员自我评价
2014/02/01 职场文书
机关干部作风建设剖析材料
2014/10/23 职场文书
升学宴学生答谢词
2015/01/05 职场文书
幼儿园辞职信范文
2015/02/27 职场文书
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Nginx实现会话保持的两种方式
2022/03/18 Servers