async await 個人總結(jié)

認(rèn)識async await 首先要從單個熟悉

  • async
    官方介紹:
    async function 聲明將定義一個返回 AsyncFunction 對象的異步函數(shù)东涡。
    個人理解:
    1. 首先async function會申明定義一個異步執(zhí)行的函數(shù),無阻塞圈浇,不會阻塞后面代碼執(zhí)行
    2. 該函數(shù)的返回值是一個Promise對象

執(zhí)行以下代碼

async function testAsync() {
    return '茶樹菇'
  }
  console.log(testAsync());
/*打印結(jié)果:
Promise
result: "茶樹菇"
status: "resolved"
“Promise”原型*/

打印結(jié)果可以看出,async 可以將其后的函數(shù)執(zhí)行結(jié)果轉(zhuǎn)為Promise對象
既然如此那以下操作也是可行的

testAsync().then(r => {
    console.log(r);
  });//"茶樹菇"

由以下打印結(jié)果可知async function聲明函數(shù)是異步函數(shù)

function t() {
  return new Promise(resolve => {
    resolve('hah')
  })
}
async function t1() {
  const a = await t()
  // console.log(a);
  console.log('t1函數(shù)里');
}
t1()
console.log('我在t1函數(shù)調(diào)用后');
/*打印結(jié)果:
[Log] 我在t1函數(shù)調(diào)用后
[Log] t1函數(shù)里
*/

  • await
    官方介紹
    await 操作符用于等待一個Promise 對象。它只能在異步函數(shù) async function 中使用娶牌。

    個人理解:
    官方注釋await是在等待一個Promise對象锦募,其實(shí)沒有限制摆屯,只是根據(jù)等待到的結(jié)果類型的不同有不同的操作,如果等到的就是個結(jié)果糠亩,則await就返回這個值虐骑,如果等到的是一Promise對象准验,則await會阻塞后面代碼執(zhí)行,等待Promise的結(jié)果(由于awaitasync function申明的異步執(zhí)行函數(shù)廷没,所以不會影響該函數(shù)外的其他代碼執(zhí)行糊饱,只影響內(nèi)部)
    注意:如果await等待的Promise執(zhí)行結(jié)果除了resolve外,還有異常處理reject颠黎,則最好用.catch(err => err)去接收處理異常另锋, 例const a = await t().catch(err => err)

async function testAsync1() {
    return "茶樹菇";
}

function testAsync2() {
    return new Promise(resolve => {
      resolve('茶樹菇')
    })
}

function testAsync3() {
    return "茶樹菇";
}

async function testFn() {
    const v1 = await testAsync1();
    const v2 = await testAsync2();
    const v3 = await testAsync3();
    console.log(v1);//"茶樹菇"
    console.log(v2);//"茶樹菇"
    console.log(v3);//"茶樹菇"
//由此可見`await`等待的不一定是個`Promise`對象,也可以是個值
}
testFn();

  • 為什么用async await盏缤,對比Promise的優(yōu)缺點(diǎn)在哪砰蠢?
    模擬個使用場景,如下代碼
    需求:隨機(jī)產(chǎn)生一個1~2之間的隨機(jī)數(shù)唉铜,用延時器模擬異步操作台舱,判斷該值,如果小于一就成功潭流,大于一失敗
//用Promise實(shí)現(xiàn):
function test(resolve, reject) {
    var timeOut = Math.random() * 2;
    console.log('隨機(jī)數(shù)為:' + timeOut);
    setTimeout(function() {
      if (timeOut < 1) {
        resolve('小于1, 成功')
      } else {
        reject('大于1,失敗')
      }
    }, timeOut * 1000)
  }
  new Promise(test).then((result) => {
    console.log(result);
  }).catch((reason) => {
    console.log(reason);
  })

打印結(jié)果:
屏幕快照 2018-03-12 下午2.05.09.png
function test2() {
    var timeOut = Math.random() * 2;
    console.log('隨機(jī)數(shù)為:' + timeOut);
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        if (timeOut < 1) {
          resolve('小于1, 成功')
        } else {
          reject('大于1,失敗')
        }
      }, 1000)
    })
  }
  async function asyncFn() {
    const v3 = await test2().catch(er => er)
    console.log(v3);
  }
  asyncFn()

