淺析Promise用法

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise 是一個對象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進行處理。

Promise對象有以下兩個特點。
（1）對象的狀態(tài)不受外界影響。Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失?。Ｖ挥挟惒讲僮鞯慕Y果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。這也是Promise這個名字的由來，它的英語意思就是“承諾”，表示其他手段無法改變。
（2）一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結果。就算改變已經(jīng)發(fā)生了，你再對Promise對象添加回調函數(shù)，也會立即得到這個結果。這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結果的。
有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數(shù)。此外，Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易。

要理解Promise要知道沒有Promise的回調地獄：
一般我們要在一個函數(shù)執(zhí)行完之后執(zhí)行另一個函數(shù)我們稱之為callback‘回調’，簡單的寫一下：

setTimeout(function(){
  left(function(){
setTimeout(function(){
   left(function(){
      setTimeout(function(){
         left();
      },2000);
   });
}, 2000);
  });
}, 2000);
以上代碼就是傳說中的回調地獄，如果有多層業(yè)務邏輯嵌套的話，不僅會使代碼閱讀困難，而且后面維護起來也是難點。
之后在ES6，Promise就應運而生。

Promise語法與then的用法：
var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 異步操作成功 */){
resolve(value);
  } else {
reject(error);
  }
});
resolve(value)是在Promise在已經(jīng)異步完成成功(Resolved)之后執(zhí)行的
reject(value)是在Promise在異步失敗之后(Rejected)執(zhí)行。
當然，也可以用then來指定：then(resolve,reject)
或者：then(resolve),catch(reject)

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});
//等價于：
promise.then(function(){
  //success
}).catch(function(){
  //failure
})
范例展示：寫一個img圖片加載示例點擊

Tips
連續(xù)調用回調：
以剛開始的回調地獄為例子:
setTimeout(function(){
  left(function(){
setTimeout(function(){
   left(function(){
      setTimeout(function(){
         left();
      },2000);
   });
}, 2000);
  });
}, 2000);
//我們給left函數(shù)內容換成console.log(11);
var p = new Promise((resolve,reject)=>{
setTimeout( resolve , 2000 )
  })
  .then( ()=>setTimeout( null, 2000 ) )
  .then( ()=>setTimeout(function(){
console.log(11)
  },2000) )
//這樣在6秒鐘之后會打出11
范例點擊
總結：

可以采用連續(xù)的then鏈式操作來寫回調（這是因為返回值一直是新的Promise實例）。
以上例子可以看出來只要在第一個promise回調中添加resolve，之后的連續(xù)then就會默認執(zhí)行。
可以在then中return出數(shù)據(jù)，并且這個數(shù)據(jù)會以參數(shù)的形式傳入下一個then。
var p = new Promise(function(resolve,reject){
   var a=1
   resolve(a);

  }).then(function(data){
   console.log(data)
   return ++data;
  }).then( function(data){
   console.log(data)
  } )
//打印出來的結果依次是： 1  2 。
接下來介紹一下catch()
catch是用于指定發(fā)生錯誤時的回調函數(shù)。（建議不要在then的第二個參數(shù)寫rejected狀態(tài)，總是使用catch）
catch()使回調報錯時不會卡死js而是會繼續(xù)往下執(zhí)行。點擊范例
Promise 對象的錯誤具有“冒泡”性質，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。
如：
getJSON('/post/1.json').then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // some code
}).catch(function(error) {
  // 處理前面三個Promise產生的錯誤
});
用一段小代碼來理解catch()

var p = new Promise((resolve,reject)=> {
n
  } ).then(()=>console.log('運行成功'))
  .catch( ()=>{a;console.log('報錯');} )//這里我們沒有定義a的值會報錯
  .catch( ()=> console.log('報錯2') )
  .then( ()=>console.log('報錯后的回調') )
//運行結果是：'報錯2'  '報錯后的回調'
首先n沒有定義，所以第一層出錯。下一個then的‘運行成功’不會被打出來。而是會被下一個catch捕獲，第一個catch沒有定義a，所以報錯，console.log('報錯')沒辦法打出來，又被下一個catch捕獲：第二個catch沒有問題：打出‘報錯2’。運行成功傳給下一個then，打出'報錯后的回調'。

這里要注意，不管是then或者catch返回的都是一個新的Promise實例！而每個Primise實例都有最原始的Pending（進行中）到Resolve（已完成），或者Pending（進行中）到Reject（已失?。┑倪^程。
Promise.all()
Promise.all方法用于將多個Promise實例，包裝成一個新的Promise實例。

如：

var p = Promise.all([p1, p2, p3]);
all()接受數(shù)組作為參數(shù)。p1,p2,p3都是Promise的實例對象，p要變成Resolved狀態(tài)需要p1，p2，p3狀態(tài)都是Resolved，如果p1,p2,p3至少有一個狀態(tài)是Rejected，p的狀態(tài)就變成Rejected（個人感覺很想&&符號鏈接）

Promise.race();
var p = new Promise( [p1,p2,p3] )
上面代碼中，只要p1、p2、p3之中有一個實例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調函數(shù)。（感覺就是||符號操作~~~）

Promise resolve():
有時需要將現(xiàn)有對象轉為Promise對象，Promise.resolve方法就起到這個作用。
Promise.resolve等價于下面的寫法。

Promise.resolve('foo')
// 等價于
new Promise(resolve => resolve('foo'))
Promise reject()
Promise.reject(reason)方法也會返回一個新的 Promise 實例，該實例的狀態(tài)為rejected。

Promise.reject('foo')
// 等價于
new Promise(reject => reject('foo'))
注意，Promise.reject()方法的參數(shù)，會原封不動地作為reject的理由，變成后續(xù)方法的參數(shù)。這一點與Promise.resolve方法不一致。

作者：傳智播客前端與移動開發(fā)培訓學院
首發(fā)：http://web.itcast.cn/

全國校區(qū)

熱門課程

淺析Promise用法

最新資訊

相關閱讀

熱門課程推薦