async 函數(shù)(筆記 )

基本用法

執(zhí)行函數(shù)時(shí),遇到await,會(huì)等到異步操作完成,再接著執(zhí)行函數(shù)體內(nèi)后面的語(yǔ)句。
如下代碼會(huì)先打印1,再打印2。

function a() {
        return new Promise((resolve) => {
            setTimeout(function() {
                console.log(1);
                resolve();
            }, 2000)
        })
    }

    async function b() {
        await a(); //a要返回一個(gè)Promise對(duì)象,否則await對(duì)它不起作用
        console.log(2)
    }
    b()

返回Promise 對(duì)象

1.async函數(shù)返回一個(gè) Promise對(duì)象。
2.async函數(shù)內(nèi)部return語(yǔ)句返回的值 ,會(huì)成為then方法回調(diào)函數(shù)的參數(shù)。

async function asyncPrint() {
      return "hello world";
}

asyncPrint().then(greeting => console.log(greeting)); //hello world

3.async函數(shù)內(nèi)部拋出錯(cuò)誤,會(huì)導(dǎo)致返回的Promise對(duì)象變?yōu)?code>reject狀態(tài)。拋出的錯(cuò)誤對(duì)象會(huì)被catch方法回調(diào)函數(shù)接收到。

async function asyncPrint() {
      throw new Error('出錯(cuò)了');
}

asyncPrint()
.then(greeting => console.log(greeting))
.catch(err => console.log(err)); // Error: 出錯(cuò)了
  1. 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ù)。

await 命令

await后面應(yīng)該返回一個(gè)Promise對(duì)象,如果不是,就直接返回這個(gè)值。

async function f() {
  // 等同于
  // return 123;
  return await 123;
}

f().then(v => console.log(v))
// 123

注意點(diǎn)

  1. 上面提到因?yàn)閽伋鲥e(cuò)誤會(huì)讓狀態(tài)變?yōu)?code>reject , 所以最好把await命令放在try...catch代碼塊中, 如下
async function myFun() {
  try {
    await aa();
  } catch (err) {
    console.log(err);
  }
}

// 另一種寫(xiě)法

async function myFun() {
  await aa()
  .catch(function (err) {
    console.log(err);
  });
}
  1. getFoogetBar是兩個(gè)獨(dú)立的異步操作,被寫(xiě)成繼發(fā)關(guān)系。這樣比較耗時(shí),因?yàn)橹挥?code>getFoo完成以后,才會(huì)執(zhí)行getBar,完全可以讓它們同時(shí)觸發(fā)。
let foo = await getFoo();
let bar = await getBar();

多個(gè)await命令后面的異步操作,如果不存在繼發(fā)關(guān)系,最好讓它們同時(shí)觸發(fā)。

// getFoo和getBar都是同時(shí)觸發(fā),這樣就會(huì)縮短程序的執(zhí)行時(shí)間
// 寫(xiě)法一
let [foo, bar] = await Promise.all([getFoo(), getBar()]);

// 寫(xiě)法二
let fooPromise = getFoo();
let barPromise = getBar();
let foo = await fooPromise;
let bar = await barPromise;
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • async 函數(shù) 含義 ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù),使得異步操作變得更加方便。 async 函數(shù)是...
    huilegezai閱讀 1,324評(píng)論 0 6
  • 含義 async函數(shù)是Generator函數(shù)的語(yǔ)法糖,它使得異步操作變得更加方便。 寫(xiě)成async函數(shù),就是下面這...
    oWSQo閱讀 2,046評(píng)論 0 2
  • 前面的話 ES2017標(biāo)準(zhǔn)引入了async 函數(shù),使得異步操作變得更加方便。本文將詳細(xì)介紹async函數(shù) 概述 a...
    CodeMT閱讀 1,393評(píng)論 0 3
  • 簡(jiǎn)單介紹下這幾個(gè)的關(guān)系為方便起見(jiàn) 用以下代碼為例簡(jiǎn)單介紹下這幾個(gè)東西的關(guān)系, async 在函數(shù)聲明前使用asyn...
    _我和你一樣閱讀 21,512評(píng)論 1 24
  • async 函數(shù) ES2017 標(biāo)準(zhǔn)引入了 async 函數(shù),使得異步操作變得更加方便。async 函數(shù)是什么?一...
    _羊羽_閱讀 2,227評(píng)論 0 1

友情鏈接更多精彩內(nèi)容