文章內(nèi)容轉(zhuǎn)自阮一峰老師博客.
語法學習

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)頁、取出文本、匹配頁面標題。只有這三個操作全部完成，才會執(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結構里面，這樣不管這個異步操作是否成功，第二個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對象，運行結果可能是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ā)關系，最好讓它們同時觸發(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ù)，就會報錯

實例用法