详解如何构建Promise队列实现异步函数顺序执行


Posted in Javascript onOctober 23, 2018

场景

有a、b、c三个异步任务,要求必须先执行a,再执行b,最后执行c

且下一次任务必须要拿到上一次任务执行的结果,才能做操作

思路

我们需要实现一个队列,将这些异步函数添加进队列并且管理它们的执行,队列具有First In First Out的特性,也就是先添加进去的会被先执行,接着才会执行下一个(注意跟栈作区别)

大家也可以类比一下jQuery的animate方法,添加多个动画也会按顺序执行

解决

模拟3个异步函数

// 异步函数a
var a = function () {
 return new Promise(function (resolve, reject) {
  setTimeout(function () {
   resolve('a')
  }, 1000)
 })
}

// 异步函数b
var b = function (data) {
 return new Promise(function (resolve, reject) {
  resolve(data + 'b')
 })
}

// 异步函数c
var c = function (data) {
 return new Promise(function (resolve, reject) {
  setTimeout(function () {
   resolve(data + 'c')
  }, 500)
 })
}

解决方法一(使用then链式操作)

特点:可以满足需求,但是书写比较繁琐

代码

//链式调用
a()
 .then(function (data) {
  return b(data)
 })
 .then(function (data) {
  return c(data)
 })
 .then(function (data) {
  console.log(data)// abc
 })

方法二(构建队列)

特点:封装方法,可移植到别处使用

代码

// 构建队列
function queue(arr) {
 var sequence = Promise.resolve()
 arr.forEach(function (item) {
  sequence = sequence.then(item)
 })
 return sequence
}

// 执行队列
queue([a, b, c])
 .then(data => {
  console.log(data)// abc
 })

方法三(使用async、await构建队列)

同方法二,只是显得更高大上点

代码

async function queue(arr) {
 let res = null
 for (let promise of arr) {
  res = await promise(res)
 }
 return await res
}
queue([a, b, c])
 .then(data => {
  console.log(data)// abc
 })

顺便说一句,bluebird的Promise.reduce也可以用来顺序执行函数,但是可使用的场景非常有限,一般用来读取文件信息,而以上给出的方法,不管你在异步函数中做了什么,只要函数最后返回了一个Promise对象,都可以使用

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
YUI 读码日记之 YAHOO.util.Dom - Part.1
Mar 22 Javascript
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
select 控制网页内容隐藏于显示的实现代码
May 25 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
js采用concat和sort将N个数组拼接起来的方法
Jan 21 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Node批量爬取头条视频并保存方法
Sep 20 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
了解javascript中let和var及const关键字的区别
May 24 Javascript
简述vue-cli中chainWebpack的使用方法
Jul 30 Javascript
jquery实现动态添加附件功能
Oct 23 #jQuery
Vue创建头部组件示例代码详解
Oct 23 #Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
Oct 22 #Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 #Javascript
jQuery.validate.js表单验证插件的使用代码详解
Oct 22 #jQuery
React SSR样式及SEO的实践
Oct 22 #Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 #Javascript
You might like
如何获得PHP相关资料
2006/10/09 PHP
php中用文本文件做数据库的实现方法
2008/03/27 PHP
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
PHP文件操作方法汇总
2015/07/01 PHP
PHP文件管理之实现网盘及压缩包的功能操作
2017/09/20 PHP
基于laravel缓冲cache的用法详解
2019/10/23 PHP
Jquery Ajax的Get方式时需要注意URL地方
2011/04/07 Javascript
通过JavaScript控制字体大小的代码
2011/10/04 Javascript
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
JavaScript初学者应注意的七个细节详细介绍
2012/12/27 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
2013/04/19 Javascript
javascript event在FF和IE的兼容传参心得(绝对好用)
2014/07/10 Javascript
js函数内变量的作用域分析
2015/01/12 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
vue安装遇到的5个报错及解决方法
2019/06/12 Javascript
使用python解析xml成对应的html示例分享
2014/04/02 Python
python中redis的安装和使用
2016/12/04 Python
Tensorflow之构建自己的图片数据集TFrecords的方法
2018/02/07 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
django 扩展user用户字段inlines方式
2020/03/30 Python
使用Pycharm分段执行代码
2020/04/15 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
世界各地的当地人的食物体验:Eatwith
2019/07/26 全球购物
知识改变命运演讲稿
2014/05/21 职场文书
小学生迎国庆演讲稿
2014/09/05 职场文书
学习优秀共产党员先进事迹思想报告
2014/09/17 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
2015年组织委员工作总结
2015/04/23 职场文书
会计试用期工作总结2015
2015/05/28 职场文书