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、axios3的状态都是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);
})