ES6學習-Promise

說明：本文參考阮一峰的ECMAScript 6 入門

1.Promise的含義

Promise是異步程式設計的一種解決方案。簡單來說，就是一個容器，裡面裝着未來才會結束的事件（通常是一個異步操作）結果。

Promise對象代表一個異步操作，有三種狀态：pending（進行中）、fulfilled（已成功）、rejected（已失敗）。這三種狀态隻能由異步操作的結果決定，其它任何操作都不能改變這種狀态，也就是說異步操作結果一出，就不能改變，就好像承諾一樣，一旦說出就不能改變，是以叫Promise(承諾)。

有了Promise對象，就能避免層層嵌套的回調函數。

2.基本用法

通過Promise構造函數，構造一個執行個體。

let promise = new Promise( function (resolve, reject) {
	//...some code
	if (/* 異步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
})
           

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

resolve函數的作用是，在異步操作成功時調用，并将異步操作的結果作為參數傳遞出去；reject函數的作用是，在異步操作失敗時調用，并将錯誤資訊作為參數傳遞出去。

Promise執行個體生成以後，可以調用then()方法分别指定resolved狀态和rejected狀态的回調函數。

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

then方法可以接受兩個回調函數作為參數，第一個回調函數是promise對象的狀态變為resolved時調用，第二個回調函數是promise對象的狀态變為rejected時調用。其中，第二個函數可選，不一定非要提供。這兩個回調函數都接受promise對象傳出的值作為參數。

function timeout(ms) {
	return new Promise((resolve, regect) => {
		setTimeout(resolve, ms, 'done')
	})
}

timeout(100).then((value) => console.log(value))
           

上面代碼中，timeout方法表示傳回一個promise對象，表示過一定時間操作完成後的傳回結果。過了指定的時間（ms參數）以後，promise對象狀态就會變成resolved，就會觸發then方法傳回的結果。

下面是一個操作用Promise對象實作Ajax操作的例子。

const getJSON = function ( url ) {
	const promise = new Promise(function (resolve, reject) {
		const handler = function () {
			if (this.readyState !== 4){
				return;
			}
			if (this.status === 200) {
				resolve(this.response)
			} else {
				reject(new Errpr(this.statusText))
			}
		const client = new XMLHttpRequest()
		client.open("GET", url)
		client.onreadyStatechange = handler
		client.responseType = "json"
		client.setRequestHeader("Accept", "application/json")
		client.send()
	}
	
	})
	return promise
}

getJSON("/post.json").then(function (json) {
	console.log('Contents: ' + json)
}, function (err) {
	console.log('出錯了:   + error')
}) 
           

上面代碼中。getJSON是對擷取json資料的HTTP請求的封裝，并傳回一個promise對象。可以看到，在getJSON的内部，resolve函數和reject函數調用時，都帶有參數。

如果resolve和reject函數被調用時帶有參數，那麼它們的參數會傳給回調函數。

3.Promise.prototype.then()

Promise執行個體，具有then方法，它的作用是為Promise執行個體添加狀态改變時的回調函數。前面說姑婆，then方法的第一個參數時resolved狀态時的回調函數，第二個參數（可選）是rejected狀态時的回調函數。

then方法傳回的是一個新的Promise執行個體（并不是原來的那個Promise執行個體），是以可以采用鍊式寫法（即then方法後面再調用另一個then方法）。

getJSON("/post.json").then(function(json){
	return  json.post
}).then(function(){
	
})
           

上面代碼，使用then方法依次指定了兩個回調函數。第一個回調函數執行完後，會将傳回的結果作為第二個回調函數的參數。

4.Promise.prototype.catch()

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

getJSON(/post.json).then(function (post) {

}).catch(function (error) {
	console.log("出錯了：" + error)
})
           

上面代碼中。getJSON傳回的是一個promise對象，如果該對象狀态為resolved狀态，則會調用then方法指定的回調函數，如果該對象狀态為rejected狀态，則會調用catch

方法指定的回調函數，處理着個錯誤。

一般來說，不要在then方法裡面定義rejected狀态的回調函數（then方法的第二個參數），總是使用catch方法。

//bad
promise.then(function (data) {

}, function (error) {

})

//good
promise
	.then(function (data) {

	})
	.catch(function (error) {

	})