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