详解如何构建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 动态添加表格行
Jun 22 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
Jan 04 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
jquery实现带缩略图的可定制高度画廊效果(5种)
Aug 28 Javascript
详解JavaScript对象序列化
Jan 19 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
js 自带的sort() 方法全面了解
Aug 16 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
Nov 05 Javascript
JavaScript组合模式---引入案例分析
May 23 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数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
php实现商城购物车的思路和源码分析
2020/07/23 PHP
一个JavaScript继承的实现
2006/10/24 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
当前页禁止复制粘贴截屏代码小集
2013/07/24 Javascript
浅析node.js中close事件
2014/11/26 Javascript
JavaScript中的包装对象介绍
2015/01/27 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
js编写选项卡效果
2017/05/23 Javascript
vue.js框架实现表单排序和分页效果
2017/08/09 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
2019/03/06 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
layui监听下拉选框选中值变化的方法(包含监听普通下拉选框)
2019/09/24 Javascript
vue vant Area组件使用详解
2019/12/09 Javascript
[36:16]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.19
2020/12/24 DOTA
python自动化测试之setUp与tearDown实例
2014/09/28 Python
python删除列表中重复记录的方法
2015/04/28 Python
python 通过xml获取测试节点和属性的实例
2018/03/31 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
python一键去抖音视频水印工具
2018/09/14 Python
python 画三维图像 曲面图和散点图的示例
2018/12/29 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
Django用户认证系统 Web请求中的认证解析
2019/08/02 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
在django中自定义字段Field详解
2019/12/03 Python
Python+Kepler.gl实现时间轮播地图过程解析
2020/07/20 Python
Kappa英国官方在线商店:服装和运动器材
2020/11/22 全球购物
自荐信格式范文
2013/10/07 职场文书
草船借箭教学反思
2014/02/03 职场文书
2014小学数学教师个人工作总结
2014/12/18 职场文书
Python list列表删除元素的4种方法
2021/11/01 Python