使用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 获取链接(url)参数的方法
Feb 15 Javascript
javascript分页代码实例分享(js分页)
Dec 13 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
Feb 20 Javascript
JavaScript编程中的Promise使用大全
Jul 28 Javascript
AngularJS基础 ng-paste 指令简单示例
Aug 02 Javascript
详解js正则表达式验证时间格式xxxx-xx-xx形式
Feb 09 Javascript
写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab
Mar 06 Javascript
layui的table中显示图片方法
Aug 17 Javascript
JS查找孩子节点简单示例
Jul 25 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
JS常见错误(Error)及处理方案详解
Jul 02 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
文件上传的实现
2006/10/09 PHP
深入php self与$this的详解
2013/06/08 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
js和jquery中获取非行间样式
2017/05/05 jQuery
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
2021/02/20 Vue.js
python对json的相关操作实例详解
2017/01/04 Python
pygame实现俄罗斯方块游戏
2018/06/26 Python
python中的decorator的作用详解
2018/07/26 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
Python从文件中读取数据的方法讲解
2019/02/14 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Python使用python-docx读写word文档
2019/08/26 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
美国CVS药店官网:CVS Pharmacy
2018/07/26 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
计算机专业大学生的自我评价
2013/11/14 职场文书
韩国商务邀请函
2014/01/14 职场文书
巧克力蛋糕店创业计划书
2014/01/14 职场文书
路政管理毕业自荐书范文
2014/02/10 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
工商企业管理应届生求职信
2014/05/04 职场文书
信用社竞聘演讲稿
2014/05/16 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小学生安全教育心得体会
2016/01/15 职场文书
使用 Apache Superset 可视化 ClickHouse 数据的两种方法
2021/07/07 Servers