ES6中的異步詳解

2020年9月29日 JavaScript applek

眾所周知JS是單線程的，這種設計讓JS避免了多線程的各種問題，但同時也讓JS同一時刻只能執行一個任務，若這個任務執行時間很長的話（如死循環），會導致JS直接卡死，在瀏覽器中的表現就是頁面無響應，用戶體驗非常之差。

因此，在JS中有兩種任務執行模式：同步（Synchronous）和異步（Asynchronous）。類似函數調用、流程控制語句、表達式計算等就是以同步方式運行的，而異步主要由setTimeout/setInterval、事件實現。

傳統的異步實現

作為一個前端開發者，無論是瀏覽器端還是Node，相信大家都使用過事件吧，通過事件肯定就能想到回調函數，它就是實現異步最常用、最傳統的方式。

不過要注意，不要以為回調函數就都是異步的，如ES5的數組方法Array.prototype.forEach((ele) => {})等等，它們也是同步執行的。回調函數只是一種處理異步的方式，屬于函數式編程中高階函數的一種，并不只在處理異步問題中使用。

舉個栗子?：

// 最常見的ajax回調
this.ajax('/path/to/api', {
    params: params
}, (res) => {
    // do something...
})

你可能覺得這樣并沒有什么不妥，但是若有多個ajax或者異步操作需要依次完成呢？

this.ajax('/path/to/api', {
    params: params
}, (res) => {
    // do something...
    this.ajax('/path/to/api', {
      params: params
    }, (res) => {
        // do something...
        this.ajax('/path/to/api', {
          params: params
        }, (res) => {
          // do something...
        })
        ...
    })
})

回調地獄就出現了。。。?

為了解決這個問題，社區中提出了Promise方案，并且該方案在ES6中被標準化，如今已廣泛使用。

Promise

使用Promise的好處就是讓開發者遠離了回調地獄的困擾，它具有如下特點：

對象的狀態不受外界影響：
- Promise對象代表一個異步操作，有三種狀態：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失敗）。
- 只有異步操作的結果，可以決定當前是哪一種狀態，任何其他操作都無法改變這個狀態。
一旦狀態改變，就不會再變，任何時候都可以得到這個結果。
- Promise對象的狀態改變，只有兩種可能：從Pending變為Resolved和從Pending變為Rejected。
- 只要這兩種情況發生，狀態就凝固了，不會再變了，會一直保持這個結果。
- 如果改變已經發生了，你再對Promise對象添加回調函數，也會立即得到這個結果。
- 這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監聽，是得不到結果的。
一旦聲明Promise對象（new Promise或Promise.resolve等），就會立即執行它的函數參數，若不是函數參數則不會執行

this.ajax('/path/to/api', {
    params: params
}).then((res) => {
    // do something...
    return this.ajax('/path/to/api', {
        params: params
    })
}).then((res) => {
    // do something...
    return this.ajax('/path/to/api', {
        params: params
    })
})
...

看起來就直觀多了，就像一個鏈條一樣將多個操作依次串了起來，再也不用擔心回調了~?

同時Promise還有許多其他API，如Promise.all、Promise.race、Promise.resolve/reject等等（可以參考阮老師的文章），在需要的時候配合使用都是極好的。

API無需多說，不過這里我總結了一下自己之前使用Promise踩到的坑以及我對Promise理解不夠透徹的地方，希望也能幫助大家更好地使用Promise：

1.then的返回結果：我之前天真的以為then要想鏈式調用，必須要手動返回一個新的Promise才行

Promise.resolve('first promise')
.then((data) => {
    // return Promise.resolve('next promise')
    // 實際上兩種返回是一樣的
    return 'next promise'
})
.then((data) => {
    console.log(data)
})

總結如下：

如果then方法中返回了一個值，那么返回一個“新的”resolved的Promise，并且resolve回調函數的參數值是這個值
如果then方法中拋出了一個異常，那么返回一個“新的”rejected狀態的Promise
如果then方法返回了一個未知狀態（pending）的Promise新實例，那么返回的新Promise就是未知狀態
如果then方法沒有返回值時，那么會返回一個“新的”resolved的Promise，但resolve回調函數沒有參數

