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

Promise概念解析

介绍

Promise本质上是一个容器，用于保存某个未来才会结束的事件（通常是异步操作）的结果。

若缺乏具体场景支撑，初学者往往难以理解Promise存在的意义。

《你不知道的JavaScript》中提供了一个非常形象的类比场景：

当你走到快餐店柜台点了一份芝士汉堡，并支付1.47美元时，你实际上发出了一个对特定值（汉堡）的请求，并启动了一项交易。

通常情况下，你无法立即拿到汉堡。收银员会给你一张带有订单号的收据，这个订单号就是一个IOU（I owe you，我欠你的）承诺（promise），它保证你最终能拿到汉堡。

因此，你需要妥善保管这张收据和订单号。虽然它代表了你未来的汉堡，让你无需担心，但此刻你依然感到饥饿。

在等待期间，你可以做其他事情，例如给朋友发短信：“嗨，要来和我一起吃午饭吗？我正要吃芝士汉堡。”

尽管手中尚未拿到汉堡，你的大脑已经将其视为未来的芝士汉堡。这是因为订单号充当了汉堡的占位符，使得该值不再受时间限制，成为一个“未来值”。

当服务员喊出“订单113”时，你拿着收据走到柜台，将其交给收银员，最终换来了你的芝士汉堡。

换言之，一旦你需要的值准备就绪，你就可以用这个承诺值（value-promise）去兑换实际的值本身。

然而，结果也可能不同。当你的订单号被叫到，你去取餐时，收银员可能抱歉地告知：“不好意思，芝士汉堡卖完了。”这展示了未来值的一个重要特性：它既可能成功，也可能失败。

每次点餐，你都清楚最终结果要么得到芝士汉堡，要么得到售罄的通知，进而需要寻找其他午餐选项。

因此，Promise的出现旨在作为异步编程的一种解决方案，相比传统的回调函数和事件机制，它更加合理且强大。

Promise.all处理异步依赖

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的链式调用，我们不再需要担心回调地狱的问题。

总结

以上就是本文的全部内容，希望这些内容能对各位的学习或工作有所帮助。如有任何疑问，欢迎留言交流。