es6入門（五）

一、Promise

Promise 是異步編程的一種解決方案，比傳統的解決方案（回調函數和事件）更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。

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

• Promise對象的特點：

1）對象狀態不受外界影響，只有異步操作的結果才能夠決定當前是哪一種狀態，任何其他操作都無法改變這種狀態。

2）對象狀態只會改變一次。狀態一旦改變後，就不會再發生改變，任何時候都可以得到相同的結果。Promise對象的狀態改變，只有兩種可能：從pending變爲fulfilled和從pending變爲rejected。只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果，這時就稱爲 resolved（已定型）。如果改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。

Tip：Promise狀態：Pending（進行中）、fulfilled（已成功）、rejected（已失敗）。

有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。

二、Promise的基本用法

ES6 規定，Promise對象是一個構造函數，用來生成Promise實例。

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise構造函數接受一個函數作爲參數，該函數的兩個參數分別是resolve和reject。它們是兩個函數，由 JavaScript 引擎提供，不用自己部署。

resolve：將Promise對象的狀態從“未完成”變爲“成功”（即從 pending 變爲 resolved），在異步操作成功時調用，並將異步操作的結果，作爲參數傳遞出去；

reject：將Promise對象的狀態從“未完成”變爲“失敗”（即從 pending 變爲 rejected），在異步操作失敗時調用，並將異步操作報出的錯誤，作爲參數傳遞出去。

Promise實例生成以後，可以用then方法分別指定resolved狀態和rejected狀態的回調函數。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

另外一種寫法：

promise.then(function(value) {
	// success
}).catch(function(error) {
	// failure
});

上面promise對象狀態變爲resolved時會執行then方法指定的回調函數。如果promise狀態變爲rejected，則執行catch方法指定的回調函數。

then方法指定的回調函數將在所有同步任務執行完成後纔會執行，例如：

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

上面新建Promise對象時會立即輸出“Promise”，然後再輸出“Hi”，直到所有同步任務執行完後再執行then方法的回調函數。因此最後輸出“resolved”。

我們再看另外一個例子。

function loadImageAsync(url) {
  // 把Image對象轉換成Promise
  return new Promise(function(resolve, reject) {
  	// 創建Image對象
    const image = new Image();
    // 給Image對象綁定onload事件，當圖片加載完後，當前Promise對象狀態變爲resolved，
    // 然後在返回Image對象
    image.onload = function() {
      resolve(image);
    };
    // 如果圖片加載失敗，當前Promise對象狀態變爲rejected，並然會Error。
    image.onerror = function() {
      reject(new Error('Could not load image at ' + url));
    };
    // 設置圖片url
    image.src = url;
  });
}

const promise = loadImageAsync('img/Koala.jpg');
promise.then((img) => {
	document.body.appendChild(img);
}).catch((e) => {
	console.log(e);
});

上面代碼中，使用Promise包裝了一個圖片加載的異步操作。如果加載成功，就調用resolve方法，否則就調用reject方法。

注意：調用resolve或reject並不會終結 Promise 的參數函數的執行。例如：

new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

上面代碼中，調用resolve(1)以後，後面的console.log(2)還是會執行，並且會首先打印出來。這是因爲立即 resolved 的 Promise 是在本輪事件循環的末尾執行，總是晚於本輪循環的同步任務。

一般來說，調用resolve或reject以後，Promise 的使命就完成了，後繼操作應該放到then方法裏面，而不應該直接寫在resolve或reject的後面。所以，最好在它們前面加上return語句，這樣就不會有意外。

new Promise((resolve, reject) => {
  return resolve(1);
  // 後面的語句不會執行
  console.log(2);
})

三、Promise常用方法

3.1 Promise.prototype.then()

then方法是 Promise對象狀態改變時的回調函數。該方法第一個參數是resolved狀態的回調函數，第二個參數是rejected狀態的回調函數。該方法返回一個新的Promise實例。因此可以在then方法後面繼續使用then方法。

promise.then((value) => {
	// code
}).then((value) => {
	// code
});

上面的代碼使用then方法，依次指定了兩個回調函數。第一個回調函數完成以後，會將返回結果作爲參數，傳入第二個回調函數.

採用鏈式的then，可以指定一組按照次序調用的回調函數。這時，前一個回調函數，有可能返回的還是一個Promise對象（即有異步操作），這時後一個回調函數，就會等待該Promise對象的狀態發生變化，纔會被調用。

3.2 Promise.prototype.catch()

Promise.prototype.catch方法是.then(null, rejection)或.then(undefined, rejection)的別名，用於指定發生錯誤時的回調函數。

promise.then(...).catch((e) => {
	// error
});

如果Promise對象狀態變爲rejected，或者then方法指定的回調函數中發生錯誤，也會被catch方法捕獲。請看下面代碼：

