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

 更新时间:2020年09月14日 09:35:29   作者:一只菜鸟攻城狮啊  
这篇文章主要介绍了JavaScript实现串行请求的示例代码,帮助大家更好的理解和使用JavaScript,感兴趣的朋友可以了解下

使用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实现串行请求的资料请关注脚本之家其它相关文章!

相关文章

  • 微信小程序日程预约功能实现

    微信小程序日程预约功能实现

    本文介绍了如何使用微信小程序开发一个日程预约系统,该系统包括顶部日期选择器、中部的canvas绘制区和底部的数据回显区,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2025-02-02
  • 在服务端(Page.Write)调用自定义的JS方法详解

    在服务端(Page.Write)调用自定义的JS方法详解

    自从[javascript]自定义MessageBox一文发布以后,很多网友都来信询问,如何在服务端调用ShowInfo方法,周末休息想了个折中的办法来实现
    2013-08-08
  • JavaScript去除空格的几种方法

    JavaScript去除空格的几种方法

    JavaScript去除空格的几种方法...
    2006-10-10
  • js实现数组去重方法及效率對比

    js实现数组去重方法及效率對比

    本文主要介绍了js实现数组去重方法及效率對比。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • BootStrap中的模态框(modal,弹出层)功能示例代码

    BootStrap中的模态框(modal,弹出层)功能示例代码

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集。这篇文章主要介绍了BootStrap中的模态框(modal,弹出层),需要的朋友可以参考下
    2018-11-11
  • JavaScript正则表达式匹配 div  style标签

    JavaScript正则表达式匹配 div style标签

    这篇文章主要介绍了JavaScript正则表达式匹配<div><style>标签 的相关资料,需要的朋友可以参考下
    2016-03-03
  • JavaScript如何一次性展示几万条数据

    JavaScript如何一次性展示几万条数据

    本文主要介绍了JavaScript一次性展示几万条数据的实现方法。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • 微信小程序实现Timeline时间线效果

    微信小程序实现Timeline时间线效果

    这篇文章主要为大家详细介绍了微信小程序实现Timeline时间线效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-05-05
  • 批量下载对路网图片并生成html的实现方法

    批量下载对路网图片并生成html的实现方法

    下面小编就为大家带来一篇批量下载对路网图片并生成html的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考
    2016-06-06
  • JavaScript提高加载和执行效率的方法

    JavaScript提高加载和执行效率的方法

    JavaScript在浏览器中的性能成为开发者所面临的最重要的可用性问题。而这个问题又因JavaScript的阻塞特性变的复杂,也就是说当浏览器在执行JavaScript代码时,不能同时做其他任何事情。本文详细介绍了如何正确的加载和执行JavaScript代码,从而提高其在浏览器中的性能。
    2017-02-02

最新评论