回調(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)用會創(chuàng)建錯(cuò)綜復(fù)雜的代碼限煞，會難以理解與調(diào)試。當(dāng)想要實(shí)現(xiàn)更復(fù)雜的功能時(shí)员凝，回調(diào)函數(shù)也會存在問題署驻。
Promise 定義
Promise 是異步編程的一種解決方案，比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大健霹。它由社區(qū)最早提出和實(shí)現(xiàn)旺上，ES6 將其寫進(jìn)了語言標(biāo)準(zhǔn)，統(tǒng)一了用法糖埋，原生提供了 Promise 對象宣吱。
所謂Promise，簡單說就是一個(gè)容器瞳别，里面保存著某個(gè)未來才會結(jié)束的事件（通常是一個(gè)異步操作）的結(jié)果征候。從語法上說杭攻，Promise 是一個(gè)對象，從它可以獲取異步操作的消息疤坝。Promise 提供統(tǒng)一的 API兆解，各種異步操作都可以用同樣的方法進(jìn)行處理。
Promise 特點(diǎn)
對象的狀態(tài)不受外界影響跑揉。Promise 對象代表一個(gè)異步操作锅睛，有三種狀態(tài)：pending（進(jìn)行中）、fulfilled（已成功）和 rejected（已失斃）现拒。只有異步操作的結(jié)果，可以決定當(dāng)前是哪一種狀態(tài)望侈，任何其他操作都無法改變這個(gè)狀態(tài)印蔬。
一旦狀態(tài)改變，就不會再變甜无，任何時(shí)候都可以得到這個(gè)結(jié)果扛点。Promise對象的狀態(tài)改變，只有兩種可能：從 pending 變?yōu)?fulfilled 和從 pending 變?yōu)?rejected岂丘。只要這兩種情況發(fā)生陵究，狀態(tài)就凝固了，不會再變了奥帘，會一直保持這個(gè)結(jié)果铜邮。如果改變已經(jīng)發(fā)生了，你再對 Promise 對象添加回調(diào)函數(shù)寨蹋，也會立即得到這個(gè)結(jié)果松蒜。這與事件（Event）完全不同，事件的特點(diǎn)是已旧，如果你錯(cuò)過了它秸苗，再去監(jiān)聽，是得不到結(jié)果的运褪。
有了Promise對象惊楼，就可以將異步操作以同步操作的流程表達(dá)出來，避免了層層嵌套的回調(diào)函數(shù)秸讹。此外檀咙，Promise對象提供統(tǒng)一的接口，使得控制異步操作更加容易璃诀。
基本用法
Promise 對象是一個(gè)構(gòu)造函數(shù)弧可，用來生成 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 對象的狀態(tài)從未完成變?yōu)槌晒Γ磸?pending 變?yōu)?resolved），在異步操作成功時(shí)調(diào)用搔确，并將異步操作的結(jié)果，作為參數(shù)傳遞出去灭忠。
- reject 函數(shù)的作用是膳算，將 Promise 對象的狀態(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 對象的狀態(tài)變?yōu)?resolved 時(shí)調(diào)用有鹿，第二個(gè)回調(diào)函數(shù)是 Promise 對象的狀態(tài)變?yōu)?rejected 時(shí)調(diào)用。其中谎脯，第二個(gè)函數(shù)是可選的葱跋，不一定要提供。這兩個(gè)函數(shù)都接受 Promise 對象傳出的值作為參數(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ù)會被傳遞給回調(diào)函數(shù)。 reject 函數(shù)的參數(shù)通常是 Error 對象的實(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)無效了社牲，由 p1 的狀態(tài)決定 p2 的狀態(tài)粪薛。所以，后面的 then 語句都變成針對后者 p1搏恤。又過了 2 秒违寿，p1 變?yōu)閞ejected湃交，導(dǎo)致觸發(fā) catch 方法指定的回調(diào)函數(shù)。
注意藤巢，調(diào)用 resolve 或 reject 并不會終結(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) 還是會執(zhí)行掂咒，并且會首先打印出來才沧。這是因?yàn)榱⒓?resolved 的 Promise 是在本輪事件循環(huán)的末尾執(zhí)行，總是晚于本輪循環(huán)的同步任務(wù)绍刮。
一般來說温圆，調(diào)用 resolve 或 reject 以后，Promise 的使命就完成了孩革，后繼操作應(yīng)該放到 then 方法里面岁歉，而不應(yīng)該直接寫在 resolve 或 reject 的后面。所以膝蜈，最好在它們前面加上return語句锅移，這樣就不會有意外。
new Promise((resolve, reject) => {
return resolve(1);
// 后面的語句不會執(zhí)行
console.log(2);
})
finally()
finally 方法用于指定不管 Promise 對象最后狀態(tài)如何饱搏，都會執(zhí)行的操作非剃。該方法是 ES2018 引入標(biāo)準(zhǔn)的。
promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
不管 promise 最后的狀態(tài)窍帝，在執(zhí)行完 then 或 catch 指定的回調(diào)函數(shù)以后努潘，都會執(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ù)就會被調(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)版本的代碼中對 p1.then() 的調(diào)用返回了第二個(gè) Promise 深浮，又在這之上調(diào)用了 then() 压怠。僅當(dāng)?shù)谝粋€(gè) Promise 已被決議后，第二個(gè) then() 的完成處理函數(shù)才會被調(diào)用飞苇。
響應(yīng)多個(gè) Promise
- Promise.all() 方法
接收單個(gè)可迭代對象(如數(shù)組)作為參數(shù)菌瘫，并返回一個(gè) Promise 。這個(gè)可迭代對象的元素都是 Promise 布卡，只有在它們都完成后雨让，所返回的 Promise 才會被完成。
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 的可迭代對象忿等，并返回一個(gè)新的 Promise 栖忠，但一旦來源 Promise 中有一個(gè)被解決，所返回的 Promise 就會立刻被解決。與等待所有 Promise 完成的 Promise.all() 方法不同庵寞，在來源 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)
- 無法取消Promise捐川，一旦新建它就會立即執(zhí)行脓鹃，無法中途取消。
- 如果不設(shè)置回調(diào)函數(shù)古沥，Promise內(nèi)部拋出的錯(cuò)誤瘸右，不會反應(yīng)到外部。
- 當(dāng)處于pending 狀態(tài)時(shí)岩齿，無法得知目前進(jìn)展到哪一個(gè)階段（剛剛開始還是即將完成）尊浓。
async
- async 表示函數(shù)里有異步操作，await表示緊跟在后面的表達(dá)式需要等待結(jié)果纯衍。
- async 函數(shù)返回一個(gè) Promise 對象。
- async 函數(shù)內(nèi)部 return 語句返回的值苗胀，會成為 then 方法回調(diào)函數(shù)的參數(shù)襟诸。
async function f() {
return 'hello world';
}
f().then(v => console.log(v))
// "hello world"
上面代碼中，函數(shù) f 內(nèi)部 return 命令返回的值基协，會被 then 方法回調(diào)函數(shù)接收到歌亲。
- async 函數(shù)內(nèi)部拋出錯(cuò)誤，會導(dǎo)致返回的 Promise 對象變?yōu)?reject 狀態(tài)澜驮。拋出的錯(cuò)誤對象會被 catch 方法回調(diào)函數(shù)接收到陷揪。
async function f() {
throw new Error('出錯(cuò)了');
}
f().catch(
e => console.log(e)
)
// Error: 出錯(cuò)了
- async 函數(shù)返回的 Promise 對象，必須等到內(nèi)部所有 await 命令后面的 Promise 對象執(zhí)行完杂穷，才會發(fā)生狀態(tài)改變悍缠，除非遇到 return 語句或者拋出錯(cuò)誤。也就是說耐量，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完飞蚓，才會執(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è)操作全部完成，才會執(zhí)行 then 方法里面的 console.log山叮。
await
- 正常情況下著榴，await 命令后面是一個(gè) Promise 對象。如果不是屁倔，會被轉(zhuǎn)成一個(gè)立即 resolve 的 Promise 對象脑又。
async function f() {
return await 123;
}
f().then(v => console.log(v))
// 123
await 命令的參數(shù)是數(shù)值123，它被轉(zhuǎn)成 Promise 對象，并立即 resolve挂谍。
- await 命令后面的 Promise 對象如果變?yōu)?reject 狀態(tài)叔壤，則 reject 的參數(shù)會被 catch 方法的回調(diào)函數(shù)接收到。
async function f() {
await Promise.reject('出錯(cuò)了');
}
f().then(v => console.log(v)).catch(e => console.log(e))
// 出錯(cuò)了
注意口叙，上面代碼中炼绘，await 語句前面沒有 return，但是 reject 方法的參數(shù)依然傳入了 catch 方法的回調(diào)函數(shù)妄田。這里如果在 await 前面加上 return俺亮，效果是一樣的。
- 只要一個(gè) await 語句后面的 Promise 變?yōu)?reject疟呐，那么整個(gè) async 函數(shù)都會中斷執(zhí)行脚曾。
async function f() {
await Promise.reject('出錯(cuò)了');
await Promise.resolve('hello world'); // 不會執(zhí)行
}
- 有時(shí)，我們希望即使前一個(gè)異步操作失敗启具，也不要中斷后面的異步操作本讥。這時(shí)可以將第一個(gè) await 放在 try...catch 結(jié)構(gòu)里面，這樣不管這個(gè)異步操作是否成功鲁冯，第二個(gè) await 都會執(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 對象再跟一個(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 對象撞芍，運(yùn)行結(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);
});
}
- 多個(gè)await命令后面的異步操作序无，如果不存在繼發(fā)關(guān)系，最好讓它們同時(shí)觸發(fā)衡创。
// 寫法一
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()
// 寫法二
async function test() {
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
}
- await 命令只能用在 async 函數(shù)之中帝嗡，如果用在普通函數(shù)，就會報(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ù)丈探，也有問題。
promises.forEach(async function (fun) {
const t = await fun();
console.log(t)
});
上面代碼可能不會正常工作拔莱，原因是這時(shí)三個(gè)異步操作將是并發(fā)執(zhí)行碗降，也就是同時(shí)執(zhí)行，而不是繼發(fā)執(zhí)行塘秦。正確的寫法是采用 for 循環(huán)讼渊。
for (let i of promises) {
const t = await i()
console.log(t)
}
- 如果確實(shí)希望多個(gè)請求并發(fā)執(zhí)行，可以使用 Promise.all 方法尊剔。當(dāng)三個(gè)請求都 resolved 時(shí)爪幻，下面兩種寫法效果相同。
async function dbFuc(db) {
async function test() {
let promises = [function1(), function2(), function3()]
let results = await Promise.all(promises);
console.log(results)
}