<script>
	const promise = new Promise((resolve, reject) => {
		console.log('promise...');
		// reject(new Error('test')); 
		throw new Error('test');
	});
	promise.then((value) => {
		console.log('then...');
	}).catch((error) => {
		console.log('catch...')
	});
	// promise
	// catch
</script>

上面代碼中，promise拋出一個錯誤，就被catch方法指定的回調函數捕獲。但是，如果 Promise 狀態已經變成resolved，再拋出錯誤是無效的。例如：

const promise = new Promise((resolve, reject) => {
  resolve('ok');
  throw new Error('test');
});

上面代碼中，Promise 在resolve語句後面，再拋出錯誤，不會被捕獲，等於沒有拋出。因爲 Promise 的狀態一旦改變，就永久保持該狀態，不會再變了。

另外，Promise 對象的錯誤具有“冒泡”性質，會一直向後傳遞，直到被捕獲爲止。也就是說，錯誤總是會被下一個catch語句捕獲。

promise
	.then(...)
	.then(...)
	.then(...)
	.catch(...);

上面代碼中，一共有三個then方法，每個then方法都返回一個Promise對象。只要其中一個then方法拋出錯誤，都會被最後一個catch捕獲。

一般來說，不要在then方法裏面定義 Reject 狀態的回調函數（即then的第二個參數），總是使用catch方法，例如：

// 寫法一
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// 寫法二
promise
  .then(function(data) {
    // success
  })
  .catch(function(err) {
    // error
  });

上面代碼中，第二種寫法要好於第一種寫法，理由是第二種寫法可以捕獲前面then方法執行中的錯誤，也更接近同步的寫法（try/catch）。

跟傳統的try/catch代碼塊不同的是，如果沒有使用catch方法指定錯誤處理的回調函數，Promise 對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應。

<script>
	const someAsyncThing = function() {
		return new Promise(function(resolve, reject) {
			// 下面一行會報錯，因爲x沒有聲明
			resolve(x + 2);
		});
	};

	someAsyncThing().then(function() {
		console.log('everything is great');
	});
	
	setTimeout(() => { console.log(123) }, 2000);
	// Uncaught (in promise) ReferenceError: x is not defined(…)
	// 123
</script>

上面代碼中，someAsyncThing函數產生的 Promise 對象，內部有語法錯誤。瀏覽器運行到這一行，會打印出錯誤提示ReferenceError: x is not defined，但是不會退出進程、終止腳本執行，2 秒之後還是會輸出123。這就是說，Promise 內部的錯誤不會影響到 Promise 外部的代碼，通俗的說法就是“Promise 會喫掉錯誤”。

一般總是建議，Promise 對象後面要跟catch方法，這樣可以處理 Promise 內部發生的錯誤。catch方法返回的還是一個 Promise 對象，因此後面還可以接着調用then方法。

<script>
	const someAsyncThing = function() {
		return new Promise(function(resolve, reject) {
			// 下面一行會報錯，因爲x沒有聲明
			resolve(x + 2);
		});
	};

	someAsyncThing()
		.catch(function(error) {
			console.log('catch error');
		})
		.then(function() {
			console.log('everything is great');
		});
	
	setTimeout(() => { console.log(123) }, 2000);
	// catch error
	// everything is great
	// 123
</script>

上面代碼運行完catch方法指定的回調函數，會接着運行後面那個then方法指定的回調函數。如果沒有報錯，則會跳過catch方法。

Promise.resolve()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});
// carry on

上面的代碼因爲沒有報錯，跳過了catch方法，直接執行後面的then方法。此時，要是then方法裏面報錯，就與前面的catch無關了。

catch方法之中，還能再拋出錯誤，例如：

Promise.reject().catch(function(error) {
  console.log('catch error1');
  // 下面一行會報錯，因爲 y 沒有聲明
  y + 2;
}).catch(function(error) {
  console.log('catch error2');
});

// catch error1
// catch error2

上面代碼中，第一個catch方法拋出一個錯誤，第二個catch方法用來捕獲前一個catch方法拋出的錯誤。

3.3 Promise.prototype.finally()

finally方法用於指定不管 Promise 對象最後狀態如何，都會執行的操作。該方法是 ES2018 引入標準的。

promise
	.then(result => {···})
	.catch(error => {···})
	.finally(() => {···});

上面代碼中，不管promise最後的狀態，在執行完then或catch指定的回調函數以後，都會執行finally方法指定的回調函數。

finally方法的回調函數不接受任何參數，這意味着沒有辦法知道，前面的 Promise 狀態到底是fulfilled還是rejected。這表明，finally方法裏面的操作，應該是與狀態無關的，不依賴於 Promise 的執行結果。可以這樣理解，finally本質上是then方法的特例。

promise
  .finally(() => {
    // code
  });

