本文實例講述了ES6新特性之promise對象。分享給大家供大家參考，具體如下：
1. promise 介紹
它是一個對象，也就是說與其他JavaScript對象的用法，沒有什么兩樣；其次，它起到代理作用（proxy），充當異步操作與回調函數之間的中介。它使得異步操作具備同步操作的接口，使得程序具備正常的同步運行的流程，回調函數不必再一層層嵌套。
它的思想是，每一個異步任務立刻返回一個Promise對象，由于是立刻返回，所以可以采用同步操作的流程。這個Promises對象有一個then方法，允許指定回調函數，在異步任務完成后調用。
異步操作f1返回一個Promise對象，它的回調函數f2寫法如下
(new Promise(f1)).then(f2);
2. promise 對象的三種狀態
① 異步操作未完成（pending）
② 異步操作已完成（resolved）
③ 異步操作失敗（rejected）
3. 工作過程
Promise對象使用then方法添加回調函數。then方法可以接受兩個回調函數，第一個是異步操作成功時（變為resolved狀態）時的回調函數，第二個是異步操作失敗（變為rejected）時的回調函數（可以省略）。一旦狀態改變，就調用相應的回調函數，這兩個回調函數都接受異步操作傳回的值作為參數。
promise.then( console.log, console.error);
4. then 的鏈式使用
① 首先then方法返回的一個新的promise對象，因此可以采用鏈式寫法。
② then方法的第一個參數是Resolved狀態的回調函數，第二個參數（可選）是Rejected狀態的回調函數。
③ 如下，promise的狀態一旦變為resolved，就依次調用后面每一個then指定的回調函數，每一步都必須等到前一步完成，才會執行。最后一個then方法的回調函數console.log和console.error，用法上有一點重要的區別。console.log只顯示回調函數step3的返回值，console.error可以顯示step1、step2、step3之中任意一個發生的錯誤，Promises對象的錯誤有傳遞性。
promise .then(step1) .then(step2) .then(step3) .then( console.log, console.error );
5. promise 對象的使用
var promise = new Promise(function(resolve, reject) { // promise的構造函數，Promise構造函數接受一個函數作為參數，該函數的兩個參數分別是resolve和reject // 異步操作的代碼 if (/* 異步操作成功 */){ resolve(value);//將異步的操作結果作為參數傳遞出去 } else { reject(error); }});其中resolve和reject它們是兩個函數，由JavaScript引擎提供，不用自己部署。
resolve函數的作用：將Promise對象的狀態從“未完成”變為“成功”（即從Pending變為Resolved），在異步操作成功時調用，并將異步操作的結果，作為參數傳遞出去；
reject函數的作用：將Promise對象的狀態從“未完成”變為“失敗”（即從Pending變為Rejected），在異步操作失敗時調用，并將異步操作報出的錯誤，作為參數傳遞出去。
① 下面是一個用Promise對象實現的Ajax操作的例子
var getJSON = function(url) { var promise = new Promise(function(resolve, reject){ var client = new XMLHttpRequest(); client.open("GET", url); client.onreadystatechange = handler; client.responseType = "json"; client.setRequestHeader("Accept", "application/json"); client.send(); function handler() { if (this.readyState !== 4) { return; } if (this.status === 200) { resolve(this.response);//會將參數傳遞給回調函數 } else { reject(new Error(this.statusText)); } }; }); return promise;};getJSON("/posts.json").then(function(json) { console.log('Contents: ' + json);}, function(error) { console.error('出錯了', error);});② resolve函數的參數除了正常的值以外，還可能是另一個Promise實例，即一個異步操作的結果是返回另一個異步操作。
var p1 = new Promise(function (resolve, reject) { // ...});var p2 = new Promise(function (resolve, reject) { // ... resolve(p1);})6.Promise.prototype.catch()
① 一個 Promise 對象,如果異步操作拋出錯誤,狀態就會變為Rejected,就會調用catch方法指定的回調函數,處理這個錯誤。
promise.then(function(posts) { // ...}).catch(function(error) { // 處理 getJSON 和 前一個回調函數運行時發生的錯誤 console.log('發生錯誤！', error);});② 另外,then方法指定的回調函數,如果運行中拋出錯誤，也會被catch方法捕獲。
var promise = new Promise(function(resolve, reject) { throw new Error('test');});promise.catch(function(error) { console.log(error);});// Error: test③ 另外兩種寫法
// 寫法一var promise = new Promise(function(resolve, reject) { try { throw new Error('test'); } catch(e) { reject(e); }});promise.catch(function(error) { console.log(error);});// 寫法二var promise = new Promise(function(resolve, reject) { reject(new Error('test'));//reject方法的作用，等同于拋出錯誤});promise.catch(function(error) { console.log(error);});④ Promise 在resolve語句后面再拋出錯誤不會被捕獲。因為 Promise 的狀態一旦改變,就永久保持該狀態,不會再變了。
var promise = new Promise(function(resolve, reject) { resolve('ok'); throw new Error('test');});promise .then(function(value) { console.log(value) }) .catch(function(error) { console.log(error) });// ok7 Promise.all()
參數為Promise 對象的數組；將多個Promisre 對象包裝成一個新的Promise 對象，如果數組中不是Promise 對象，就會自動調用 Promise.resolve方法，將參數轉為Promise實例，再進一步處理。（Promise.all方法的參數可以不是數組，但必須具有Iterator接口，且返回的每個成員都是Promise實例）
var p = Promise.all(promises).then(function (posts) { // ...}).catch(function(reason){ // ...});① 只要promises之中有一個狀態變為rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。
② 如果全部都變為resolved；此時 promises 數組中所有對象的返回值組成一個數組，傳遞給p的回調函數。
8 Promise.resolve()
將現有對象轉為 Promise對象，Promise.resolve方法就起到這個作用。
Promise.resolve('foo')// 等價于new Promise(resolve => resolve('foo'))① 參數為Priomise 對象，Promise.resolve() 不做任何處理。
② 參數是一個具有 then 方法的對象：Promise.resolve方法會將這個對象轉為Promise對象，然后就立即執行thenable對象的then方法。
let thenable = { then: function(resolve, reject) { resolve(42); }};let p1 = Promise.resolve(thenable);//p1為一個狀態已經是resolved 的promise對象.p1.then(function(value) { console.log(value); // 42});③ 參數不是具有then方法的對象，或根本就不是對象
該參數變為生成的 Promise 對象的 resolve() 的參數。
var p = Promise.resolve('Hello');//Hello 會傳遞給 p 的resolve()p.then(function (s){ console.log(s)});// Hello希望本文所述對大家ECMAScript程序設計有所幫助。
新聞熱點
疑難解答
