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