当前位置：首页 > 资讯 > 技术文档

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

时间：2022-09-25 07:52 编辑：来源：阅读：
扫一扫，手机访问

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

[b]介绍[/b] 所谓Promise，简单来说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。缺少场景支撑，对于新手而言，很难理解Promise的意义。 [b]在《你不知道的JavaScript中》有个场景介绍得很形象：[/b] 我走到快餐店的柜台，点了一个芝士汉堡。我交给收银员1.47美元。通过下订单并付款，我已经发出了一个对某个值（就是那个汉堡）的请求。我已经启动了一次交易。但是，通常我不能马上就得到这个汉堡。收银员会交给我某个东西来代替汉堡：一张带有订单号的收据。订单号就是一个 IOU（I owe you，我欠你的）承诺（promise），保证了最终我会得到我的汉堡。所以我得好好保留我的收据和订单号。我知道这代表了我未来的汉堡，所以不需要担心，只是现在我还是很饿！在等待的过程中，我可以做点其他的事情，比如给朋友发个短信：“嗨，要来和我一起吃午饭吗？我正要吃芝士汉堡。” 我已经在想着未来的芝士汉堡了，尽管现在我还没有拿到手。我的大脑之所以可以这么做，是因为它已经把订单号当作芝士汉堡的占位符了。从本质上讲，这个占位符使得这个值不再依赖时间。这是一个未来值。终于，我听到服务员在喊“订单 113” ，然后愉快地拿着收据走到柜台，把收据交给收银员，换来了我的芝士汉堡。换句话说，一旦我需要的值准备好了，我就用我的承诺值（value-promise）换取这个值本身。但是，还可能有另一种结果。他们叫到了我的订单号，但当我过去拿芝士汉堡的时候，收银员满是歉意地告诉我：“不好意思，芝士汉堡卖完了。”除了作为顾客对这种情况感到愤怒之外，我们还可以看到未来值的一个重要特性：它可能成功，也可能失败。每次点芝士汉堡，我都知道最终要么得到一个芝士汉堡，要么得到一个汉堡包售罄的坏消息，那我就得找点别的当午饭了。所以Promise的出现其实是作为异步编程的一种解决方案。比传统的解决方案-回调函数和事件-更加合理、强大。 [b]Promise的基本用法[/b]

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

Promise一个明显的好处便是可以用来解决回调地狱。特别是在处理多个回调相互依赖的情况。使用Promise解决多个异步依赖调用 Promise提供了一个方法[code]Promise.all([p1,p2,p3])[/code] ，用于将多个Promise实例，包装成一个新的Promise实例。接收的参数是一个数组,p1、p2、p3都是Promise对象。此时Promise.all的状态取决于它的参数。 [b]分两种情况：[/b] [list] [*]p1、p2、p3的状态都是resolve的时候，[code]Promise.all[/code]的状态才会变成resolve；[/*] [*]只要p1、p2、p3中有一个的状态为reject，那么[code]Promise.all[/code]的状态就会变成reject； [/*] [/list] 所以我们可以用[code]Promise.all()[/code]来解决多个异步依赖调用。比如我们平常经常遇到的一种情况：网站中需要先获取用户名，然后再根据用户名去获取用户信息。这里获取用户名[code]getUserName()[/code]和获取用户信息[code]getUser()[/code]都是调用接口的异步请求。在获取用户信息之前，需要先获得用户名。也就是说getUser依赖于getUserName的状态。所以我们可以将这两个请求通过[code]Promise.all()[/code]封装成一个新的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' } ]
 })

[b]使用Promise的链式调用[/b]

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的链式调用，再也不同担心回调地狱的问题了。 [b]总结[/b] 以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

全部评论(0)

上一篇：AngularJS中实现显示或隐藏动画效果的方式总结
下一篇：javascript实现显示和隐藏div方法汇总

资讯排行榜
更多>>