js的promise

時間 2019-11-09

原文原文鏈接

轉載自： http://www.javashuo.com/article/p-odwhqqel-bp.html

一前言

本文主要對ES6的Promise進行一些入門級的介紹。要想學習一個知識點，確定是從三個方面出發，what、why、how。下面就跟着我一步步學習吧~javascript

二什麼是Promise

首先是what。那麼什麼是Promise呢？
如下是MDN對Promise的定義css

The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, but is expected in the future.
譯文：Promise對象用於異步操做，它表示一個還沒有完成且預計在將來完成的異步操做。html

那麼什麼是異步操做？在學習promise以前須要把這個概念搞明白，下面將抽離一章專門介紹。java

2.1 同步與異步

咱們知道，JavaScript的執行環境是「單線程」。
所謂單線程，是指JS引擎中負責解釋和執行JavaScript代碼的線程只有一個，也就是一次只能完成一項任務，這個任務執行完後才能執行下一個，它會「阻塞」其餘任務。這個任務可稱爲主線程。
但實際上還有其餘線程，如事件觸發線程、ajax請求線程等。es6

這也就引起了同步和異步的問題。ajax

2.1.1 同步

同步模式，即上述所說的單線程模式，一次只能執行一個任務，函數調用後需等到函數執行結束，返回執行的結果，才能進行下一個任務。若是這個任務執行的時間較長，就會致使「線程阻塞」。typescript

/* 例2.1 */ var x = true; while(x); console.log("don't carry out"); //不會執行

上面的例子即同步模式，其中的while是一個死循環，它會阻塞進程，所以第三句console不會執行。
同步模式比較簡單，也較容易編寫。但問題也顯而易見，若是請求的時間較長，而阻塞了後面代碼的執行，體驗是很很差的。所以對於一些耗時的操做，異步模式則是更好的選擇。編程

2.1.2 異步

下面就來看看異步模式。
異步模式，即與同步模式相反，能夠一塊兒執行多個任務，函數調用後不會當即返回執行的結果，若是任務A須要等待，可先執行任務B，等到任務A結果返回後再繼續回調。
最多見的異步模式就數定時器了，咱們來看看如下的例子。segmentfault

/* 例2.2 */ setTimeout(function() { console.log('taskA, asynchronous'); }, 0); console.log('taskB, synchronize'); //while(true); -------ouput------- taskB, synchronize taskA, asynchronous

咱們能夠看到，定時器延時的時間明明爲0，但taskA仍是晚於taskB執行。這是爲何呢？因爲定時器是異步的，異步任務會在當前腳本的全部同步任務執行完纔會執行。若是同步代碼中含有死循環，即將上例的註釋去掉，那麼這個異步任務就不會執行，由於同步任務阻塞了進程。數組

2.1.3 回調函數

提起異步，就不得不談談回調函數了。上例中，setTimeout裏的function即是回調函數。能夠簡單理解爲：（執行完）回（來）調（用）的函數。
如下是WikiPedia對於callback的定義。

In computer programming, a callback is a piece of executable code that is passed as an argument to other code, which is expected to call back (execute) the argument at some convenient time.

能夠看出，回調函數是一段可執行的代碼段，它以「參數」的形式傳遞給其餘代碼，在其合適的時間執行這段（回調函數）的代碼。

WikiPedia同時提到

The invocation may be immediate as in a synchronous callback, or it might happen at a later time as in an asynchronous callback.

也就是說，回調函數不只能夠用於異步調用，通常同步的場景也能夠用回調。在同步調用下，回調函數通常是最後執行的。而異步調用下，可能一段時間後執行或不執行（未達到執行的條件）。

