详解如何构建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 相关文章推荐
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
Jun 16 Javascript
JavaScript中判断整字类型最简洁的实现方法
Nov 08 Javascript
JavaScript获取文本框内选中文本的方法
Feb 20 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
JS上传组件FileUpload自定义模板的使用方法
May 10 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
JS实现图片预览的两种方式
Jun 27 Javascript
js自定义弹框插件的封装
Aug 24 Javascript
Vue渲染过程浅析
Mar 14 Javascript
详解JavaScript执行模型
Nov 16 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 读取shell管道传输过来的内容
2010/03/01 PHP
PHP中的integer类型使用分析
2010/07/27 PHP
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
php实现文件下载(支持中文文名)
2013/12/04 PHP
php中strtotime函数用法详解
2014/11/15 PHP
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
Javascript倒计时页面跳转实例小结
2013/09/11 Javascript
js单词形式的运算符
2014/05/06 Javascript
原生js的弹出层且其内的窗口居中
2014/05/14 Javascript
分享9个最好用的JavaScript开发工具和代码编辑器
2015/03/24 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
js实现彩色条纹滚动条效果
2017/03/15 Javascript
nodejs个人博客开发第三步 载入页面
2017/04/12 NodeJs
JavaScript适配器模式详解
2017/10/19 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
js实现车辆管理系统
2020/08/26 Javascript
js获取图片的base64编码并压缩
2020/12/05 Javascript
[03:08]Ti4观战指南上
2014/07/07 DOTA
Python常用模块介绍
2014/11/21 Python
Python 对象中的数据类型
2017/05/13 Python
python脚本作为Windows服务启动代码详解
2018/02/11 Python
Python实现多线程的两种方式分析
2018/08/29 Python
python正则表达式实例代码
2020/03/03 Python
蜜蜂引路教学反思
2014/02/04 职场文书
公司外出活动方案
2014/08/14 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
给校长的一封检讨书
2014/09/20 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
上课说话检讨书
2015/01/27 职场文书
分析mysql中一条SQL查询语句是如何执行的
2021/06/21 MySQL