使用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 相关文章推荐
E3 tree 1.6在Firefox下显示问题的修复方法
Jan 30 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
微信公众平台开发教程(五)详解自定义菜单
Dec 02 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
JS给按钮添加跳转功能类似a标签
May 30 Javascript
input file样式修改以及图片预览删除功能详细概括(推荐)
Aug 17 Javascript
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
详解swiper在vue中的应用(以3.0为例)
Sep 20 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
基于curl数据采集之单页面采集函数get_html的使用
2013/04/28 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
php脚本守护进程原理与实现方法详解
2017/07/20 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
JavaScript 以对象为索引的关联数组
2010/05/19 Javascript
Js获取事件对象代码
2010/08/05 Javascript
javascript判断ie浏览器6/7版本加载不同样式表的实现代码
2011/12/26 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
2013/08/06 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
js实现按钮控制图片360度翻转特效的方法
2015/02/17 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
一不小心就做错的JS闭包面试题
2015/11/25 Javascript
JavaScript SHA1加密算法实现详细代码
2016/10/06 Javascript
JavaScript的事件机制详解
2017/01/17 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
jquery无缝图片轮播组件封装
2020/11/25 jQuery
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
基于vue与element实现创建试卷相关功能(实例代码)
2020/12/07 Vue.js
python处理文本文件并生成指定格式的文件
2014/07/31 Python
Python代码调试的几种方法总结
2015/04/15 Python
Python运算符重载用法实例分析
2015/06/01 Python
浅谈对yield的初步理解
2017/05/29 Python
详谈在flask中使用jsonify和json.dumps的区别
2018/03/26 Python
python爬虫模拟浏览器的两种方法实例分析
2019/12/09 Python
Python数据存储之 h5py详解
2019/12/26 Python
Python使用多进程运行含有任意个参数的函数
2020/05/02 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
python连接mysql有哪些方法
2020/06/24 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
初级软件工程师面试题 Junior Software Engineer Interview
2015/02/15 面试题
房地产工程部经理岗位职责
2015/04/09 职场文书
关于教师节的广播稿
2015/08/19 职场文书
创业计划书之家教中心
2019/09/25 职场文书
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
Python语法学习之进程的创建与常用方法详解
2022/04/08 Python