Promise鍊式調用解決多個異步回調

項目中需要先擷取使用者的ID，然後再根據使用者ID去擷取使用者的詳細資訊。這裡擷取使用者ID login()和擷取使用者資訊getUser()都是調用接口的異步請求。在擷取使用者的詳細資訊之前，需要先獲得使用者ID。也就是說getUser依賴于login的狀态。

一：promise.all()　　

Promise.all([axios1,axios2,axios3])

 ，用于将多個Promise執行個體，包裝成一個新的Promise執行個體。接收的參數是一個數組,

axios1

、

axios2

、

axios3

都是Promise對象。此時Promise.all的狀态取決于它的參數。

分兩種情況：

• axios1

  、

  axios2

  、

  axios

  3的狀态都是resolve的時候，

  Promise.all

  的狀态才會變成resolve；
• 隻要

  axios1

  、

  axios2

  、

  axios3

  中有一個的狀态為reject，那麼

  Promise.all

  的狀态就會變成reject；

是以我們可以用

Promise.all()

來解決多個異步依賴調用。

function getUserPromise(promiseX, promiseY){
 return Promise.all([promiseX, promiseY])
 .then(values =>
 // 傳回的values由 promiseX 與 promiseY傳回的值所構成的數組。
  values
 )
}
function login(){
 let data = 1001;
 return new Promise((resolve, reject) => {
  axios.get(url).then(res => {
      resolve(res.data);
    }).catch(err =>{
      reject(err.data)    
    })  
 })
}
function getUser(){
 let data = {
     id:1001,
     username: 'superman',
     gender: 'male'
 }
 return new Promise((resolve, reject) => {
  axios.post(url, qs.stringify({id:1001}))
    .then(res => {
      resolve(res.data);
    })
    .catch(err =>{
      reject(err.data)
    })
 })
}
getUserPromise(login(), getUser())
.then(data => {
 // 這裡的data就是包含了login和 getUser傳回值所組成的數組
 console.log(data); // [ 1001, { id: 1001, username: 'LiLin', gender: 'male' } ]
 })
           

二：鍊式調用

function login(){
 let data = 1001;
 return new Promise((resolve, reject) => {
    axios.get(url).then(res => {
      resolve(res.data);
    }).catch(err =>{
      reject(err.data)    
    })  
 })
}
function getUser(id){
 let data = {
     id:1001,
     username: 'superman',
     gender: 'male'
 }
 return new Promise((resolve, reject) => {
     if(id){
          axios.post(url, qs.stringify({id:1001})).then(res => {
             resolve(res.data);
          }).catch(err =>{
             reject(err.data)
          })
     }else{
         reject('err');
     }
 })
}
login().then(id=> {
 return getUser();
}).then(user => {
 console.log(user);
}).catch(err => {
 console.log(err);
})