2019獨角獸企業重金招聘Python工程師標準>>>

談談 ES6 的 Promise 對象

• 異步編程
• ?
• promise
• ?
• es6
• ?
• javascript

前言

開篇首先設想一個日常開發常常會遇到的需求：在多個接口異步請求數據，然后利用這些數據來進行一系列的操作。一般會這樣去寫：

$.ajax({url: '......',success: function (data) {$.ajax({// 要在第一個請求成功后才可以執行下一步url: '......',success: function (data) {// ......}});} });

這樣的寫法的原理是，當執行一些異步操作時，我們需要知道操作是否已經完成，所有當執行完成的時候會返回一個回調函數，表示操作已經完成。

使用回調函數的形式理解起來并不困難，但是實際的應用當中會有以下的缺點：

在需要多個操作的時候，會導致多個回調函數嵌套，導致代碼不夠直觀，就是常說的?Callback Hell。

如果幾個異步操作之間并沒有前后順序之分（例如不需要前一個請求的結果作為后一個請求的參數）時，同樣需要等待上一個操作完成再實行下一個操作。

為了解決上述的問題，Promise 對象應運而生，在 EMCAScript 2015 當中已經成為標準。

什么是 Promise

一個 Promise 對象可以理解為一次將要執行的操作（常常被用于異步操作），使用了 Promise 對象之后可以用一種鏈式調用的方式來組織代碼，讓代碼更加直觀。而且由于?Promise.all?這樣的方法存在，可以讓同時執行多個操作變得簡單。接下來就來簡單介紹 Promise 對象。

resolve 和 reject

首先來看一段使用了 Promise 對象的代碼。

function helloWorld (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello World!");} else {reject("Good bye!");}}); }helloWorld(true).then(function (message) {alert(message); }, function (error) {alert(error); });

jsFiddle點擊預覽(請用現代瀏覽器打開)

上面的代碼實現的功能非常簡單，helloWord?函數接受一個參數，如果為?true?就打印 "Hello World!"，如果為?false?就打印錯誤的信息。helloWord?函數返回的是一個 Promise 對象。

在 Promise 對象當中有兩個重要方法————resolve?和?reject。

resolve?方法可以使 Promise 對象的狀態改變成成功，同時傳遞一個參數用于后續成功后的操作，在這個例子當中就是?Hello World!?字符串。

reject?方法則是將 Promise 對象的狀態改變為失敗，同時將錯誤的信息傳遞到后續錯誤處理的操作。

Promise 的三種狀態

上面提到了?resolve?和?reject?可以改變 Promise 對象的狀態，那么它究竟有哪些狀態呢？

Promise 對象有三種狀態：

• Fulfilled 可以理解為成功的狀態

• Rejected 可以理解為失敗的狀態

• Pending 既不是 Fulfilld 也不是 Rejected 的狀態，可以理解為 Promise 對象實例創建時候的初始狀態

helloWorld 的例子中的?then?方法就是根據 Promise 對象的狀態來確定執行的操作，resolve 時執行第一個函數（onFulfilled），reject 時執行第二個函數（onRejected）。

then 和 catch

then

helloWorld 的例子當中利用了?then(onFulfilld, onRejected)?方法來執行一個任務打印 "Hello World!"，在多個任務的情況下?then方法同樣可以用一個清晰的方式完成。

function printHello (ready) {return new Promise(function (resolve, reject) {if (ready) {resolve("Hello");} else {reject("Good bye!");}}); }function printWorld () {alert("World"); }function printExclamation () {alert("!"); }printHello(true).then(function(message){alert(message);}).then(printWorld).then(printExclamation);

jsFiddle點擊預覽

上述例子通過鏈式調用的方式，按順序打印出了相應的內容。then?可以使用鏈式調用的寫法原因在于，每一次執行該方法時總是會返回一個 Promise 對象。另外，在?then?onFulfilled 的函數當中的返回值，可以作為后續操作的參數，因此上面的例子也可以寫成：

printHello(true).then(function (message) {return message; }).then(function (message) {return message + ' World'; }).then(function (message) {return message + '!'; }).then(function (message) {alert(message); });

jsFiddle點擊預覽

同樣可以打印出正確的內容。

catch

catch?方法是?then(onFulfilled, onRejected)?方法當中?onRejected?函數的一個簡單的寫法，也就是說可以寫成?then(fn).catch(fn)，相當于?then(fn).then(null, fn)。使用?catch?的寫法比一般的寫法更加清晰明確。

Promise.all 和 Promise.race

Promise.all?可以接收一個元素為 Promise 對象的數組作為參數，當這個數組里面所有的 Promise 對象都變為 resolve 時，該方法才會返回。

var p1 = new Promise(function (resolve) {setTimeout(function () {resolve("Hello");}, 3000); });var p2 = new Promise(function (resolve) {setTimeout(function () {resolve("World");}, 1000); });Promise.all([p1, p2]).then(function (result) {console.log(result); // ["Hello", "World"] });

上面的例子模擬了傳輸兩個數據需要不同的時長，雖然 p2 的速度比 p1 要快，但是?Promise.all?方法會按照數組里面的順序將結果返回。

日常開發中經常會遇到這樣的需求，在不同的接口請求數據然后拼合成自己所需的數據，通常這些接口之間沒有關聯（例如不需要前一個接口的數據作為后一個接口的參數），這個時候?Promise.all?方法就可以派上用場了。

還有一個和?Promise.all?相類似的方法?Promise.race，它同樣接收一個數組，不同的是只要該數組中的 Promise 對象的狀態發生變化（無論是 resolve 還是 reject）該方法都會返回。

兼容性

最后是關于 Promise 對象的兼容性問題。

在瀏覽器端，一些主流的瀏覽器都已經可以使用 Promise 對象進行開發，在 Node.js 配合 babel 也可以很方便地使用。

如果要兼容舊的瀏覽器，建議可以尋找一些第三方的解決方案，例如 jQuery 的?$.Deferred。

感謝你的閱讀，有不足之處請為我指出。

參考

JavaScript Promise迷你書（中文版）

轉載于:https://my.oschina.net/yonghan/blog/866069

總結

以上是生活随笔為你收集整理的谈谈 ES6 的 Promise 对象的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。