async await

zone 發布于2019-08-26 10:48 / 2731人閱讀

摘要：由此可以知道等待的就是右邊表達式的運行結果也就是的返回結果，再接著往下運行。在打印的順序一定是，再到，盡管是先結束倒計時，但是因為有了修飾符，所以必須等待打印完畢才可以打印。

async 標識符表明函數里可能存在異步操作
await 只能保存在async標識的函數里，普通函數no way

創建2個異步操作

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

2.異步順序執行

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

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

3.同時運行

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

concurrentStart方法做了小小的修改，移動了await的對象，運行可以看到slow和fast是同時開始，也就是一共等待2s（注意，不是3s，因為它們是同時開始的）。在打印的順序一定是slow，再到fast，盡管是fast先結束倒計時，但是因為有了await修飾符，所以fast必須等待slow打印完畢才可以打印。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106792.html

async & await (譯)

摘要：的出現，讓我們可以走出回調地獄，著實驚艷。我已經開始使用里的和關鍵字來簡化的處理。異步任務在這個例子是執行之后，一直在執行完成才繼續下一個任務并沒有產生阻塞。最后這個函數處理了返回值并且返回了一個對象。依然很棒，但和使得它可維護性更好。 JavaScript Promises的出現，讓我們可以走出回調地獄，著實驚艷。Promises 允許我們更好的引入和處理異步任務，雖然如此，但引入好...

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

摘要：簡介指的是兩個關鍵字，是引入的新標準，關鍵字用于聲明函數，關鍵字用來等待異步必須是操作，說白了就是的語法糖。最后希望大家在讀過異步發展流程這個系列之后，對異步已經有了較深的認識，并可以在不同情況下游刃有余的使用這些處理異步的編程手段。 showImg(https://segmentfault.com/img/remote/1460000018998406?w=1024&h=379); ...

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

摘要：因為函數返回一個對象，所以可以用于等待一個函數的返回值這也可以說是在等函數，但要清楚，它等的實際是一個返回值。幫我們干了啥作個簡單的比較上面已經說明了會將其后的函數函數表達式或的返回值封裝成一個對象，而會等待這個完成，并將其的結果返回出來。隨著 Node 7 的發布，越來越多的人開始研究據說是異步編程終級解決方案的 async/await。我第一次看到這組關鍵字并不是在 JavaSc...

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

摘要：第部分畫圖一步步看清宏任務微任務的執行過程我們以開篇的經典面試題為例，分析這個例子中的宏任務和微任務。注意這里只是把推入微任務隊列，并沒有執行。執行結束，才能繼續執行后面的代碼如圖此時當前宏任務都執行完了，要處理微任務隊列里的代碼。 8張圖讓你一步步看清 async/await 和 promise 的執行順序為什么寫這篇文章？測試一下自己有沒有必要看需要具備的前置基礎知識主...

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

摘要：所以是在一秒后顯示的。這個行為不會耗費資源，因為引擎可以同時處理其他任務執行其他腳本，處理事件等。每個回調首先被放入微任務隊列然后在當前代碼執行完成后被執行。，函數是異步的，但是會立即運行。否則，就返回結果，并賦值。「async/await」是 promises 的另一種更便捷更流行的寫法，同時它也更易于理解和使用。 Async functions 讓我們以 async 這個關鍵字開...

xiaochao 2019-08-23 18:09 評論0 收藏0
Async/await學習

摘要：這只是一個更優雅的得到值的語句，它比更加容易閱讀和書寫。總結放在一個函數前的有兩個作用使函數總是返回一個允許在這其中使用前面的關鍵字能夠使等待，直到處理結束。 Async/await 寫在前面渣渣新人的首篇外文文章翻譯！！存在錯誤可能會很多，如有錯誤，煩請各位大大指正出來，感謝！本篇為翻譯！本篇為翻譯！本篇為翻譯！原文文章地址：https://javascript.info/a...

Tamic 2019-08-26 11:45 評論0 收藏0