文章內(nèi)容轉(zhuǎn)自阮一峰老師博客.
語法學(xué)習(xí)
1.返回 Promise 對象
async函數(shù)返回一個Promise 對象傅是。
async函數(shù)內(nèi)部return語句返回的值棚瘟，會成為then()方法回調(diào)函數(shù)的參數(shù)。
async function sayHello(){
return 'Hello world'
}
sayHello().then(message=>console.log(message+'!!'));
// Hello world!!
2.Promise 對象的狀態(tài)變化
async函數(shù)返回的 Promise 對象垦搬，必須等到內(nèi)部所有await命令后面的 Promise 對象執(zhí)行完孽惰，才會發(fā)生狀態(tài)改變控妻，除非遇到return語句或者拋出錯誤。也就是說看尼，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完递鹉，才會執(zhí)行then()方法指定的回調(diào)函數(shù)。
async function getTitle(url) {
let response = await fetch(url);
let html = await response.text();
return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
上面代碼中藏斩，函數(shù)getTitle內(nèi)部有三個操作：抓取網(wǎng)頁躏结、取出文本、匹配頁面標(biāo)題狰域。只有這三個操作全部完成媳拴，才會執(zhí)行then方法里面的console.log。
3.await 命令
正常情況下北专，await命令后面是一個 Promise 對象禀挫。如果不是，會被轉(zhuǎn)成一個立即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)閞eject狀態(tài)匿醒，則reject的參數(shù)會被catch方法的回調(diào)函數(shù)接收到。
async function f() {
await Promise.reject('出錯了');
}
f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出錯了
注意缠导，上面代碼中廉羔，await語句前面沒有return，但是reject方法的參數(shù)依然傳入了catch方法的回調(diào)函數(shù)僻造。這里如果在await前面加上return憋他，效果是一樣的。
只要一個await語句后面的 Promise 變?yōu)閞eject髓削，那么整個async函數(shù)都會中斷執(zhí)行竹挡。
async function f() {
await Promise.reject('出錯了');
await Promise.resolve('hello world'); // 不會執(zhí)行
}
上面代碼中，第二個await語句是不會執(zhí)行的立膛，因為第一個await語句狀態(tài)變成了reject揪罕。
有時，我們希望即使前一個異步操作失敗宝泵，也不要中斷后面的異步操作好啰。這時可以將第一個await放在try...catch結(jié)構(gòu)里面，這樣不管這個異步操作是否成功儿奶，第二個await都會執(zhí)行框往。
async function f() {
try {
await Promise.reject('出錯了');
} catch(e) {
}
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// hello world
另一種方法是await后面的 Promise 對象再跟一個catch方法，處理前面可能出現(xiàn)的錯誤廓握。
async function f() {
await Promise.reject('出錯了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f()
.then(v => console.log(v))
// 出錯了
// hello world
4.使用注意點
- 前面已經(jīng)說過搅窿，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命令后面的異步操作，如果不存在繼發(fā)關(guān)系娱仔，最好讓它們同時觸發(fā)沐飘。
// 寫法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);
// 寫法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
- await命令只能用在async函數(shù)之中，如果用在普通函數(shù)牲迫，就會報錯
實例用法
