详解如何构建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 相关文章推荐
理解Javascript_05_原型继承原理
Oct 13 Javascript
纯js简单日历实现代码
Oct 05 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
javascript关于继承解析
May 10 Javascript
canvas时钟效果
Feb 16 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
使用Vue自定义指令实现Select组件
May 24 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 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代码(星期六,星期日总和)
2009/11/12 PHP
php实现批量下载百度云盘文件例子分享
2014/04/10 PHP
关于PHP内置的字符串处理函数详解
2017/02/04 PHP
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
单击某一段文字改写文本颜色
2014/06/06 Javascript
JSON字符串转JSON对象
2015/07/31 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
浅析JS动态创建元素【两种方法】
2016/04/20 Javascript
js实现显示手机号码效果
2017/03/09 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
2019/04/19 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
复习Python中的字符串知识点
2015/04/14 Python
Python实现控制台输入密码的方法
2015/05/29 Python
Python中的urllib模块使用详解
2015/07/07 Python
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
基于hashlib模块--加密(详解)
2017/06/21 Python
Python3 安装PyQt5及exe打包图文教程
2019/01/08 Python
用Python写一个模拟qq聊天小程序的代码实例
2019/03/06 Python
如何不用安装python就能在.NET里调用Python库
2019/07/12 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
python requests包的request()函数中的参数-params和data的区别介绍
2020/05/05 Python
Python中的wordcloud库安装问题及解决方法
2020/05/27 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
小蚁科技官方商店:YI Technology
2019/08/23 全球购物
智能家居、吸尘器、滑板车、电动自行车网上购物:Geekmaxi
2021/01/18 全球购物
文化宣传方案
2014/03/13 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
三问三解心得体会
2014/09/05 职场文书
违反交通法规检讨书
2014/09/10 职场文书
新学期红领巾广播稿
2014/10/04 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
pd.drop_duplicates删除重复行的方法实现
2022/06/16 Python