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. 執行到constgen = 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函式執行結束。

佛山vi設計https://www.houdianzi.com/fsvi/ 豌豆資源搜尋大全https://55wd.com

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

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

通過檢視Promise的原始碼實現，發現其非同步執行是通過asap這個庫來實現的。

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

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

用法：

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