Angular使用Promise解决多个异步回调问题

Promise的基本用法

var p1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 1000, 'done');
  })
p1.then(data=>{
  console.log(data); // done
})
//angular中的promise使用
function pAjax(dataUrl,data) { 
     var deferred = $q.defer(); // 声明延后执行，表示要去监控后面的执行 
     $http({
         url:dataUrl,
         method: 'GET'  // POST  需要传递data
     }).then(function (data, status, headers, config) { 
        deferred.resolve(data); // 声明执行成功，即http请求数据成功，可以返回数据了  
     }, function (data, status, headers, config) { 
        deferred.reject(data); // 声明执行失败，即服务器返回错误  
     }); 
    return deferred;
}

Promise一个明显的好处便是可以用来解决回调地狱。特别是在处理多个回调相互依赖的情况。
使用Promise解决多个异步依赖调用

Promise提供了一个方法Promise.all([p1,p2])，用于将多个Promise实例，包装成一个新的Promise实例。

接收的参数是一个数组,p1、p2都是Promise对象。
此时Promise.all的状态取决于它的参数。分两种情况：

p1、p2的状态都是resolve的时候，Promise.all的状态才会变成resolve；
只要p1、p2中有一个的状态为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返回的值所构成的数组。 
   console.log(values); // [v1, v2]    
)
}
function getUserName(){
  //let data = 'superman';  
  //return new Promise((resolve, reject) => {   
	    //setTimeout(resolve(data), 1000); // })
  //}
  let dataUrl = '/sss/sss';
  pAjax(dataUrl)
}
function getUser(){
   let data = { id:1, username: 'superman', gender: 'male' }
	//return new Promise((resolve, reject) => {
	    //setTimeout(resolve(data), 2000); 
	// })
   let dataUrl = '/sss/sss';
   pAjax(dataUrl,data)
}
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(username);
}).then(user => {
  console.log(user);
}).catch(err => {
  console.log(err);
})