使用Promise链式调用解决多个异步回调的问题


Posted in Javascript onJanuary 15, 2017

介绍

所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

缺少场景支撑,对于新手而言,很难理解Promise的意义。

在《你不知道的JavaScript中》有个场景介绍得很形象:

我走到快餐店的柜台,点了一个芝士汉堡。我交给收银员1.47美元。通过下订单并付款,我已经发出了一个对某个值(就是那个汉堡)的请求。我已经启 动了一次交易。

但是,通常我不能马上就得到这个汉堡。收银员会交给我某个东西来代替汉堡:一张带有 订单号的收据。订单号就是一个 IOU(I owe you, 我欠你的)承诺(promise),保证了最 终我会得到我的汉堡。

所以我得好好保留我的收据和订单号。我知道这代表了我未来的汉堡,所以不需要担心, 只是现在我还是很饿!

在等待的过程中,我可以做点其他的事情,比如给朋友发个短信:“嗨,要来和我一起吃 午饭吗?我正要吃芝士汉堡。”

我已经在想着未来的芝士汉堡了, 尽管现在我还没有拿到手。 我的大脑之所以可以这么 做,是因为它已经把订单号当作芝士汉堡的占位符了。从本质上讲,这个占位符使得这个 值不再依赖时间。这是一个未来值。

终于, 我听到服务员在喊“订单 113” , 然后愉快地拿着收据走到柜台, 把收据交给收银 员,换来了我的芝士汉堡。

换句话说, 一旦我需要的值准备好了, 我就用我的承诺值(value-promise)换取这个值 本身。

但是,还可能有另一种结果。他们叫到了我的订单号,但当我过去拿芝士汉堡的时候,收 银员满是歉意地告诉我:“不好意思,芝士汉堡卖完了。”除了作为顾客对这种情况感到愤 怒之外,我们还可以看到未来值的一个重要特性:它可能成功,也可能失败。

每次点芝士汉堡,我都知道最终要么得到一个芝士汉堡,要么得到一个汉堡包售罄的坏消息,那我就得找点别的当午饭了。

所以Promise的出现其实是作为异步编程的一种解决方案。比传统的解决方案-回调函数和事件-更加合理、强大。

Promise的基本用法

var p1 = new Promise((resolve, reject) => {
 setTimeout(resolve, 1000, 'done');
 })
p1.then(data=>{
 console.log(data); // done
})

Promise一个明显的好处便是可以用来解决回调地狱。特别是在处理多个回调相互依赖的情况。

使用Promise解决多个异步依赖调用

Promise提供了一个方法Promise.all([p1,p2,p3]) ,用于将多个Promise实例,包装成一个新的Promise实例。接收的参数是一个数组,p1、p2、p3都是Promise对象。

此时Promise.all的状态取决于它的参数。

分两种情况:

  • p1、p2、p3的状态都是resolve的时候,Promise.all的状态才会变成resolve;
  • 只要p1、p2、p3中有一个的状态为reject,那么Promise.all的状态就会变成reject;

所以我们可以用Promise.all()来解决多个异步依赖调用。

比如我们平常经常遇到的一种情况:

网站中需要先获取用户名,然后再根据用户名去获取用户信息。这里获取用户名getUserName()和获取用户信息getUser()都是调用接口的异步请求。在获取用户信息之前,需要先获得用户名。也就是说getUser依赖于getUserName的状态。所以我们可以将这两个请求通过Promise.all()封装成一个新的Promise对象。

function getUserPromise(promiseX, promiseY){
 return Promise.all([promiseX, promiseY])
 .then(values =>
 // 返回的values由 promiseX 与 promiseY返回的值所构成的数组。
  values
 )
}
function getUserName(){
 let data = 'superman';
 return new Promise((resolve, reject) => {
  setTimeout(resolve(data), 1000);
 })
}
function getUser(){
 let data = {
 id:1,
 username: 'superman',
 gender: 'male'
 }
 return new Promise((resolve, reject) => {
 setTimeout(resolve(data), 2000);
 })
}
getUserPromise(getUserName(), getUser())
.then(data => {
 // 这里的data就是包含了getUserName 和 getUser返回值所组成的数组
 console.log(data); // [ 'superman', { id: 1, username: 'superman', gender: 'male' } ]
 })

使用Promise的链式调用

function getUserName(){
 let data = 'superman';
 return new Promise((resolve, reject) => {
 setTimeout(resolve(data), 4000);
 })
}
function getUser(username){
 let data = {
 id:1,
 username: 'superman',
 gender: 'male'
 }
 return new Promise((resolve, reject) => {
 if(username){
  setTimeout(resolve(data), 2000);
 }
 else{
  reject('err');
 }
 })
}
getUserName().then(username => {
 return getUser();
})
.then(user => {
 console.log(user);
})
.catch(err => {
 console.log(err);
})

有了Promise的链式调用,再也不同担心回调地狱的问题了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScript函数、方法、对象代码
Oct 29 Javascript
检测是否已安装 .NET Framework 3.5的js脚本
Feb 14 Javascript
利用javascript实现web页面中指定区域打印
Oct 30 Javascript
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
Js数组排序函数sort()介绍
Jun 08 Javascript
Javascript编写俄罗斯方块思路及实例
Jul 07 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
JavaScript实现五子棋游戏的方法详解
Jul 08 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
Jun 22 Javascript
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
js实现密码强度检验
Jan 15 #Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
JS轮播图中缓动函数的封装
Nov 25 #Javascript
JavaScript字符串对象
Jan 14 #Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 #Javascript
You might like
骨王战斗力在公会成员中排不进前五,却当选了会长,原因竟是这样
2020/03/02 日漫
PHP 替换模板变量实现步骤
2009/08/24 PHP
解析crontab php自动运行的方法
2013/06/24 PHP
PHP实用函数分享之去除多余的0
2015/02/06 PHP
Yii2增加验证码步骤详解
2016/04/25 PHP
PHP 实现人民币小写转换成大写的方法及大小写转换函数
2017/11/17 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
nodejs win7下安装方法
2012/05/24 NodeJs
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
JS实现转动随机数抽奖特效代码
2020/04/16 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
微信小程序url传参写变量的方法
2018/08/09 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
在Uni中使用Vue的EventBus总线机制操作
2020/07/31 Javascript
微信小程序获取当前时间及星期几的实例代码
2020/09/20 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
python发送伪造的arp请求
2014/01/09 Python
使用rst2pdf实现将sphinx生成PDF
2016/06/07 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
查看python下OpenCV版本的方法
2018/08/03 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
记一次pyinstaller打包pygame项目为exe的过程(带图片)
2020/03/02 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
法国隐形眼镜网站:VisionDirect.fr
2020/03/03 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
如何清空Session
2015/02/23 面试题
临床医学专业学生的自我评价分享
2013/11/21 职场文书
舞蹈毕业生的自我评价
2014/03/05 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
党的群众路线教育实践活动心得体会(企业)
2014/11/03 职场文书
介绍信怎么写
2015/01/30 职场文书
Golang二维数组的使用方式
2021/05/28 Golang
vue3获取当前路由地址
2022/02/18 Vue.js