看代碼其實(shí)單一的異步處理鏈并不能看出async await的優(yōu)勢竞惋,但是如果需要處理多個Promise組成的處理鏈,就能看出區(qū)別
假設(shè)需求為:分布完成灰嫉,每一步都需要上一步的結(jié)果:

//每次調(diào)用時間都增加200
function logTimeOut(n) {
    return new Promise(resolve => {
      setTimeout(() => resolve(n + 200), n)
    })
  }
//第一步
  function stepOne(n) {
    console.log('第一步所用的時間', n);
    return logTimeOut(n)
  }
//第二步將第一步的結(jié)果加上200作為第二部的初始時間
  function stepTow(m, n) {
    console.log('第二部所用的時間',m, n);
    return logTimeOut(n + m)
  }
//第三步將第二步的結(jié)果加上200作為第三步的初始時間
  function stepThree(k, m, n) {
    console.log('第三部所用的時間', k, m, n);
    return logTimeOut(k + m + n)
  }

首先用Promise實(shí)現(xiàn)

//promise實(shí)現(xiàn)
  function doIt() {
    console.time("doIt");
    // 第一步初始時間
    const time1 = 200;
    stepOne(time1).then(time2 => {
      return stepTow(time1, time2).then(time3 => [time1, time2, time3])
    })
    .then(timeArr => {
      const [time1, time2, time3] = timeArr
      return stepThree(time1, time2, time3)
    })
    .then(result => {
      console.log('總共計算用時', result);
      console.timeEnd('doIt')
    })
  }
doIt()

使用async awiat

// async await 實(shí)現(xiàn)
  async function startIt() {
    console.time("startIt")
    const time1 = 200;
    const time2 = await stepOne(time1)
    const time3 = await stepTow(time1, time2)
    const result = await stepThree(time1, time2, time3)
    console.log('總共計算用時', result);
    console.timeEnd('startIt')
  }

打印結(jié)果:
屏幕快照 2018-03-12 下午3.02.22.png

這樣對比就能明顯看出區(qū)別Promise實(shí)現(xiàn)的代碼邏輯復(fù)雜,不清晰讼撒,不直觀浑厚,而通過async await,可以將異步邏輯根盒,用類似于同步的代碼實(shí)現(xiàn)钳幅,簡潔明了

這是到目前為止的個人理解,轉(zhuǎn)載請標(biāo)明出處

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末炎滞,一起剝皮案震驚了整個濱河市敢艰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌册赛,老刑警劉巖钠导,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異森瘪,居然都是意外死亡牡属,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進(jìn)店門扼睬,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逮栅,“玉大人,你說我怎么就攤上這事≈ぐ牛” “怎么了?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵担映,是天一觀的道長废士。 經(jīng)常有香客問我,道長蝇完,這世上最難降的妖魔是什么官硝? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮短蜕,結(jié)果婚禮上氢架,老公的妹妹穿的比我還像新娘。我一直安慰自己朋魔,他們只是感情好岖研,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著警检,像睡著了一般孙援。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上扇雕,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天拓售,我揣著相機(jī)與錄音,去河邊找鬼镶奉。 笑死础淤,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的哨苛。 我是一名探鬼主播鸽凶,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼移国!你這毒婦竟也來了吱瘩?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤迹缀,失蹤者是張志新(化名)和其女友劉穎使碾,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體祝懂,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡票摇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了砚蓬。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片矢门。...
    茶點(diǎn)故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出祟剔,到底是詐尸還是另有隱情隔躲,我是刑警寧澤,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布物延,位于F島的核電站宣旱,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏叛薯。R本人自食惡果不足惜浑吟,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望耗溜。 院中可真熱鬧组力,春花似錦、人聲如沸抖拴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽阿宅。三九已至轩触,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間家夺,已是汗流浹背脱柱。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拉馋,地道東北人榨为。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像煌茴,于是被迫代替她去往敵國和親随闺。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,828評論 2 345

推薦閱讀更多精彩內(nèi)容