使用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实现禁止后退的方法
Dec 27 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
浅谈javascript中自定义模版
Jan 29 Javascript
JavaScript中setMonth()方法的使用详解
Jun 11 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
Sep 10 Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 Javascript
javascript实现动态时钟的启动和停止
Jul 29 Javascript
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
php&java(三)
2006/10/09 PHP
护卫神php套件 php版本升级方法(php5.5.24)
2015/05/10 PHP
PHP中配置IIS7实现基本身份验证的方法
2015/09/24 PHP
Yii2 中实现单点登录的方法
2018/03/09 PHP
js实现特定位取反原理及示例
2014/06/30 Javascript
js实现图片在未加载完成前显示加载中字样
2014/09/03 Javascript
JS+CSS实现感应鼠标渐变显示DIV层的方法
2015/02/20 Javascript
JavaScript+CSS实现仿天猫侧边网页菜单效果
2015/08/25 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
vue.js 表格分页ajax 异步加载数据
2016/10/18 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
简单实现js上传文件功能
2017/08/21 Javascript
Jquery获取radio选中值实例总结
2019/01/17 jQuery
React中阻止事件冒泡的问题详析
2019/04/12 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
2020/11/07 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
简单的Python2.7编程初学经验总结
2015/04/01 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
德国狗狗用品在线商店:Schecker
2017/03/17 全球购物
南非最大的在线时尚商店:Zando
2019/07/21 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
安全大检查反思材料
2014/01/31 职场文书
四年大学自我鉴定
2014/02/17 职场文书
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
大学生工作求职信
2014/06/23 职场文书
优秀毕业生找工作自荐信
2014/06/23 职场文书
实习协议书范本
2014/09/25 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
关于办理居住证的介绍信模板
2019/11/27 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android