// 等同於
promise
.then(
  result => {
    // code
    return result;
  },
  error => {
    // code
    throw error;
  }
);

上面代碼中，如果不使用finally方法，同樣的語句需要爲成功和失敗兩種情況各寫一次。有了finally方法，則只需要寫一次。

finally方法總是會返回原來的值，例如：

<script>
	new Promise((resolve, reject) => {
		console.log('promise');
		resolve(2);
	})
	.finally(() => {
		console.log('finally');
	})
	.then((value) => {
		console.log('value = ', value);
	});
	// proimse
	// finally
	// value = 2
</script>

3.4 Promise.all()

Promise.all()方法用於將多個 Promise 實例，包裝成一個新的 Promise 實例。

例如：

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

上面代碼中，Promise.all()方法接受一個數組作爲參數，p1、p2、p3都是 Promise 實例，如果不是，就會先調用下面講到的Promise.resolve方法，將參數轉爲 Promise 實例，再進一步處理。

p的狀態由p1、p2、p3決定，分成兩種情況：

情況一：只有p1、p2、p3的狀態都變成fulfilled，p的狀態纔會變成fulfilled，此時p1、p2、p3的返回值組成一個數組，傳遞給p的回調函數。

情況二：只要p1、p2、p3之中有一個被rejected，p的狀態就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調函數。

// 生成一個Promise對象的數組
const promises = [2, 3, 5, 7, 11, 13].map(function (id) {
  return getJSON('/post/' + id + ".json");
});

Promise.all(promises).then(function (posts) {
  // post代表p1、p2、p3組成的數組
  
}).catch(function(reason){
  // ...
});

上面代碼中，promises是包含 6 個 Promise 實例的數組，只有這 6 個實例的狀態都變成fulfilled，或者其中有一個變爲rejected，纔會調用Promise.all方法後面的回調函數。

注意，如果作爲參數的 Promise 實例，自己定義了catch方法，那麼它一旦被rejected，並不會觸發Promise.all()的catch方法。

<script>
	const p1 = new Promise((resolve, reject) => {
	  resolve('hello');
	})
	.then(result => result)
	.catch(e => e);

	const p2 = new Promise((resolve, reject) => {
	  throw new Error('報錯了');
	})
	.then(result => result)
	.catch(e => e); 

	Promise.all([p1, p2])
	.then(result => console.log('result = ', result))
	.catch(e => console.log('error = ', e));
</script>

上面p2有自己的catch，該方法返回的是一個新的 Promise 實例。p2指向的實際上是這個實例。該實例執行完catch方法後，也會變成resolved，導致Promise.all()方法參數裏面的兩個實例都會resolved，因此會調用then方法指定的回調函數，而不會調用catch方法指定的回調函數。如果p2沒有自己的catch方法，就會調用Promise.all()的catch方法。

3.5 Promise.resolve()

該方法可以將一個現有對象轉換爲Promise對象，例如：

Promise.resolve('foo');

// 等價於
new Promise(resolve => resolve('foo'));

Promise.resolve方法的參數分成四種情況：
1）如果參數是 Promise 實例，那麼Promise.resolve將不做任何修改、原封不動地返回這個實例；
2）如果參數是一個thanable對象，該方法就會將該對象轉換成Promise對象，並立即執行thenable對象的then方法；
3）如果參數是一個原始值，或者是一個不具有then方法的對象，則Promise.resolve方法返回一個新的 Promise 對象，狀態爲resolved；
4）如果不帶任何參數，該方法直接返回一個resolved狀態的 Promise 對象；

Tip：thenable對象指的是具有then方法的對象。

值得注意的是，立即resolve()的 Promise 對象，是在本輪“事件循環”（event loop）的結束時執行，而不是在下一輪“事件循環”的開始時。

例如：

setTimeout(function () {
  console.log('three'); // 在下一輪事件循環開始時執行
}, 0);

Promise.resolve().then(function () {
  console.log('two'); // 在本輪事件循環結束時執行
});

console.log('one');
// one
// two
// three

上面代碼中，setTimeout(fn, 0)在下一輪“事件循環”開始時執行，Promise.resolve()在本輪“事件循環”結束時執行，console.log(‘one’)則是立即執行，因此最先輸出。

3.6 Promise.reject()

該方法返回一個新的 Promise 實例，該實例的狀態爲rejected。

const p = Promise.reject('出錯了');

// 等價於
const p = new Promise((resolve, reject) => reject('出錯了'))

注意，Promise.reject()方法的參數，會原封不動地作爲reject的理由，變成後續方法的參數。這一點與Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出錯了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})

上面代碼中，Promise.reject方法的參數是一個thenable對象，執行以後，後面catch方法的參數不是reject拋出的“出錯了”這個字符串，而是thenable對象。