async await

zone 發(fā)布于2019-08-26 10:48 / 2739人閱讀

摘要：由此可以知道等待的就是右邊表達(dá)式的運(yùn)行結(jié)果也就是的返回結(jié)果，再接著往下運(yùn)行。在打印的順序一定是，再到，盡管是先結(jié)束倒計(jì)時(shí)，但是因?yàn)橛辛诵揎椃员仨毜却蛴⊥戤叢趴梢源蛴　?/p>

async 標(biāo)識(shí)符表明函數(shù)里可能存在異步操作
await 只能保存在async標(biāo)識(shí)的函數(shù)里，普通函數(shù)no way

創(chuàng)建2個(gè)異步操作

// 2s后執(zhí)行
let resolveAfter2second = function () {
  console.log("resolveAfter2second start");
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("slow");
    }, 2000);
  });
}
// 1s后執(zhí)行
let resolveAfter1second = function () {
  console.log("resolveAfter1second start");
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("fast");
    }, 1000);
  });
}

2.異步順序執(zhí)行

let sequentialStart = async function() {
  console.log("sequentialStart ...");
  const slow = await resolveAfter2second();
  console.log(slow);
  const fast = await resolveAfter1second();
  console.log(fast);
}
sequentialStart();

這段代碼的執(zhí)行順序是先等待2s，獲得slow的值，接著等待1s，獲取fast的值。（其實(shí)也可以把等待時(shí)間調(diào)長(zhǎng)）。由此可以知道await等待的就是右邊表達(dá)式的運(yùn)行結(jié)果(也就是Promise.resolve()的返回結(jié)果)，再接著往下運(yùn)行。

3.同時(shí)運(yùn)行

let concurrentStart = async function() {
  console.log("concurrentStart ...");
  const slow = resolveAfter2second();
  const fast = resolveAfter1second();
  console.log(await slow);
  console.log(await fast);
}
concurrentStart();

concurrentStart方法做了小小的修改，移動(dòng)了await的對(duì)象，運(yùn)行可以看到slow和fast是同時(shí)開(kāi)始，也就是一共等待2s（注意，不是3s，因?yàn)樗鼈兪峭瑫r(shí)開(kāi)始的）。在打印的順序一定是slow，再到fast，盡管是fast先結(jié)束倒計(jì)時(shí)，但是因?yàn)橛辛薬wait修飾符，所以fast必須等待slow打印完畢才可以打印。

GPU云服務(wù)器云服務(wù)器 async await await-async async-await await

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/106792.html

相關(guān)文章

async & await (譯)

摘要：的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。我已經(jīng)開(kāi)始使用里的和關(guān)鍵字來(lái)簡(jiǎn)化的處理。異步任務(wù)在這個(gè)例子是執(zhí)行之后，一直在執(zhí)行完成才繼續(xù)下一個(gè)任務(wù)并沒(méi)有產(chǎn)生阻塞。最后這個(gè)函數(shù)處理了返回值并且返回了一個(gè)對(duì)象。依然很棒，但和使得它可維護(hù)性更好。 JavaScript Promises的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。Promises 允許我們更好的引入和處理異步任務(wù)，雖然如此，但引入好...

The question 2019-08-22 11:07 評(píng)論0 收藏0
異步發(fā)展流程 —— 異步編程的終極大招 async/await

摘要：簡(jiǎn)介指的是兩個(gè)關(guān)鍵字，是引入的新標(biāo)準(zhǔn)，關(guān)鍵字用于聲明函數(shù)，關(guān)鍵字用來(lái)等待異步必須是操作，說(shuō)白了就是的語(yǔ)法糖。最后希望大家在讀過(guò)異步發(fā)展流程這個(gè)系列之后，對(duì)異步已經(jīng)有了較深的認(rèn)識(shí)，并可以在不同情況下游刃有余的使用這些處理異步的編程手段。 showImg(https://segmentfault.com/img/remote/1460000018998406?w=1024&h=379); ...

zhangfaliang 2019-08-23 12:18 評(píng)論0 收藏0
理解 JavaScript 的 async/await

摘要：因?yàn)楹瘮?shù)返回一個(gè)對(duì)象，所以可以用于等待一個(gè)函數(shù)的返回值這也可以說(shuō)是在等函數(shù)，但要清楚，它等的實(shí)際是一個(gè)返回值。幫我們干了啥作個(gè)簡(jiǎn)單的比較上面已經(jīng)說(shuō)明了會(huì)將其后的函數(shù)函數(shù)表達(dá)式或的返回值封裝成一個(gè)對(duì)象，而會(huì)等待這個(gè)完成，并將其的結(jié)果返回出來(lái)。隨著 Node 7 的發(fā)布，越來(lái)越多的人開(kāi)始研究據(jù)說(shuō)是異步編程終級(jí)解決方案的 async/await。我第一次看到這組關(guān)鍵字并不是在 JavaSc...

tracymac7 2019-08-20 12:24 評(píng)論0 收藏0
8張圖幫你一步步看清 async/await 和 promise 的執(zhí)行順序

摘要：第部分畫(huà)圖一步步看清宏任務(wù)微任務(wù)的執(zhí)行過(guò)程我們以開(kāi)篇的經(jīng)典面試題為例，分析這個(gè)例子中的宏任務(wù)和微任務(wù)。注意這里只是把推入微任務(wù)隊(duì)列，并沒(méi)有執(zhí)行。執(zhí)行結(jié)束，才能繼續(xù)執(zhí)行后面的代碼如圖此時(shí)當(dāng)前宏任務(wù)都執(zhí)行完了，要處理微任務(wù)隊(duì)列里的代碼。 8張圖讓你一步步看清 async/await 和 promise 的執(zhí)行順序為什么寫(xiě)這篇文章？測(cè)試一下自己有沒(méi)有必要看需要具備的前置基礎(chǔ)知識(shí) 主...

weizx 2019-08-23 13:51 評(píng)論0 收藏0
[譯]帶你理解 Async/await

摘要：所以是在一秒后顯示的。這個(gè)行為不會(huì)耗費(fèi)資源，因?yàn)橐婵梢酝瑫r(shí)處理其他任務(wù)執(zhí)行其他腳本，處理事件等。每個(gè)回調(diào)首先被放入微任務(wù)隊(duì)列然后在當(dāng)前代碼執(zhí)行完成后被執(zhí)行。，函數(shù)是異步的，但是會(huì)立即運(yùn)行。否則，就返回結(jié)果，并賦值。「async/await」是 promises 的另一種更便捷更流行的寫(xiě)法，同時(shí)它也更易于理解和使用。 Async functions 讓我們以 async 這個(gè)關(guān)鍵字開(kāi)...

xiaochao 2019-08-23 18:09 評(píng)論0 收藏0
Async/await學(xué)習(xí)

摘要：這只是一個(gè)更優(yōu)雅的得到值的語(yǔ)句，它比更加容易閱讀和書(shū)寫(xiě)?？偨Y(jié)放在一個(gè)函數(shù)前的有兩個(gè)作用使函數(shù)總是返回一個(gè)允許在這其中使用前面的關(guān)鍵字能夠使等待，直到處理結(jié)束。 Async/await 寫(xiě)在前面渣渣新人的首篇外文文章翻譯?。〈嬖阱e(cuò)誤可能會(huì)很多，如有錯(cuò)誤，煩請(qǐng)各位大大指正出來(lái)，感謝！本篇為翻譯！本篇為翻譯！本篇為翻譯！原文文章地址：https://javascript.info/a...

Tamic 2019-08-26 11:45 評(píng)論0 收藏0