async和await是如何實現異步編程?

目錄

• 異步編程樣例
• 樣例解析
• 淺談Promise如何實現異步執行
• 參考

1.異步編程樣例

樣例：

// 等待執行函數
function sleep(timeout) {
  return new Promise((resolve) => {
    setTimeout(resolve, timeout)
  })
}

// 異步函數
async function test() {
  console.log('test start')
  await sleep(1000)
  console.log('test end')
}

console.log('start')
test()
console.log('end')

執行結果：

start
test start
end
test end

2.樣例解析

在樣例代碼中，test異步函數使用了async和await語法，這是ES2017里面的異步編程規范。而為了在較低版本的瀏覽器或Node支持這種語法，其中一種解決方案是將其轉化為Generator函數和Promise來實現。換句話說，任何的async和await實現的異步函數，都可以替換成Generator函數和Promise實現。

第一步：先將async和await語法替換為相應的Generator 函數，如下

// 代碼結構完全一致，只是替換了對應關鍵字
function *test() {
  console.log('test start')
  yield sleep(1000)
  console.log('test end')
}

第二步：為了執行Generator 函數，使用Promise實現一個自動執行器函數 spawn

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

第三步：將相應的Generator 函數和自動執行器函數相結合，即可得最終的等價代碼

function asyncTest() {
  spawn(test)
}

console.log('start')
asyncTest()
console.log('end')

第四步：執行結果，與原來的一致

start
test start
end
test end

第五步：分析asyncTest函數執行過程

1. 執行到 spawn(test)，進入spawn函數中，創建一個Promise並返回。
2. 執行到 const gen = genF()，獲取一個狀態機。（Generator 函數是一個狀態機，封裝了多個內部狀態。）
3. 執行到 step(function() { return gen.next(undefined); })， 進入step 函數中。
4. 執行到next = nextF() ，next等於gen.next(undefined)的返回結果。
   • 當gen.next(undefined)開始執行，狀態機第一次調用，直到遇到第一個yield表達式為止，即yield sleep(1000)，此時控制台先輸出"test start"，並且返回第一個狀態{ value: reuslt, done: false }, 而 reuslt等於sleep(1000)返回的結果，其是一個Promise。
5. 執行到if(next.done) ，此時第一個狀態的done為false，所以不執行if語句里面，繼續往下執行。
6. 執行到Promise.resolve(next.value)，由於第一個狀態的value是一個Promise，所以直接返回其本身，也就相當於執行sleep(1000).then(...)，sleep函數異步等待1秒后，resolve接受的值為undefined，繼續執行then方法。
7. 執行到 step(function() { return gen.next(v); })，此時v為undefined，再次進入step 函數中。
8. 再次執行到next = nextF() ，next等於gen.next(undefined)的返回結果。
   • 當gen.next(undefined)再次執行時，狀態機第二次調用，此時Generator函數已經執行完畢，此時控制台先輸出"test end"，並且返回最后的狀態{ value: undefined, done: true }
9. 執行到if(next.done) ，此時第一個狀態的done為true，所以執行if語句里面。
10. 執行到return resolve(next.value)，此時最初的Promise成功執行。
11. 至此asyncTest函數執行結束。

3.淺談Promise如何實現異步執行

從上述樣例解析中可以看出，我們是用Promise來實現代碼的異步執行，那Promise的內部是如何實現異步執行的呢？

通過查看Promise的源碼實現，發現其異步執行是通過asap這個庫來實現的。

asap是as soon as possible的簡稱，在Node和瀏覽器環境下，能將回調函數以高優先級任務來執行（下一個事件循環之前），即把任務放在微任務隊列中執行。

宏任務（macro-task）和微任務（micro-task）表示異步任務的兩種分類。在掛起任務時，JS 引擎會將所有任務按照類別分到這兩個隊列中，首先在 macrotask 的隊列（這個隊列也被叫做 task queue）中取出第一個任務，執行完畢后取出 microtask 隊列中的所有任務順序執行；之后再取 macrotask 任務，周而復始，直至兩個隊列的任務都取完。

用法：

asap(function () {
    // ...
});

補充說明：這里提及的Promise源碼並不是Node和瀏覽器的原生實現，是一個第三方庫，僅以此為參考。

4.參考

ECMAScript 6 入門 - async 函數

【翻譯】Promises/A+規范

Promise - Bare bones Promises/A+ implementation