ECMAScript 2015（ES6）規范中的promise – 轉

概述

Promise 對象用于延遲(deferred) 計算和異步(asynchronous ) 計算.。一個Promise對象代表著一個還未完成，但預期將來會完成的操作。

語法

new Promise(executor);
new Promise(function(resolve, reject) { … });

參數

executor
帶有 resolve 、reject兩個參數的函數對象。 第一個參數用在處理執行成功的場景，第二個參數則用在處理執行失敗的場景。 一旦我們的操作完成即可調用這些函數。

描述
Promise 對象是一個返回值的代理，這個返回值在promise對象創建時未必已知。它允許你為異步操作的成功或失敗指定處理方法。 這使得異步方法可以像同步方法那樣返回值：異步方法會返回一個包含了原返回值的 promise 對象來替代原返回值。

Promise對象有以下幾種狀態:

- pending: 初始狀態, 非 fulfilled 或 rejected. - fulfilled: 成功的操作. - rejected: 失敗的操作.

pending狀態的promise對象既可轉換為帶著一個成功值的fulfilled 狀態，也可變為帶著一個失敗信息的 rejected 狀態。當狀態發生轉換時，* promise.then *綁定的方法（函數句柄）就會被調用。(當綁定方法時，如果 promise對象已經處于 fulfilled 或 rejected 狀態，那么相應的方法將會被立刻調用， 所以在異步操作的完成情況和它的綁定方法之間不存在競爭條件。)

因為Promise.prototype.then和 Promise.prototype.catch方法返回 promises對象, 所以它們可以被鏈式調用—— 一種被稱為 composition 的操作。

注意： 如果一個promise對象處在fulfilled或rejected狀態而不是pending狀態，那么它也可以被稱為settled狀態。你可能也會聽到一個術語resolved ，它表示promise對象處于settled狀態，或者promise對象被鎖定在了調用鏈中。關于promise的狀態， Domenic Denicola 的 States and fates 有更多詳情可供參考。

屬性

Promise.length
- 長度屬性，其值為 1 (構造器參數的數目).
Promise.prototype
- 表示 Promise 構造器的原型.

方法

• Promise.all(iterable)
  返回一個promise對象，當iterable參數里所有的promise都被解決后，該promise也會被解決。
• Promise.race(iterable)
  當iterable參數里的任意一個子promise被成功或失敗后，父promise馬上也會用子promise的成功返回值或失敗詳情作為參數調用父promise綁定的相應句柄，并返回該promise對象。
• Promise.reject(reason)
  調用Promise的rejected句柄，并返回這個Promise對象。
• Promise.resolve(value)
  用成功值value解決一個Promise對象。如果該value為可繼續的（thenable，即帶有then方法），返回的Promise對象會“跟隨”這個value，采用這個value的最終狀態；否則的話返回值會用這個value滿足（fullfil）返回的Promise對象。

Promise原型

屬性

Promise.prototype.constructor
返回創建了實例原型的函數. 默認為 Promise 函數.

方法

• Promise.prototype.catch(onRejected)
  添加一個否定(rejection) 回調到當前 promise, 返回一個新的promise。如果這個回調被調用，新 promise 將以它的返回值來resolve，否則如果當前promise 進入fulfilled狀態，則以當前promise的肯定結果作為新promise的肯定結果.
• Promise.prototype.then(onFulfilled, onRejected)
  添加肯定和否定回調到當前 promise, 返回一個新的 promise, 將以回調的返回值 來resolve.

示例

創建Promise

這個小例子展示了Promise的機制。每當被按下時，testPromise() 函數就會被執行。該函數會創建一個用window.setTimeout在1到3秒（隨機）后用‘result’字符串解決的promise。

這里通過p1.then方法的滿足回調，簡單的輸出了promise的滿足過程，這些輸出顯示了該方法的同步部分是如何和promise的異步解決解耦的。