/* 例2.3 */ /******************同步回調******************/ var fun1 = function(callback) { //do something console.log("before callback"); (callback && typeof(callback) === 'function') && callback(); console.log("after callback"); } var fun2 = function(param) { //do something var start = new Date(); while((new Date() - start) < 3000) { //delay 3s } console.log("I'm callback"); } fun1(fun2); -------output-------- before callback //after 3s I’m callback after callback

因爲是同步回調，會阻塞後面的代碼，若是fun2是個死循環，後面的代碼就不執行了。

上一小節中setTimeout就是常見的異步回調，另外常見的異步回調即ajax請求。

/* 例2.4 */ /******************異步回調******************/ function request(url, param, successFun, errorFun) { $.ajax({ type: 'GET', url: url, param: param, async: true, //默認爲true,即異步請求；false爲同步請求 success: successFun, error: errorFun }); } request('test.html', '', function(data) { //請求成功後的回調函數，一般是對請求回來的數據進行處理 console.log('請求成功啦, 這是返回的數據:', data); },function(error) { console.log('sorry, 請求失敗了, 這是失敗信息:', error); });

2.2 爲何使用Promise

說完了以上基本概念，咱們就能夠繼續學習Promise了。
上面提到，Promise對象是用於異步操做的。既然咱們可使用異步回調來進行異步操做，爲何還要引入一個Promise新概念，還要花時間學習它呢？不要着急，下面就來談談Promise的過人之處。
咱們先看看下面的demo，利用Promise改寫例2.4的異步回調。

/* 例2.5 */ function sendRequest(url, param) { return new Promise(function (resolve, reject) { request(url, param, resolve, reject); }); } sendRequest('test.html', '').then(function(data) { //異步操做成功後的回調 console.log('請求成功啦, 這是返回的數據:', data); }, function(error) { //異步操做失敗後的回調 console.log('sorry, 請求失敗了, 這是失敗信息:', error); });

這麼一看，並無什麼區別，還比上面的異步回調複雜，得先新建Promise再定義其回調。其實，Promise的真正強大之處在於它的多重鏈式調用，能夠避免層層嵌套回調。若是咱們在第一次ajax請求後，還要用它返回的結果再次請求呢？

/* 例2.6 */ request('test1.html', '', function(data1) { console.log('第一次請求成功, 這是返回的數據:', data1); request('test2.html', data1, function (data2) { console.log('第二次請求成功, 這是返回的數據:', data2); request('test3.html', data2, function (data3) { console.log('第三次請求成功, 這是返回的數據:', data3); //request... 繼續請求 }, function(error3) { console.log('第三次請求失敗, 這是失敗信息:', error3); }); }, function(error2) { console.log('第二次請求失敗, 這是失敗信息:', error2); }); }, function(error1) { console.log('第一次請求失敗, 這是失敗信息:', error1); });

以上出現了多層回調嵌套，有種暈頭轉向的感受。這也就是咱們常說的厄運回調金字塔（Pyramid of Doom），編程體驗十分很差。而使用Promise，咱們就能夠利用then進行「鏈式回調」，將異步操做以同步操做的流程表示出來。

/* 例2.7 */ sendRequest('test1.html', '').then(function(data1) { console.log('第一次請求成功, 這是返回的數據:', data1); return sendRequest('test2.html', data1); }).then(function(data2) { console.log('第二次請求成功, 這是返回的數據:', data2); return sendRequest('test3.html', data2); }).then(function(data3) { console.log('第三次請求成功, 這是返回的數據:', data3); }).catch(function(error) { //用catch捕捉前面的錯誤 console.log('sorry, 請求失敗了, 這是失敗信息:', error); });

是否是明顯清晰不少？孰優孰略也無需多說了吧~下面就讓咱們真正進入Promise的學習。

三 Promise的基本用法

3.1 基本用法

上一小節咱們認識了promise長什麼樣，但對它用到的resolve、reject、then、catch想必還不理解。下面咱們一步步學習。

Promise對象表明一個未完成、但預計未來會完成的操做。
它有如下三種狀態：

pending：初始值，不是fulfilled，也不是rejected
fulfilled：表明操做成功
rejected：表明操做失敗

Promise有兩種狀態改變的方式，既能夠從pending轉變爲fulfilled，也能夠從pending轉變爲rejected。一旦狀態改變，就「凝固」了，會一直保持這個狀態，不會再發生變化。當狀態發生變化，promise.then綁定的函數就會被調用。
注意：Promise一旦新建就會「當即執行」，沒法取消。這也是它的缺點之一。
下面就經過例子進一步講解。

/* 例3.1 */ //構建Promise var promise = new Promise(function (resolve, reject) { if (/* 異步操做成功 */) { resolve(data); } else { /* 異步操做失敗 */ reject(error); } });

相似構建對象，咱們使用new來構建一個Promise。Promise接受一個「函數」做爲參數，該函數的兩個參數分別是resolve和reject。這兩個函數就是就是「回調函數」，由JavaScript引擎提供。

resolve函數的做用：在異步操做成功時調用，並將異步操做的結果，做爲參數傳遞出去；
reject函數的做用：在異步操做失敗時調用，並將異步操做報出的錯誤，做爲參數傳遞出去。

Promise實例生成之後，能夠用then方法指定resolved狀態和reject狀態的回調函數。

/* 接例3.1 */ promise.then(onFulfilled, onRejected); promise.then(function(data) { // do something when success }, function(error) { // do something when failure });

then方法會返回一個Promise。它有兩個參數，分別爲Promise從pending變爲fulfilled和rejected時的回調函數（第二個參數非必選）。這兩個函數都接受Promise對象傳出的值做爲參數。
簡單來講，then就是定義resolve和reject函數的，其resolve參數至關於：

function resolveFun(data) { //data爲promise傳出的值 }

而新建Promise中的'resolve(data)'，則至關於執行resolveFun函數。
Promise新建後就會當即執行。而then方法中指定的回調函數，將在當前腳本全部同步任務執行完纔會執行。以下例：

/* 例3.2 */ var promise = new Promise(function(resolve, reject) { console.log('before resolved'); resolve(); console.log('after resolved'); }); promise.then(function() { console.log('resolved'); }); console.log('outer'); -------output------- before resolved after resolved outer resolved

因爲resolve指定的是異步操做成功後的回調函數，它須要等全部同步代碼執行後纔會執行，所以最後打印'resolved'，這個和例2.2是同樣的道理。

3.2 基本API

.then()

語法：Promise.prototype.then(onFulfilled, onRejected)

對promise添加onFulfilled和onRejected回調，並返回的是一個新的Promise實例（不是原來那個Promise實例），且返回值將做爲參數傳入這個新Promise的resolve函數。

所以，咱們可使用鏈式寫法，如上文的例2.7。因爲前一個回調函數，返回的仍是一個Promise對象（即有異步操做），這時後一個回調函數，就會等待該Promise對象的狀態發生變化，纔會被調用。

.catch()

語法：Promise.prototype.catch(onRejected)

該方法是.then(undefined, onRejected)的別名，用於指定發生錯誤時的回調函數。

/* 例3.3 */ promise.then(function(data) { console.log('success'); }).catch(function(error) { console.log('error', error); }); /*******等同於*******/ promise.then(function(data) { console.log('success'); }).then(undefined, function(error) { console.log('error', error); });

/* 例3.4 */ var promise = new Promise(function (resolve, reject) { throw new Error('test'); }); /*******等同於*******/ var promise = new Promise(function (resolve, reject) { reject(new Error('test')); }); //用catch捕獲 promise.catch(function (error) { console.log(error); }); -------output------- Error: test

從上例能夠看出，reject方法的做用，等同於拋錯。

promise對象的錯誤，會一直向後傳遞，直到被捕獲。即錯誤總會被下一個catch所捕獲。then方法指定的回調函數，若拋出錯誤，也會被下一個catch捕獲。catch中也能拋錯，則須要後面的catch來捕獲。

/* 例3.5 */ sendRequest('test.html').then(function(data1) { //do something }).then(function (data2) { //do something }).catch(function (error) { //處理前面三個Promise產生的錯誤 });

上文提到過，promise狀態一旦改變就會凝固，不會再改變。所以promise一旦fulfilled了，再拋錯，也不會變爲rejected，就不會被catch了。

/* 例3.6 */ var promise = new Promise(function(resolve, reject) { resolve(); throw 'error'; }); promise.catch(function(e) { console.log(e); //This is never called });

若是沒有使用catch方法指定處理錯誤的回調函數，Promise對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應（Chrome會拋錯），這是Promise的另外一個缺點。

/* 例3.7 */ var promise = new Promise(function (resolve, reject) { resolve(x); }); promise.then(function (data) { console.log(data); });

如圖所示，只有Chrome會拋錯，且promise狀態變爲rejected，Firefox和Safari中錯誤不會被捕獲，也不會傳遞到外層代碼，最後沒有任何輸出，promise狀態也變爲rejected。

.all()

語法：Promise.all(iterable)

該方法用於將多個Promise實例，包裝成一個新的Promise實例。

var p = Promise.all([p1, p2, p3]);

Promise.all方法接受一個數組（或具備Iterator接口）做參數，數組中的對象（p一、p二、p3）均爲promise實例（若是不是一個promise，該項會被用Promise.resolve轉換爲一個promise)。它的狀態由這三個promise實例決定。

當p1, p2, p3狀態都變爲fulfilled，p的狀態纔會變爲fulfilled，並將三個promise返回的結果，按參數的順序（而不是 resolved的順序）存入數組，傳給p的回調函數，如例3.8。
當p1, p2, p3其中之一狀態變爲rejected，p的狀態也會變爲rejected，並把第一個被reject的promise的返回值，傳給p的回調函數，如例3.9。

/* 例3.8 */ var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 3000, "first"); }); var p2 = new Promise(function (resolve, reject) { resolve('second'); }); var p3 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "third"); }); Promise.all([p1, p2, p3]).then(function(values) { console.log(values); }); -------output------- //約 3s 後 ["first", "second", "third"]

/* 例3.9 */ var p1 = new Promise((resolve, reject) => { setTimeout(resolve, 1000, "one"); }); var p2 = new Promise((resolve, reject) => { setTimeout(reject, 2000, "two"); }); var p3 = new Promise((resolve, reject) => { reject("three"); }); Promise.all([p1, p2, p3]).then(function (value) { console.log('resolve', value); }, function (error) { console.log('reject', error); // => reject three }); -------output------- reject three

這多個 promise 是同時開始、並行執行的，而不是順序執行。從下面例子能夠看出。若是一個個執行，那至少須要 1+32+64+128

/* 例3.10 */ function timerPromisefy(delay) { return new Promise(function (resolve) { setTimeout(function () { resolve(delay); }, delay); }); } var startDate = Date.now(); Promise.all([ timerPromisefy(1), timerPromisefy(32), timerPromisefy(64), timerPromisefy(128) ]).then(function (values) { console.log(Date.now() - startDate + 'ms'); console.log(values); }); -------output------- 133ms //不必定，但大於128ms [1,32,64,128]

.race()

語法：Promise.race(iterable)

該方法一樣是將多個Promise實例，包裝成一個新的Promise實例。

var p = Promise.race([p1, p2, p3]);

Promise.race方法一樣接受一個數組（或具備Iterator接口）做參數。當p1, p2, p3中有一個實例的狀態發生改變（變爲fulfilled或rejected），p的狀態就跟着改變。並把第一個改變狀態的promise的返回值，傳給p的回調函數。

/* 例3.11 */ var p1 = new Promise(function(resolve, reject) { setTimeout(reject, 500, "one"); }); var p2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, "two"); }); Promise.race([p1, p2]).then(function(value) { console.log('resolve', value); }, function(error) { //not called console.log('reject', error); }); -------output------- resolve two var p3 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, "three"); }); var p4 = new Promise(function(resolve, reject) { setTimeout(reject, 100, "four"); }); Promise.race([p3, p4]).then(function(value) { //not called console.log('resolve', value); }, function(error) { console.log('reject', error); }); -------output------- reject four

在第一個promise對象變爲resolve後，並不會取消其餘promise對象的執行，以下例

/* 例3.12 */ var fastPromise = new Promise(function (resolve) { setTimeout(function () { console.log('fastPromise'); resolve('resolve fastPromise'); }, 100); }); var slowPromise = new Promise(function (resolve) { setTimeout(function () { console.log('slowPromise'); resolve('resolve slowPromise'); }, 1000); }); // 第一個promise變爲resolve後程序中止 Promise.race([fastPromise, slowPromise]).then(function (value) { console.log(value); // => resolve fastPromise }); -------output------- fastPromise resolve fastPromise slowPromise //仍會執行

.resolve()

語法：

Promise.resolve(value); Promise.resolve(promise); Promise.resolve(thenable);

它能夠看作new Promise()的快捷方式。

Promise.resolve('Success'); /*******等同於*******/ new Promise(function (resolve) { resolve('Success'); });

這段代碼會讓這個Promise對象當即進入resolved狀態，並將結果success傳遞給then指定的onFulfilled回調函數。因爲Promise.resolve()也是返回Promise對象，所以能夠用.then()處理其返回值。

/* 例3.13 */ Promise.resolve('success').then(function (value) { console.log(value); }); -------output------- Success

/* 例3.14 */ //Resolving an array Promise.resolve([1,2,3]).then(function(value) { console.log(value[0]); // => 1 }); //Resolving a Promise var p1 = Promise.resolve('this is p1'); var p2 = Promise.resolve(p1); p2.then(function (value) { console.log(value); // => this is p1 });

Promise.resolve()的另外一個做用就是將thenable對象（即帶有then方法的對象）轉換爲promise對象。

/* 例3.15 */ var p1 = Promise.resolve({ then: function (resolve, reject) { resolve("this is an thenable object!"); } }); console.log(p1 instanceof Promise); // => true p1.then(function(value) { console.log(value); // => this is an thenable object! }, function(e) { //not called });

再看下面兩個例子，不管是在何時拋異常，只要promise狀態變成resolved或rejected，狀態不會再改變，這和新建promise是同樣的。

/* 例3.16 */ //在回調函數前拋異常 var p1 = { then: function(resolve) { throw new Error("error"); resolve("Resolved"); } }; var p2 = Promise.resolve(p1); p2.then(function(value) { //not called }, function(error) { console.log(error); // => Error: error }); //在回調函數後拋異常 var p3 = { then: function(resolve) { resolve("Resolved"); throw new Error("error"); } }; var p4 = Promise.resolve(p3); p4.then(function(value) { console.log(value); // => Resolved }, function(error) { //not called });

.reject()

語法：Promise.reject(reason)

這個方法和上述的Promise.resolve()相似，它也是new Promise()的快捷方式。

Promise.reject(new Error('error')); /*******等同於*******/ new Promise(function (resolve, reject) { reject(new Error('error')); });

這段代碼會讓這個Promise對象當即進入rejected狀態，並將錯誤對象傳遞給then指定的onRejected回調函數。

四 Promise常見問題

通過上一章的學習，相信你們已經學會使用Promise。
總結一下建立promise的流程：

使用new Promise(fn)或者它的快捷方式Promise.resolve()、Promise.reject()，返回一個promise對象
在fn中指定異步的處理
處理結果正常，調用resolve
處理結果錯誤，調用reject

若是使用ES6的箭頭函數，將會使寫法更加簡單清晰。

這一章節，將會用例子的形式，以說明promise使用過程當中的注意點及容易犯的錯誤。

情景1：reject 和 catch 的區別

promise.then(onFulfilled, onRejected)
在onFulfilled中發生異常的話，在onRejected中是捕獲不到這個異常的。
promise.then(onFulfilled).catch(onRejected)
.then中產生的異常能在.catch中捕獲

通常狀況，仍是建議使用第二種，由於能捕獲以前的全部異常。固然了，第二種的.catch()也可使用.then()表示，它們本質上是沒有區別的，.catch === .then(null, onRejected)

情景2：若是在then中拋錯，而沒有對錯誤進行處理（即catch），那麼會一直保持reject狀態，直到catch了錯誤

/* 例4.1 */ function taskA() { console.log(x); console.log("Task A"); } function taskB() { console.log("Task B"); } function onRejected(error) { console.log("Catch Error: A or B", error); } function finalTask() { console.log("Final Task"); } var promise = Promise.resolve(); promise .then(taskA) .then(taskB) .catch(onRejected) .then(finalTask); -------output------- Catch Error: A or B,ReferenceError: x is not defined Final Task

根據例4.1的輸出結果及流程圖，能夠看出，A拋錯時，會按照 taskA → onRejected → finalTask這個流程來處理。A拋錯後，若沒有對它進行處理，如例3.7，狀態就會維持rejected，taskB不會執行，直到catch了錯誤。

/* 例4.2 */ function taskA() { console.log(x); console.log("Task A"); } function taskB() { console.log("Task B"); } function onRejectedA(error) { console.log("Catch Error: A", error); } function onRejectedB(error) { console.log("Catch Error: B", error); } function finalTask() { console.log("Final Task"); } var promise = Promise.resolve(); promise .then(taskA) .catch(onRejectedA) .then(taskB) .catch(onRejectedB) .then(finalTask); -------output------- Catch Error: A ReferenceError: x is not defined Task B Final Task

將例4.2與4.1對比，在taskA後多了對A的處理，所以，A拋錯時，會按照A會按照 taskA → onRejectedA → taskB → finalTask這個流程來處理，此時taskB是正常執行的。

情景3：每次調用then都會返回一個新建立的promise對象，而then內部只是返回的數據

/* 例4.3 */ //方法1：對同一個promise對象同時調用 then 方法 var p1 = new Promise(function (resolve) { resolve(100); }); p1.then(function (value) { return value * 2; }); p1.then(function (value) { return value * 2; }); p1.then(function (value) { console.log("finally: " + value); }); -------output------- finally: 100 //方法2：對 then 進行 promise chain 方式進行調用 var p2 = new Promise(function (resolve) { resolve(100); }); p2.then(function (value) { return value * 2; }).then(function (value) { return value * 2; }).then(function (value) { console.log("finally: " + value); }); -------output------- finally: 400

第一種方法中，then的調用幾乎是同時開始執行的，且傳給每一個then的value都是100，這種方法應當避免。方法二纔是正確的鏈式調用。
所以容易出現下面的錯誤寫法：

/* 例4.4 */ function badAsyncCall(data) { var promise = Promise.resolve(data); promise.then(function(value) { //do something return value + 1; }); return promise; } badAsyncCall(10).then(function(value) { console.log(value); //想要獲得11，實際輸出10 }); -------output------- 10

正確的寫法應該是：

/* 改寫例4.4 */ function goodAsyncCall(data) { var promise = Promise.resolve(data); return promise.then(function(value) { //do something return value + 1; }); } goodAsyncCall(10).then(function(value) { console.log(value); }); -------output------- 11

情景4：在異步回調中拋錯，不會被catch到

// Errors thrown inside asynchronous functions will act like uncaught errors var promise = new Promise(function(resolve, reject) { setTimeout(function() { throw 'Uncaught Exception!'; }, 1000); }); promise.catch(function(e) { console.log(e); //This is never called });

情景5： promise狀態變爲resove或reject，就凝固了，不會再改變

console.log(1); new Promise(function (resolve, reject){ reject(); setTimeout(function (){ resolve(); //not called }, 0); }).then(function(){ console.log(2); }, function(){ console.log(3); }); console.log(4); -------output------- 1 4 3