回調(diào)地獄
readFile("example.txt", function(err, contents) {
if (err) {
throw err;
}
writeFile("example.txt", function(err) {
if (err) {
throw err;
}
console.log("File was written!");
});
});
method1(function(err, result) {
if (err) {
throw err;
}
method2(function(err, result) {
if (err) {
throw err;
}
method3(function(err, result) {
if (err) {
throw err;
}
method4(function(err, result) {
if (err) {
throw err;
}
method5(result);
});
});
});
});
回調(diào)地獄嵌套多個(gè)方法調(diào)用會(huì)創(chuàng)建錯(cuò)綜復(fù)雜的代碼，會(huì)難以理解與調(diào)試。當(dāng)想要實(shí)現(xiàn)更復(fù)雜的功能時(shí)，回調(diào)函數(shù)也會(huì)存在問(wèn)題。
Promise 定義
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大。它由社區(qū)最早提出和實(shí)現(xiàn)，ES6 將其寫(xiě)進(jìn)了語(yǔ)言標(biāo)準(zhǔn)，統(tǒng)一了用法，原生提供了 Promise 對(duì)象。
所謂Promise，簡(jiǎn)單說(shuō)就是一個(gè)容器，里面保存著某個(gè)未來(lái)才會(huì)結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果。從語(yǔ)法上說(shuō)，Promise 是一個(gè)對(duì)象，從它可以獲取異步操作的消息。Promise 提供統(tǒng)一的 API，各種異步操作都可以用同樣的方法進(jìn)行處理。
Promise 特點(diǎn)
對(duì)象的狀態(tài)不受外界影響。Promise 對(duì)象代表一個(gè)異步操作，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和 rejected（已失?。?。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)，任何其他操作都無(wú)法改變這個(gè)狀態(tài)。
一旦狀態(tài)改變，就不會(huì)再變，任何時(shí)候都可以得到這個(gè)結(jié)果。Promise對(duì)象的狀態(tài)改變，只有兩種可能：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected。只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會(huì)再變了，會(huì)一直保持這個(gè)結(jié)果。如果改變已經(jīng)發(fā)生了，你再對(duì) Promise 對(duì)象添加回調(diào)函數(shù)，也會(huì)立即得到這個(gè)結(jié)果。這與事件（Event）完全不同，事件的特點(diǎn)是，如果你錯(cuò)過(guò)了它，再去監(jiān)聽(tīng)，是得不到結(jié)果的。
有了Promise對(duì)象，就可以將異步操作以同步操作的流程表達(dá)出來(lái)，避免了層層嵌套的回調(diào)函數(shù)。此外，Promise對(duì)象提供統(tǒng)一的接口，使得控制異步操作更加容易。
基本用法
Promise 對(duì)象是一個(gè)構(gòu)造函數(shù)，用來(lái)生成 Promise 實(shí)例。
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 異步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
Promise構(gòu)造函數(shù)接受一個(gè)函數(shù)作為參數(shù)，該函數(shù)的兩個(gè)參數(shù)分別是 resolve 和 reject。它們是兩個(gè)函數(shù)，由 JavaScript 引擎提供，不用自己部署。
- resolve 函數(shù)的作用是，將 Promise 對(duì)象的狀態(tài)從未完成變?yōu)槌晒Γ磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用，并將異步操作的結(jié)果，作為參數(shù)傳遞出去。
- reject 函數(shù)的作用是，將 Promise 對(duì)象的狀態(tài)從未完成變?yōu)槭。磸?pending 變?yōu)?rejected），在異步操作失敗時(shí)調(diào)用，并將異步操作報(bào)出的錯(cuò)誤，作為參數(shù)傳遞出去。
Promise 實(shí)例生成以后，可以用 then 方法分別指定 resolved 狀態(tài)和 rejected 狀態(tài)的回調(diào)函數(shù)。
promise.then(function(value) {
// success
}, function(error) {
// failure
});
then 方法可以接受兩個(gè)回調(diào)函數(shù)作為參數(shù)。第一個(gè)回調(diào)函數(shù)是 Promise 對(duì)象的狀態(tài)變?yōu)?resolved 時(shí)調(diào)用，第二個(gè)回調(diào)函數(shù)是 Promise 對(duì)象的狀態(tài)變?yōu)?rejected 時(shí)調(diào)用。其中，第二個(gè)函數(shù)是可選的，不一定要提供。這兩個(gè)函數(shù)都接受 Promise 對(duì)象傳出的值作為參數(shù)。
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve('done'), ms);
});
}
timeout(100).then((value) => {
console.log(value);
});
如果調(diào)用 resolve 函數(shù)和 reject 函數(shù)時(shí)帶有參數(shù)，那么它們的參數(shù)會(huì)被傳遞給回調(diào)函數(shù)。 reject 函數(shù)的參數(shù)通常是 Error 對(duì)象的實(shí)例，表示拋出的錯(cuò)誤；resolve 函數(shù)的參數(shù)除了正常的值以外，還可能是另一個(gè) Promise 實(shí)例。
const p1 = new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('fail')), 3000)
})
const p2 = new Promise(function (resolve, reject) {
setTimeout(() => resolve(p1), 1000)
})
p2.then(result => console.log(result)).catch(error => console.log(error))
// Error: fail
p1 是一個(gè) Promise，3 秒之后變?yōu)?rejected。p2 的狀態(tài)在 1 秒之后改變，resolve 方法返回的是 p1。由于 p2 返回的是另一個(gè) Promise，導(dǎo)致 p2 自己的狀態(tài)無(wú)效了，由 p1 的狀態(tài)決定 p2 的狀態(tài)。所以，后面的 then 語(yǔ)句都變成針對(duì)后者 p1。又過(guò)了 2 秒，p1 變?yōu)閞ejected，導(dǎo)致觸發(fā) catch 方法指定的回調(diào)函數(shù)。
注意，調(diào)用 resolve 或 reject 并不會(huì)終結(jié) Promise 的參數(shù)函數(shù)的執(zhí)行。
new Promise((resolve, reject) => {
resolve(1);
console.log(2);
}).then(r => {
console.log(r);
});
// 2
// 1
調(diào)用 resolve(1) 以后，后面的 console.log(2) 還是會(huì)執(zhí)行，并且會(huì)首先打印出來(lái)。這是因?yàn)榱⒓?resolved 的 Promise 是在本輪事件循環(huán)的末尾執(zhí)行，總是晚于本輪循環(huán)的同步任務(wù)。
一般來(lái)說(shuō)，調(diào)用 resolve 或 reject 以后，Promise 的使命就完成了，后繼操作應(yīng)該放到 then 方法里面，而不應(yīng)該直接寫(xiě)在 resolve 或 reject 的后面。所以，最好在它們前面加上return語(yǔ)句，這樣就不會(huì)有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的語(yǔ)句不會(huì)執(zhí)行
console.log(2);
})
finally()
finally 方法用于指定不管 Promise 對(duì)象最后狀態(tài)如何，都會(huì)執(zhí)行的操作。該方法是 ES2018 引入標(biāo)準(zhǔn)的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
不管 promise 最后的狀態(tài)，在執(zhí)行完 then 或 catch 指定的回調(diào)函數(shù)以后，都會(huì)執(zhí)行 finally 方法指定的回調(diào)函數(shù)。
已決的 Promise
const p = Promise.resolve('foo')
// 等價(jià)于
const p = new Promise(resolve => resolve('foo'))
const p = Promise.reject('出錯(cuò)了');
// 等價(jià)于
const p = new Promise((resolve, reject) => reject('出錯(cuò)了'))
返回一個(gè)狀態(tài)已經(jīng)決定的 Promise 實(shí)例。
執(zhí)行器錯(cuò)誤
如果在執(zhí)行器內(nèi)部拋出了錯(cuò)誤，那么 Promise 的拒絕處理函數(shù)就會(huì)被調(diào)用。
let promise = new Promise(function(resolve, reject) {
throw new Error("Explosion!");
});
promise.catch(function(error) {
console.log(error.message); // "Explosion!"
});
串聯(lián)
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
p1.then(function(value) {
console.log(value);
}).then(function() {
console.log("Finished");
});
串聯(lián)版本的代碼中對(duì) p1.then() 的調(diào)用返回了第二個(gè) Promise ，又在這之上調(diào)用了 then() 。僅當(dāng)?shù)谝粋€(gè) Promise 已被決議后，第二個(gè) then() 的完成處理函數(shù)才會(huì)被調(diào)用。
響應(yīng)多個(gè) Promise
- Promise.all() 方法
接收單個(gè)可迭代對(duì)象(如數(shù)組)作為參數(shù)，并返回一個(gè) Promise 。這個(gè)可迭代對(duì)象的元素都是 Promise ，只有在它們都完成后，所返回的 Promise 才會(huì)被完成。
let p1 = new Promise(function(resolve, reject) {
resolve(42);
});
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.all([p1, p2, p3]);
p4.then(function(value) {
console.log(Array.isArray(value)); // true
console.log(value[0]); // 42
console.log(value[1]); // 43
console.log(value[2]); // 44
});
- Promise.race() 方法
接受一個(gè)包含需監(jiān)視的 Promise 的可迭代對(duì)象，并返回一個(gè)新的 Promise ，但一旦來(lái)源 Promise 中有一個(gè)被解決，所返回的 Promise 就會(huì)立刻被解決。與等待所有 Promise 完成的 Promise.all() 方法不同，在來(lái)源 Promise 中任意一個(gè)被完成時(shí)， Promise.race() 方法所返回的 Promise 就能作出響應(yīng)。
let p1 = Promise.resolve(42);
let p2 = new Promise(function(resolve, reject) {
resolve(43);
});
let p3 = new Promise(function(resolve, reject) {
resolve(44);
});
let p4 = Promise.race([p1, p2, p3]);
p4.then(function(value) {
console.log(value); // 42
});
Promise 缺點(diǎn)
- 無(wú)法取消Promise，一旦新建它就會(huì)立即執(zhí)行，無(wú)法中途取消。
- 如果不設(shè)置回調(diào)函數(shù)，Promise內(nèi)部拋出的錯(cuò)誤，不會(huì)反應(yīng)到外部。
- 當(dāng)處于pending 狀態(tài)時(shí)，無(wú)法得知目前進(jìn)展到哪一個(gè)階段（剛剛開(kāi)始還是即將完成）。
async
- async 表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果。
- async 函數(shù)返回一個(gè) Promise 對(duì)象。
- async 函數(shù)內(nèi)部 return 語(yǔ)句返回的值，會(huì)成為 then 方法回調(diào)函數(shù)的參數(shù)。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面代碼中，函數(shù) f 內(nèi)部 return 命令返回的值，會(huì)被 then 方法回調(diào)函數(shù)接收到。
- async 函數(shù)內(nèi)部拋出錯(cuò)誤，會(huì)導(dǎo)致返回的 Promise 對(duì)象變?yōu)?reject 狀態(tài)。拋出的錯(cuò)誤對(duì)象會(huì)被 catch 方法回調(diào)函數(shù)接收到。
async function f() {
throw new Error('出錯(cuò)了');
}
f().catch(
e => console.log(e)
)
// Error: 出錯(cuò)了
- async 函數(shù)返回的 Promise 對(duì)象，必須等到內(nèi)部所有 await 命令后面的 Promise 對(duì)象執(zhí)行完，才會(huì)發(fā)生狀態(tài)改變，除非遇到 return 語(yǔ)句或者拋出錯(cuò)誤。也就是說(shuō)，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會(huì)執(zhí)行then方法指定的回調(diào)函數(shù)。
async function asyncTest() {
let getUrl = await fetch();
console.log(getUrl);
let downloadUrl = await download();
console.log(downloadUrl);
return 'complete';
}
asyncTest().then(console.log)
function fetch() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('fetchDone');
}, 1000);
});
}
function download() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('downloadDone');
}, 2000);
});
}
上面代碼中，模擬了一個(gè)抓取和一個(gè)下載，只有這兩個(gè)操作全部完成，才會(huì)執(zhí)行 then 方法里面的 console.log。
await
- 正常情況下，await 命令后面是一個(gè) Promise 對(duì)象。如果不是，會(huì)被轉(zhuǎn)成一個(gè)立即 resolve 的 Promise 對(duì)象。
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
await 命令的參數(shù)是數(shù)值123，它被轉(zhuǎn)成 Promise 對(duì)象，并立即 resolve。
- await 命令后面的 Promise 對(duì)象如果變?yōu)?reject 狀態(tài)，則 reject 的參數(shù)會(huì)被 catch 方法的回調(diào)函數(shù)接收到。
async function f() {
await Promise.reject('出錯(cuò)了');
}
f().then(v => console.log(v)).catch(e => console.log(e))
// 出錯(cuò)了
注意，上面代碼中，await 語(yǔ)句前面沒(méi)有 return，但是 reject 方法的參數(shù)依然傳入了 catch 方法的回調(diào)函數(shù)。這里如果在 await 前面加上 return，效果是一樣的。
- 只要一個(gè) await 語(yǔ)句后面的 Promise 變?yōu)?reject，那么整個(gè) async 函數(shù)都會(huì)中斷執(zhí)行。
async function f() {
await Promise.reject('出錯(cuò)了');
await Promise.resolve('hello world'); // 不會(huì)執(zhí)行
}
- 有時(shí)，我們希望即使前一個(gè)異步操作失敗，也不要中斷后面的異步操作。這時(shí)可以將第一個(gè) await 放在 try...catch 結(jié)構(gòu)里面，這樣不管這個(gè)異步操作是否成功，第二個(gè) await 都會(huì)執(zhí)行。
async function f() {
try {
await Promise.reject('出錯(cuò)了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// hello world
另一種方法是 await 后面的 Promise 對(duì)象再跟一個(gè) catch 方法，處理前面可能出現(xiàn)的錯(cuò)誤。
async function f() {
await Promise.reject('出錯(cuò)了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// 出錯(cuò)了
// hello world
注意點(diǎn)
- await 命令后面的 Promise 對(duì)象，運(yùn)行結(jié)果可能是 rejected，所以最好把 await 命令放在 try...catch 代碼塊中。
async function myFunction() {
try {
await somethingThatReturnsAPromise();
} catch (err) {
console.log(err);
}
}
// 另一種寫(xiě)法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err);
});
}
- 多個(gè)await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)。
// 寫(xiě)法一
async function test() {
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
}
function getFoo() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('getFoo');
resolve()
}, 2000);
})
}
function getBar() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log('getBar');
resolve()
}, 2000);
})
}
test()
// 寫(xiě)法二
async function test() {
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
}
- await 命令只能用在 async 函數(shù)之中，如果用在普通函數(shù)，就會(huì)報(bào)錯(cuò)。
async function test() {
let promises = [function1, function2, function3]
promises.forEach(function (fun) {
const t = await fun();
console.log(t)
});
}
function function1() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function1')
}, 2000)
})
}
function function2() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function2')
}, 2000)
})
}
function function3() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve('function3')
}, 2000)
})
}
test()
- 如果將 forEach 方法的參數(shù)改成 async 函數(shù)，也有問(wèn)題。
promises.forEach(async function (fun) {
const t = await fun();
console.log(t)
});
上面代碼可能不會(huì)正常工作，原因是這時(shí)三個(gè)異步操作將是并發(fā)執(zhí)行，也就是同時(shí)執(zhí)行，而不是繼發(fā)執(zhí)行。正確的寫(xiě)法是采用 for 循環(huán)。
for (let i of promises) {
const t = await i()
console.log(t)
}
- 如果確實(shí)希望多個(gè)請(qǐng)求并發(fā)執(zhí)行，可以使用 Promise.all 方法。當(dāng)三個(gè)請(qǐng)求都 resolved 時(shí)，下面兩種寫(xiě)法效果相同。
async function dbFuc(db) {
async function test() {
let promises = [function1(), function2(), function3()]
let results = await Promise.all(promises);
console.log(results)
}