<!--標注：下面略微修改了英文版的示例，主要是執行3次testPromise()的效果，如果您有疑問，可以參看英文的說明文檔：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise--> <div id="log"></div> <script>'use strict';var promiseCount = 0;function testPromise() {var thisPromiseCount = ++promiseCount;var log = document.getElementById('log');log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 開始(同步代碼開始)<br/>');// 我們創建一個新的promise: 然后用'result'字符串解決這個promise (3秒后)var p1 = new Promise(function (resolve, reject) {// 解決函數帶著解決（resolve）或拒絕（reject）promise的能力被執行log.insertAdjacentHTML('beforeend', thisPromiseCount + ') Promise開始(異步代碼開始)<br/>');// 這只是個創建異步解決的示例window.setTimeout(function () {// 我們滿足（fullfil）了這個promise!resolve(thisPromiseCount)}, Math.random() * 2000 + 1000);});// 定義當promise被滿足時應做什么p1.then(function (val) {// 輸出一段信息和一個值log.insertAdjacentHTML('beforeend', val + ') Promise被滿足了(異步代碼結束)<br/>');});log.insertAdjacentHTML('beforeend', thisPromiseCount + ') 建立了Promise(同步代碼結束)<br/><br/>');}testPromise();testPromise();testPromise(); </script>

這個例子在按鈕被按下后執行。你需要一個支持Promise的瀏覽器。你能通過短時間內按多次按鈕看到不同的promise一個接一個的被滿足。

Example using new XMLHttpRequest()

創建一個Promise

這個例子展示了如何用promise報告一個XMLHttpRequest的成功或失敗。

'use strict';// A-> $http function is implemented in order to follow the standard Adapter pattern function $http(url){// A small example of objectvar core = {// Method that performs the ajax requestajax : function (method, url, args) {// Creating a promisevar promise = new Promise( function (resolve, reject) {// Instantiates the XMLHttpRequestvar client = new XMLHttpRequest();var uri = url;if (args && (method === 'POST' || method === 'PUT')) {uri += '?';var argcount = 0;for (var key in args) {if (args.hasOwnProperty(key)) {if (argcount++) {uri += '&';}uri += encodeURIComponent(key) + '=' + encodeURIComponent(args[key]);}}}client.open(method, uri);client.send();client.onload = function () {if (this.status >= 200 && this.status < 300) {// Performs the function "resolve" when this.status is equal to 2xxresolve(this.response);} else {// Performs the function "reject" when this.status is different than 2xxreject(this.statusText);}};client.onerror = function () {reject(this.statusText);};});// Return the promisereturn promise;}};// Adapter patternreturn {'get' : function(args) {return core.ajax('GET', url, args);},'post' : function(args) {return core.ajax('POST', url, args);},'put' : function(args) {return core.ajax('PUT', url, args);},'delete' : function(args) {return core.ajax('DELETE', url, args);}}; }; // End A// B-> Here you define its functions and its payload var mdnAPI = 'https://developer.mozilla.org/en-US/search.json'; var payload = {'topic' : 'js','q' : 'Promise' };var callback = {success : function(data){console.log(1, 'success', JSON.parse(data));},error : function(data){console.log(2, 'error', JSON.parse(data));} }; // End B// Executes the method call $http(mdnAPI) .get(payload) .then(callback.success) .catch(callback.error);// Executes the method call but an alternative way (1) to handle Promise Reject case $http(mdnAPI) .get(payload) .then(callback.success, callback.error);// Executes the method call but an alternative way (2) to handle Promise Reject case $http(mdnAPI) .get(payload) .then(callback.success).then(undefined, callback.error);

使用XHR加載圖像

另一個用了Promise和XMLHttpRequest加載一個圖像的例子可在MDN GitHub promise-test 中找到。 你也可以在github promise-test上看到。每一步都有注釋可以讓你詳細的跟隨了解Promise和XHR架構。

總結

以上是生活随笔為你收集整理的ECMAScript 2015（ES6）规范中的promise的全部內容，希望文章能夠幫你解決所遇到的問題。

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