使用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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
js中的json对象详细介绍
Oct 29 Javascript
JS仿淘宝实现的简单滑动门效果代码
Oct 14 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
Sep 08 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
angula中使用iframe点击后不执行变更检测的问题
May 10 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
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中call_user_func_array的作用
2013/06/07 PHP
Zend Framework实现Zend_View集成Smarty模板系统的方法
2016/03/05 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP 扩展Memcached命令用法实例总结
2020/06/04 PHP
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
javascript基础之查找元素的详细介绍(访问节点)
2013/07/05 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JS ES6多行字符串与连接字符串的表示方法
2017/04/26 Javascript
原生js简单实现放大镜特效
2017/05/16 Javascript
解决vue-cli中stylus无法使用的问题方法
2017/06/19 Javascript
浅谈ES6新增的数组方法和对象
2017/08/08 Javascript
详解webpack2异步加载套路
2018/09/14 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue 项目打包时样式及背景图片路径找不到的解决方式
2019/11/12 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
js canvas实现俄罗斯方块
2020/10/11 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
以视频爬取实例讲解Python爬虫神器Beautiful Soup用法
2016/01/20 Python
python xml解析实例详解
2016/11/14 Python
Python扩展内置类型详解
2018/03/26 Python
Python测试模块doctest使用解析
2019/08/10 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
小女主人连衣裙:Little Mistress
2017/07/10 全球购物
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Vector, ArrayList, HashTable, HashMap哪些是线程安全的,哪些不是
2015/10/12 面试题
市场部管理制度
2014/02/02 职场文书
《鹬蚌相争》教学反思
2014/04/22 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2015年度物流工作总结
2015/04/30 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
python 中的@运算符使用
2021/05/26 Python