2.一個Promise可設置多個then回調，會按定義順序執行，如下

const p = new Promise((res) => {
  res('hahaha')
})
p.then(console.log)
p.then(console.warn)

這種方式與鏈式調用不要搞混，鏈式調用實際上是then方法返回了新的Promise，而不是原有的，可以驗證一下：

const p1 = Promise.resolve(123)
const p2 = p1.then(() => {
    console.log(p1 === p2)
    // false
})

3.then或catch返回的值不能是當前promise本身，否則會造成死循環：

const promise = Promise.resolve()
.then(() => {
    return promise
})

4.then或者catch的參數期望是函數，傳入非函數則會發生值穿透：

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)
// 1

5.process.nextTick和promise.then都屬于microtask，而setImmediate、setTimeout屬于macrotask

process.nextTick(() => {
  console.log('nextTick')
})
Promise.resolve()
  .then(() => {
    console.log('then')
  })
setImmediate(() => {
  console.log('setImmediate')
})
console.log('end')
// end nextTick then setImmediate

有關microtask及macrotask可以看這篇文章，講得很細致。

但Promise也存在弊端，那就是若步驟很多的話，需要寫一大串.then()，盡管步驟清晰，但是對于我們這些追求極致優雅的前端開發者來說，代碼全都是Promise的API（then、catch），操作的語義太抽象，還是讓人不夠滿意呀~

Generator

Generator是ES6規范中對協程的實現，但目前大多被用于異步模擬同步上了。

執行它會返回一個遍歷器對象，而每次調用next方法則將函數執行到下一個yield的位置，若沒有則執行到return或末尾。

依舊是不再贅述API，對它還不了解的可以查閱阮老師的文章。

通過Generator實現異步：

function* main() {
   const res = yield getData()
   console.log(res)
}
// 異步方法
function getData() {
   setTimeout(() => {
       it.next({
           name: 'yuanye',
           age: 22
       })
   }, 2000)
}
const it = main()
it.next()

先不管下面的next方法，單看main方法中，getData模擬的異步操作已經看起來很像同步了。但是追求完美的我們肯定是無法忍受每次還要手動調用next方法來繼續執行流程的，為此TJ大神為社區貢獻了co模塊來自動化執行Generator，它的實現原理非常巧妙，源碼只有短短的200多行，感興趣可以去研究下。

const co = require('co')

co(function* () {
  const res1 = yield ['step-1']
  console.log(res1)
  // 若yield后面返回的是promise，則會等待它resolved后繼續執行之后的流程
  const res2 = yield new Promise((res) => {
    setTimeout(() => {
      res('step-2')
    }, 2500)
  })
  console.log(res2)
  return 'end'
}).then((data) => {
  console.log('end: ' + data)
})

這樣就讓異步的流程完全以同步的方式展示出來啦?~

Async/Await

ES7標準中引入的async函數，是對js異步解決方案的進一步完善，它有如下特點：

內置執行器：不用像generator那樣反復調用next方法，或者使用co模塊，調用即會自動執行，并返回結果
返回Promise：generator返回的是iterator對象，因此還不能直接用then來指定回調
await更友好：相比co模塊約定的generator的yield后面只能跟promise或thunk函數或者對象及數組，await后面既可以是promise也可以是任意類型的值（Object、Number、Array，甚至Error等等，不過此時等同于同步操作）

進一步說，async函數完全可以看作多個異步操作，包裝成的一個Promise對象，而await命令就是內部then命令的語法糖。

改寫后代碼如下：

async function testAsync() {
  const res1 = await new Promise((res) => {
    setTimeout(() => {
      res('step-1')
    }, 2000)
  })
  console.log(res1)
  const res2 = await Promise.resolve('step-2')
  console.log(res2)
  const res3 = await new Promise((res) => {
    setTimeout(() => {
      res('step-3')
    }, 2000)
  })
  console.log(res3)
  return [res1, res2, res3, 'end']
}

testAsync().then((data) => {
  console.log(data)
})

這樣不僅語義還是流程都非常清晰，即便是不熟悉業務的開發者也能一眼看出哪里是異步操作。