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

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

傳統(tǒng)的異步實現(xiàn)

作為一個前端開發(fā)者，無論是瀏覽器端還是Node，相信大家都使用過事件吧，通過事件肯定就能想到回調(diào)函數(shù)，它就是實現(xiàn)異步最常用、最傳統(tǒng)的方式。

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

舉個栗子?：

// 最常見的ajax回調(diào)
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...
        })
        ...
    })
})

回調(diào)地獄就出現(xiàn)了。。。?

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

Promise

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

1. 對象的狀態(tài)不受外界影響：
   • Promise對象代表一個異步操作，有三種狀態(tài)：Pending（進行中）、Resolved（已完成，又稱 Fulfilled）和Rejected（已失?。?。
   • 只有異步操作的結果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)。
2. 一旦狀態(tài)改變，就不會再變，任何時候都可以得到這個結果。
   • Promise對象的狀態(tài)改變，只有兩種可能：從Pending變?yōu)镽esolved和從Pending變?yōu)镽ejected。
   • 只要這兩種情況發(fā)生，狀態(tài)就凝固了，不會再變了，會一直保持這個結果。
   • 如果改變已經(jīng)發(fā)生了，你再對Promise對象添加回調(diào)函數(shù)，也會立即得到這個結果。
   • 這與事件（Event）完全不同，事件的特點是，如果你錯過了它，再去監(jiān)聽，是得不到結果的。
3. 一旦聲明Promise對象（new Promise或Promise.resolve等），就會立即執(zhí)行它的函數(shù)參數(shù)，若不是函數(shù)參數(shù)則不會執(zhí)行

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
    })
})
...

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

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

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

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

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

總結如下：

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

2.一個Promise可設置多個then回調(diào)，會按定義順序執(zhí)行，如下

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

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

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

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

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

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

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()，盡管步驟清晰，但是對于我們這些追求極致優(yōu)雅的前端開發(fā)者來說，代碼全都是Promise的API（then、catch），操作的語義太抽象，還是讓人不夠滿意呀~

Generator

Generator是ES6規(guī)范中對協(xié)程的實現(xiàn)，但目前大多被用于異步模擬同步上了。

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

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

通過Generator實現(xiàn)異步：

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模擬的異步操作已經(jīng)看起來很像同步了。但是追求完美的我們肯定是無法忍受每次還要手動調(diào)用next方法來繼續(xù)執(zhí)行流程的，為此TJ大神為社區(qū)貢獻了co模塊來自動化執(zhí)行Generator，它的實現(xiàn)原理非常巧妙，源碼只有短短的200多行，感興趣可以去研究下。

const co = require('co')

co(function* () {
  const res1 = yield ['step-1']
  console.log(res1)
  // 若yield后面返回的是promise，則會等待它resolved后繼續(xù)執(zhí)行之后的流程
  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函數(shù)，是對js異步解決方案的進一步完善，它有如下特點：

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

進一步說，async函數(shù)完全可以看作多個異步操作，包裝成的一個Promise對象，而await命令就是內(nèi)部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)
})

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

總結

本文匯總了當前主流的JS異步解決方案，其實沒有哪一種方法最好或不好，都是在不同的場景下能發(fā)揮出不同的優(yōu)勢。而且目前都是Promise與其他兩個方案配合使用的，所以不存在你只學會async/await或者generator就可以玩轉(zhuǎn)異步。沒準以后又會出現(xiàn)一個新的方案，將已有的這幾種方案顛覆呢 ~

說實話，學過后端的人玩JavaScript會陷入一種困境，如果讓程序員自己處理可能會更符合邏輯，比如引入線程之類的，不過優(yōu)化起來又是一個問題了。。。

來源：https://blog.markeyme.cn/2018/06/09/ES6%E5%BC%82%E6%AD%A5%E6%96%B9%E5%BC%8F%E5%85%A8%E9%9D%A2%E8%A7%A3%E6%9E%90/