Promise

Promise

1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

Promise 基本用法

• 实例化Promise对象，构造函数中传递函数，该函数中用于处理异步任务

• resolve和reject 两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

  var p = new Promise(function(resolve,reject){
      //这里用于实现异步任务
      setTimeout(function(){
          var flag =true;
          if(flag){
              //正常情况
              resolve("hello");
          }else{
              //异常情况
              reject('出错了');
          }
      },100);
      //成功调用resolve()
      //失败时调用reject()
  });
  p.then(function(data){
      //从resolve得到正常结果
  },function(info){
      //从reject得到错 误信息
  }
  

  基于Promise发送Ajax

  function queryData(url){
      var p = new Promise(function(resolve,reject){
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function(){
              if(xhr.readySate !=4) return;
              if(xhr.readyState == 4 && xhr.status == 200){
                  //处理正常的情况
                  resolve(xhr.responseText);
              }else{
                  //处理异常情况
                  reject('服务器异常');
              }
          };
          xhr.open('get',url);
          xhr.send(null);
      });
      return p;
  }
  queryData('http://localhost:8080/data')
      .then(function(data){
      	//从resolve得到正常结果
      	console.log(data);
  	},function(info){
      	//从reject得到错 误信息
      	console.log(info);
  	}
  //-----------------------
  //发送多个ajax请求并且保证顺序
  queryData('http://localhost:8080/data')
  .then(function(data){
      console.log(data);
    return queryData('http://localhost:8080/data1');
  },function(info){console.log(info)})
  .then(function(data){
      console.log(data);
      return queryData('http://localhost:8080/data2');
  },function(info){console.log(info)})
  .then(function(data){
      console.log(data);
  },function(info) {console.log(info)})
  

then 参数中的函数返回值

1. 返回Promise实例对象
   • 返回该实例对象会调用下辖一个then
2. 返回普通值
   • 返回的普通值会直接传递给下一个then，通过参数中函数的参数接收该值

queryData('http://localhost:8080/data')
.then(function(data){
    console.log(data);
    return queryData('http://localhost:8080/data1');
},function(info){console.log(info)})
.then(function(data){
    console.log(data);
    return data;
},function(info){console.log(info)})
.then(function(data){
    console.log(data);
},function(info) {console.log(info)})

Promise常用的API

实例方法

• p.then()得到异步任务的正确结果
• p.catch()获取异常信息
• p.finally()成功与否都会执行

function fun(){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            resolve(123);
        },100);
    })
}
fun()
.then(function(data){
    console.log(data);
})
.catch(function(data){
    console.log(data)
})
.finally(function(){
    console.log('finished')
});