ES6 原生提供了 Promise 對象。所謂 Promise 對象，就是代表了某個未來才會知道結(jié)果的事件（通常是一個異步操作），并且這個事件提供統(tǒng)一的 API，可供進一步處理。
有了 Promise 對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise 對象提供的接口，使得控制異步操作更加容易。Promise 對象的概念的詳細解釋，請參考《JavaScript標準參考教程》。
ES6 的 Promise 對象是一個構(gòu)造函數(shù)，用來生成 Promise 實例。
var promise = new Promise(function(resolve, reject) {
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
});
上面代碼中，Promise 構(gòu)造函數(shù)接受一個函數(shù)作為參數(shù)，該函數(shù)的兩個參數(shù)分別是 resolve 方法和 reject 方法。如果異步操作成功，則用 resolve 方法將 Promise 對象的狀態(tài)，從“未完成”變?yōu)椤俺晒Α保磸?pending 變?yōu)?resolved）；如果異步操作失敗，則用 reject 方法將 Promise 對象的狀態(tài)，從“未完成”變?yōu)椤笆 保磸?pending 變?yōu)?rejected）。
Promise 實例生成以后，可以用 then 方法分別指定 resolve 方法和 reject 方法的回調(diào)函數(shù)。
下面是一個使用 Promise 對象的簡單例子。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
timeout(100).then(() => {
console.log('done');
});
上面代碼中，timeout 方法返回一個 Promise 實例，表示一段時間以后才會發(fā)生的結(jié)果。一旦 Promise 對象的狀態(tài)變?yōu)?resolved，就會觸發(fā) then 方法綁定的回調(diào)函數(shù)。
下面是一個用 Promise 對象實現(xiàn)的 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.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);
});
上面代碼中，getJSON 是對 XMLHttpRequest 對象的封裝，用于發(fā)出一個針對 JSON 數(shù)據(jù)的 HTTP 請求，并且返回一個 Promise 對象。需要注意的是，在 getJSON 內(nèi)部，resolve 方法和 reject 方法調(diào)用時，都帶有參數(shù)。
如果調(diào)用 resolve 方法和 reject 方法時帶有參數(shù)，那么它們的參數(shù)會被傳遞給回調(diào)函數(shù)。reject 方法的參數(shù)通常是 Error 對象的實例，表示拋出的錯誤；resolve 方法的參數(shù)除了正常的值以外，還可能是另一個 Promise 實例，表示異步操作的結(jié)果有可能是一個值，也有可能是另一個異步操作，比如像下面這樣。
var p1 = new Promise(function(resolve, reject){
// ...
});
var p2 = new Promise(function(resolve, reject){
// ...
resolve(p1);
})上面代碼中，p1 和 p2 都是 Promise 的實例，但是 p2 的 resolve 方法將 p1 作為參數(shù)，p1 的狀態(tài)就會傳遞給 p2。
注意，這時 p1 的狀態(tài)決定了 p2 的狀態(tài)。如果 p1 的狀態(tài)是 pending，那么 p2 的回調(diào)函數(shù)就會等待 p1 的狀態(tài)改變；如果 p1 的狀態(tài)已經(jīng)是 fulfilled 或者 rejected，那么 p2 的回調(diào)函數(shù)將會立刻執(zhí)行。
Promise.prototype.then 方法返回的是一個新的Promise對象，因此可以采用鏈式寫法，即then方法后面再調(diào)用另一個then方法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// ...
});
上面的代碼使用then方法，依次指定了兩個回調(diào)函數(shù)。第一個回調(diào)函數(shù)完成以后，會將返回結(jié)果作為參數(shù)，傳入第二個回調(diào)函數(shù)。
如果前一個回調(diào)函數(shù)返回的是Promise對象，這時后一個回調(diào)函數(shù)就會等待該Promise對象有了運行結(jié)果，才會進一步調(diào)用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// ...
});
then方法還可以接受第二個參數(shù)，表示Promise對象的狀態(tài)變?yōu)閞ejected時的回調(diào)函數(shù)。
Promise.prototype.catch方法是Promise.prototype.then(null, rejection)的別名，用于指定發(fā)生錯誤時的回調(diào)函數(shù)。
getJSON("/posts.json").then(function(posts) {
// ...
}).catch(function(error) {
// 處理前一個回調(diào)函數(shù)運行時發(fā)生的錯誤
console.log('發(fā)生錯誤！', error);
});
上面代碼中，getJSON方法返回一個Promise對象，如果該對象運行正常，則會調(diào)用then方法指定的回調(diào)函數(shù)；如果該方法拋出錯誤，則會調(diào)用catch方法指定的回調(diào)函數(shù)，處理這個錯誤。
下面是一個例子。
var promise = new Promise(function(resolve, reject) {
throw new Error('test')
});
promise.catch(function(error) { console.log(error) });
// Error: test
上面代碼中，Promise拋出一個錯誤，就被catch方法指定的回調(diào)函數(shù)捕獲。
如果Promise狀態(tài)已經(jīng)變成resolved，再拋出錯誤是無效的。
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) });
// ok
上面代碼中，Promise在resolve語句后面，再拋出錯誤，不會被捕獲，等于沒有拋出。
Promise對象的錯誤具有“冒泡”性質(zhì)，會一直向后傳遞，直到被捕獲為止。也就是說，錯誤總是會被下一個catch語句捕獲。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 處理前面三個Promise產(chǎn)生的錯誤
});
上面代碼中，一共有三個Promise對象：一個由getJSON產(chǎn)生，兩個由then產(chǎn)生。它們之中任何一個拋出的錯誤，都會被最后一個catch捕獲。
跟傳統(tǒng)的try/catch代碼塊不同的是，如果沒有使用catch方法指定錯誤處理的回調(diào)函數(shù)，Promise對象拋出的錯誤不會傳遞到外層代碼，即不會有任何反應。
var someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
console.log('everything is great');
});
上面代碼中，someAsyncThing函數(shù)產(chǎn)生的Promise對象會報錯，但是由于沒有調(diào)用catch方法，這個錯誤不會被捕獲，也不會傳遞到外層代碼，導致運行后沒有任何輸出。
var promise = new Promise(function(resolve, reject) {
resolve("ok");
setTimeout(function() { throw new Error('test') }, 0)
});
promise.then(function(value) { console.log(value) });
// ok
// Uncaught Error: test
上面代碼中，Promise指定在下一輪“事件循環(huán)”再拋出錯誤，結(jié)果由于沒有指定catch語句，就冒泡到最外層，成了未捕獲的錯誤。
Node.js有一個unhandledRejection事件，專門監(jiān)聽未捕獲的reject錯誤。
process.on('unhandledRejection', function (err, p) {
console.error(err.stack)
});上面代碼中，unhandledRejection事件的監(jiān)聽函數(shù)有兩個參數(shù)，第一個是錯誤對象，第二個是報錯的Promise實例，它可以用來了解發(fā)生錯誤的環(huán)境信息。。
需要注意的是，catch方法返回的還是一個Promise對象，因此后面還可以接著調(diào)用then方法。
var someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
}).then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
// carry on
上面代碼運行完catch方法指定的回調(diào)函數(shù)，會接著運行后面那個then方法指定的回調(diào)函數(shù)。
catch方法之中，還能再拋出錯誤。
var someAsyncThing = function() {
return new Promise(function(resolve, reject) {
// 下面一行會報錯，因為x沒有聲明
resolve(x + 2);
});
};
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行會報錯，因為y沒有聲明
y + 2;
}).then(function() {
console.log('carry on');
});
// oh no [ReferenceError: x is not defined]
上面代碼中，catch方法拋出一個錯誤，因為后面沒有別的catch方法了，導致這個錯誤不會被捕獲，也不會到傳遞到外層。如果改寫一下，結(jié)果就不一樣了。
someAsyncThing().then(function() {
return someOtherAsyncThing();
}).catch(function(error) {
console.log('oh no', error);
// 下面一行會報錯，因為y沒有聲明
y + 2;
}).catch(function(error) {
console.log('carry on', error);
});
// oh no [ReferenceError: x is not defined]
// carry on [ReferenceError: y is not defined]
上面代碼中，第二個catch方法用來捕獲，前一個catch方法拋出的錯誤。
Promise.all方法用于將多個Promise實例，包裝成一個新的Promise實例。
var p = Promise.all([p1,p2,p3]);
上面代碼中，Promise.all方法接受一個數(shù)組作為參數(shù)，p1、p2、p3都是Promise對象的實例。（Promise.all方法的參數(shù)不一定是數(shù)組，但是必須具有iterator接口，且返回的每個成員都是Promise實例。）
p的狀態(tài)由p1、p2、p3決定，分成兩種情況。
（1）只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會變成fulfilled，此時p1、p2、p3的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。
（2）只要p1、p2、p3之中有一個被rejected，p的狀態(tài)就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調(diào)函數(shù)。
下面是一個具體的例子。
// 生成一個Promise對象的數(shù)組
var promises = [2, 3, 5, 7, 11, 13].map(function(id){
return getJSON("/post/" + id + ".json");
});
Promise.all(promises).then(function(posts) {
// ...
}).catch(function(reason){
// ...
});
Promise.race方法同樣是將多個Promise實例，包裝成一個新的Promise實例。
var p = Promise.race([p1,p2,p3]);
上面代碼中，只要p1、p2、p3之中有一個實例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個率先改變的Promise實例的返回值，就傳遞給p的返回值。
如果Promise.all方法和Promise.race方法的參數(shù)，不是Promise實例，就會先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為Promise實例，再進一步處理。
有時需要將現(xiàn)有對象轉(zhuǎn)為Promise對象，Promise.resolve方法就起到這個作用。
var jsPromise = Promise.resolve($.ajax('/whatever.json'));
上面代碼將jQuery生成deferred對象，轉(zhuǎn)為一個新的ES6的Promise對象。
如果Promise.resolve方法的參數(shù)，不是具有then方法的對象（又稱thenable對象），則返回一個新的Promise對象，且它的狀態(tài)為fulfilled。
var p = Promise.resolve('Hello');
p.then(function (s){
console.log(s)
});
// Hello
上面代碼生成一個新的Promise對象的實例p，它的狀態(tài)為fulfilled，所以回調(diào)函數(shù)會立即執(zhí)行，Promise.resolve方法的參數(shù)就是回調(diào)函數(shù)的參數(shù)。
所以，如果希望得到一個Promise對象，比較方便的方法就是直接調(diào)用Promise.resolve方法。
var p = Promise.resolve();
p.then(function () {
// ...
});
上面代碼的變量p就是一個Promise對象。
如果Promise.resolve方法的參數(shù)是一個Promise對象的實例，則會被原封不動地返回。
Promise.reject(reason)方法也會返回一個新的Promise實例，該實例的狀態(tài)為rejected。Promise.reject方法的參數(shù)reason，會被傳遞給實例的回調(diào)函數(shù)。
var p = Promise.reject('出錯了');
p.then(null, function (s){
console.log(s)
});
// 出錯了
上面代碼生成一個Promise對象的實例p，狀態(tài)為rejected，回調(diào)函數(shù)會立即執(zhí)行。
使用Generator函數(shù)管理流程，遇到異步操作的時候，通常返回一個Promise對象。
function getFoo () {
return new Promise(function (resolve, reject){
resolve('foo');
});
}
var g = function* () {
try {
var foo = yield getFoo();
console.log(foo);
} catch (e) {
console.log(e);
}
};
function run (generator) {
var it = generator();
function go(result) {
if (result.done) return result.value;
return result.value.then(function (value) {
return go(it.next(value));
}, function (error) {
return go(it.throw(value));
});
}
go(it.next());
}
run(g);
上面代碼的Generator函數(shù)g之中，有一個異步操作getFoo，它返回的就是一個Promise對象。函數(shù)run用來處理這個Promise對象，并調(diào)用下一個next方法。
async函數(shù)與Promise、Generator函數(shù)一樣，是用來取代回調(diào)函數(shù)、解決異步操作的一種方法。它本質(zhì)上是Generator函數(shù)的語法糖。async函數(shù)并不屬于ES6，而是被列入了ES7，但是traceur、Babel.js、regenerator等轉(zhuǎn)碼器已經(jīng)支持這個功能，轉(zhuǎn)碼后立刻就能使用。
下面是一個Generator函數(shù)，依次讀取兩個文件。
var fs = require('fs');
var readFile = function (fileName){
return new Promise(function (resolve, reject){
fs.readFile(fileName, function(error, data){
if (error) reject(error);
resolve(data);
});
});
};
var gen = function* (){
var f1 = yield readFile('/etc/fstab');
var f2 = yield readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};上面代碼中，readFile函數(shù)是fs.readFile的Promise版本。
寫成async函數(shù)，就是下面這樣。
var asyncReadFile = async function (){
var f1 = await readFile('/etc/fstab');
var f2 = await readFile('/etc/shells');
console.log(f1.toString());
console.log(f2.toString());
};一比較就會發(fā)現(xiàn)，async函數(shù)就是將Generator函數(shù)的星號（*）替換成async，將yield替換成await，僅此而已。
async函數(shù)對Generator函數(shù)的改進，體現(xiàn)在以下三點。
（1）內(nèi)置執(zhí)行器。Generator函數(shù)的執(zhí)行必須靠執(zhí)行器，而async函數(shù)自帶執(zhí)行器。也就是說，async函數(shù)的執(zhí)行，與普通函數(shù)一模一樣，只要一行。
var result = asyncReadFile();（2）更好的語義。async和await，比起星號和yield，語義更清楚了。async表示函數(shù)里有異步操作，await表示緊跟在后面的表達式需要等待結(jié)果。
（3）更廣的適用性。co函數(shù)庫約定，yield命令后面只能是Thunk函數(shù)或Promise對象，而async函數(shù)的await命令后面，可以跟Promise對象和原始類型的值（數(shù)值、字符串和布爾值，但這時等同于同步操作）。
async函數(shù)的實現(xiàn)，就是將Generator函數(shù)和自動執(zhí)行器，包裝在一個函數(shù)里。
async function fn(args){
// ...
}
// 等同于
function fn(args){
return spawn(function*() {
// ...
});
}所有的async函數(shù)都可以寫成上面的第二種形式，其中的spawn函數(shù)就是自動執(zhí)行器。
下面給出spawn函數(shù)的實現(xiàn)，基本就是前文自動執(zhí)行器的翻版。
function spawn(genF) {
return new Promise(function(resolve, reject) {
var gen = genF();
function step(nextF) {
try {
var next = nextF();
} catch(e) {
return reject(e);
}
if(next.done) {
return resolve(next.value);
}
Promise.resolve(next.value).then(function(v) {
step(function() { return gen.next(v); });
}, function(e) {
step(function() { return gen.throw(e); });
});
}
step(function() { return gen.next(undefined); });
});
}同Generator函數(shù)一樣，async函數(shù)返回一個Promise對象，可以使用then方法添加回調(diào)函數(shù)。當函數(shù)執(zhí)行的時候，一旦遇到await就會先返回，等到觸發(fā)的異步操作完成，再接著執(zhí)行函數(shù)體內(nèi)后面的語句。
下面是一個例子。
async function getStockPriceByName(name) {
var symbol = await getStockSymbol(name);
var stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result){
console.log(result);
});
上面代碼是一個獲取股票報價的函數(shù)，函數(shù)前面的async關(guān)鍵字，表明該函數(shù)內(nèi)部有異步操作。調(diào)用該函數(shù)時，會立即返回一個Promise對象。
上面的例子用Generator函數(shù)表達，就是下面這樣。
function getStockPriceByName(name) {
return spawn(function*(name) {
var symbol = yield getStockSymbol(name);
var stockPrice = yield getStockPrice(symbol);
return stockPrice;
});
}上面的例子中，spawn函數(shù)是一個自動執(zhí)行器，由JavaScript引擎內(nèi)置。它的參數(shù)是一個Generator函數(shù)。async...await結(jié)構(gòu)本質(zhì)上，是在語言層面提供的異步任務的自動執(zhí)行器。
下面是一個更一般性的例子，指定多少毫秒后輸出一個值。
function timeout(ms) {
return new Promise((resolve) => {
setTimeout(resolve, ms);
});
}
async function asyncPrint(value, ms) {
await timeout(ms);
console.log(value)
}
asyncPrint('hello world', 50);
上面代碼指定50毫秒以后，輸出“hello world”。
await命令后面的Promise對象，運行結(jié)果可能是rejected，所以最好把await命令放在try...catch代碼塊中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一種寫法
async function myFunction() {
await somethingThatReturnsAPromise().catch(function (err){
console.log(err);
};
}
await命令只能用在async函數(shù)之中，如果用在普通函數(shù)，就會報錯。
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 報錯
docs.forEach(function (doc) {
await db.post(doc);
});
}
上面代碼會報錯，因為await用在普通函數(shù)之中了。但是，如果將forEach方法的參數(shù)改成async函數(shù)，也有問題。
async function dbFuc(db) {
let docs = [{}, {}, {}];
// 可能得到錯誤結(jié)果
docs.forEach(async function (doc) {
await db.post(doc);
});
}
上面代碼可能不會正常工作，原因是這時三個db.post操作將是并發(fā)執(zhí)行，也就是同時執(zhí)行，而不是繼發(fā)執(zhí)行。正確的寫法是采用for循環(huán)。
async function dbFuc(db) {
let docs = [{}, {}, {}];
for (let doc of docs) {
await db.post(doc);
}
}
如果確實希望多個請求并發(fā)執(zhí)行，可以使用Promise.all方法。
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = await Promise.all(promises);
console.log(results);
}
// 或者使用下面的寫法
async function dbFuc(db) {
let docs = [{}, {}, {}];
let promises = docs.map((doc) => db.post(doc));
let results = [];
for (let promise of promises) {
results.push(await promise);
}
console.log(results);
}
ES6將await增加為保留字。使用這個詞作為標識符，在ES5是合法的，在ES6將拋出SyntaxError。
我們通過一個例子，來看Async函數(shù)與Promise、Generator函數(shù)的區(qū)別。
假定某個DOM元素上面，部署了一系列的動畫，前一個動畫結(jié)束，才能開始后一個。如果當中有一個動畫出錯，就不再往下執(zhí)行，返回上一個成功執(zhí)行的動畫的返回值。
首先是Promise的寫法。
function chainAnimationsPromise(elem, animations) {
// 變量ret用來保存上一個動畫的返回值
var ret = null;
// 新建一個空的Promise
var p = Promise.resolve();
// 使用then方法，添加所有動畫
for(var anim in animations) {
p = p.then(function(val) {
ret = val;
return anim(elem);
})
}
// 返回一個部署了錯誤捕捉機制的Promise
return p.catch(function(e) {
/* 忽略錯誤，繼續(xù)執(zhí)行 */
}).then(function() {
return ret;
});
}
雖然Promise的寫法比回調(diào)函數(shù)的寫法大大改進，但是一眼看上去，代碼完全都是Promise的API（then、catch等等），操作本身的語義反而不容易看出來。
接著是Generator函數(shù)的寫法。
function chainAnimationsGenerator(elem, animations) {
return spawn(function*() {
var ret = null;
try {
for(var anim of animations) {
ret = yield anim(elem);
}
} catch(e) {
/* 忽略錯誤，繼續(xù)執(zhí)行 */
}
return ret;
});
}
上面代碼使用Generator函數(shù)遍歷了每個動畫，語義比Promise寫法更清晰，用戶定義的操作全部都出現(xiàn)在spawn函數(shù)的內(nèi)部。這個寫法的問題在于，必須有一個任務運行器，自動執(zhí)行Generator函數(shù)，上面代碼的spawn函數(shù)就是自動執(zhí)行器，它返回一個Promise對象，而且必須保證yield語句后面的表達式，必須返回一個Promise。
最后是Async函數(shù)的寫法。
async function chainAnimationsAsync(elem, animations) {
var ret = null;
try {
for(var anim of animations) {
ret = await anim(elem);
}
} catch(e) {
/* 忽略錯誤，繼續(xù)執(zhí)行 */
}
return ret;
}
可以看到Async函數(shù)的實現(xiàn)最簡潔，最符合語義，幾乎沒有語義不相關(guān)的代碼。它將Generator寫法中的自動執(zhí)行器，改在語言層面提供，不暴露給用戶，因此代碼量最少。如果使用Generator寫法，自動執(zhí)行器需要用戶自己提供。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多