使用Promise鏈式調用解決多個異步回調的問題

比如我們平常經常遇到的一種情況：

網站中需要先獲取用戶名，然后再根據用戶名去獲取用戶信息。這里獲取用戶名getUserName()和獲取用戶信息getUser()都是調用接口的異步請求。在獲取用戶信息之前，需要先獲得用戶名。也就是說getUser依賴於getUserName的狀態。

一：promise.all()

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' } ]
 })

　　

二：鏈式調用

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);
})