聊聊JavaScript 異步編程史

作者： shenfq 2021-06-02 09:01:19

JavaScript 的運(yùn)行時(shí)是跑在單線程上的，是基于事件模型來(lái)進(jìn)行異步任務(wù)觸發(fā)的，不需要考慮共享內(nèi)存加鎖的問(wèn)題，綁定的事件會(huì)按照順序齊齊整整的觸發(fā)。要理解 JavaScript 的異步任務(wù)，首先就要理解 JavaScript 的事件模型。

[[403161]]

前言

早期的 Web 應(yīng)用中，與后臺(tái)進(jìn)行交互時(shí)，需要進(jìn)行 form 表單的提交，然后在頁(yè)面刷新后給用戶反饋結(jié)果。在頁(yè)面刷新過(guò)程中，后臺(tái)會(huì)重新返回一段 HTML 代碼，這段 HTML 中的大部分內(nèi)容與之前頁(yè)面基本相同，這勢(shì)必造成了流量的浪費(fèi)，而且一來(lái)一回也延長(zhǎng)了頁(yè)面的響應(yīng)時(shí)間，總是會(huì)讓人覺(jué)得 Web 應(yīng)用的體驗(yàn)感比不上客戶端應(yīng)用。

2004 年，AJAX 即“Asynchronous JavaScript and XML”技術(shù)橫空出世，讓 Web 應(yīng)用的體驗(yàn)得到了質(zhì)的提升。再到 2006 年，jQuery 問(wèn)世，將 Web 應(yīng)用的開(kāi)發(fā)體驗(yàn)也提高到了新的臺(tái)階。

由于 JavaScript 語(yǔ)言單線程的特點(diǎn)，不管是事件的觸發(fā)還是 AJAX 都是通過(guò)回調(diào)的方式進(jìn)行異步任務(wù)的觸發(fā)。如果我們想要線性的處理多個(gè)異步任務(wù)，在代碼中就會(huì)出現(xiàn)如下的情況：

getUser(token, function (user) { 
  getClassID(user, function (id) { 
    getClassName(id, function (name) { 
      console.log(name) 
    }) 
  }) 
})

我們經(jīng)常將這種代碼稱為：“回調(diào)地獄”。

事件與回調(diào)

眾所周知，JavaScript 的運(yùn)行時(shí)是跑在單線程上的，是基于事件模型來(lái)進(jìn)行異步任務(wù)觸發(fā)的，不需要考慮共享內(nèi)存加鎖的問(wèn)題，綁定的事件會(huì)按照順序齊齊整整的觸發(fā)。要理解 JavaScript 的異步任務(wù)，首先就要理解 JavaScript 的事件模型。

由于是異步任務(wù)，我們需要組織一段代碼放到未來(lái)運(yùn)行(指定時(shí)間結(jié)束時(shí)或者事件觸發(fā)時(shí))，這一段代碼我們通常放到一個(gè)匿名函數(shù)中，通常稱為回調(diào)函數(shù)。

setTimeout(function () { 
  // 在指定時(shí)間結(jié)束時(shí)，觸發(fā)的回調(diào) 
}， 800) 
window.addEventListener("resize", function() { 
  // 當(dāng)瀏覽器視窗發(fā)生變化時(shí)，觸發(fā)的回調(diào) 
})

未來(lái)運(yùn)行

前面說(shuō)過(guò)回調(diào)函數(shù)的運(yùn)行是在未來(lái)，這就說(shuō)明回調(diào)中使用的變量并不是在回調(diào)聲明階段就固定的。

for (var i = 0; i < 3; i++) { 
  setTimeout(function () { 
    console.log("i =", i) 
  }, 100) 
}

這里連續(xù)聲明了三個(gè)異步任務(wù)，100毫秒后會(huì)輸出變量 i 的結(jié)果，按照正常的邏輯應(yīng)該會(huì)輸出 0、1、2這三個(gè)結(jié)果。

然而，事實(shí)并非如此，這也是我們剛開(kāi)始接觸 JavaScript 的時(shí)候會(huì)遇到的問(wèn)題，因?yàn)榛卣{(diào)函數(shù)的實(shí)際運(yùn)行時(shí)機(jī)是在未來(lái)，所以輸出的 i 的值是循環(huán)結(jié)束時(shí)的值，三個(gè)異步任務(wù)的結(jié)果一致，會(huì)輸出三個(gè) i = 3。

經(jīng)歷過(guò)這個(gè)問(wèn)題的同學(xué)，一般都知道，我們可以通過(guò)閉包的方式，或者重新聲明局部變量的方式解決這個(gè)問(wèn)題。

事件隊(duì)列

事件綁定之后，會(huì)將所有的回調(diào)函數(shù)存儲(chǔ)起來(lái)，然后在運(yùn)行過(guò)程中，會(huì)有另外的線程對(duì)這些異步調(diào)用的回調(diào)進(jìn)行調(diào)度的處理，一旦滿足“觸發(fā)”條件就會(huì)將回調(diào)函數(shù)放入到對(duì)應(yīng)的事件隊(duì)列(這里只是簡(jiǎn)單的理解成一個(gè)隊(duì)列，實(shí)際存在兩個(gè)事件隊(duì)列：宏任務(wù)、微任務(wù))中。

滿足觸發(fā)條件一般有以下幾種情況：

DOM 相關(guān)的操作進(jìn)行的事件觸發(fā)，比如點(diǎn)擊、移動(dòng)、失焦等行為;
IO 相關(guān)的操作，文件讀取完成、網(wǎng)絡(luò)請(qǐng)求結(jié)束等;
時(shí)間相關(guān)的操作，到達(dá)定時(shí)任務(wù)的約定時(shí)間;

上面的這些行為發(fā)生時(shí)，代碼中之前指定的回調(diào)函數(shù)就會(huì)被放入一個(gè)任務(wù)隊(duì)列中，主線程一旦空閑，就會(huì)將其中的任務(wù)按照先進(jìn)先出的流程一一執(zhí)行。當(dāng)有新的事件被觸發(fā)時(shí)，又會(huì)重新放入到回調(diào)中，如此循環(huán)🔄，所以 JavaScript 的這一機(jī)制通常被稱為“事件循環(huán)機(jī)制”。

for (var i = 1; i <= 3; i++) { 
  const x = i 
  setTimeout(function () { 
    console.log(`第${x}個(gè)setTimout被執(zhí)行`) 
  }, 100) 
}

可以看到，其運(yùn)行順序滿足隊(duì)列先進(jìn)先出的特點(diǎn)，先聲明的先被執(zhí)行。

線程的阻塞

由于 JavaScript 單線程的特點(diǎn)，定時(shí)器其實(shí)并不可靠，當(dāng)代碼遇到阻塞的情況，即使事件到達(dá)了觸發(fā)的時(shí)間，也會(huì)一直等在主線程空閑才會(huì)運(yùn)行。

const start = Date.now() 
setTimeout(function () { 
  console.log(`實(shí)際等待時(shí)間: ${Date.now() - start}ms`) 
}, 300) 
 
// while循環(huán)讓線程阻塞 800ms 
while(Date.now() - start < 800) {}

上面代碼中，定時(shí)器設(shè)置了 300ms 后觸發(fā)回調(diào)函數(shù)，如果代碼沒(méi)有遇到阻塞，正常情況下會(huì) 300ms后，會(huì)輸出等待時(shí)間。

但是我們?cè)谶€沒(méi)加了一個(gè) while 循環(huán)，這個(gè)循環(huán)會(huì)在 800ms 后才結(jié)束，主線程一直被這個(gè)循環(huán)阻塞在這里，導(dǎo)致時(shí)間到了回調(diào)函數(shù)也沒(méi)有正常運(yùn)行。

Promise

事件回調(diào)的方式，在編碼的過(guò)程中，就特別容易造成回調(diào)地獄。而 Promise 提供了一種更加線性的方式編寫異步代碼，有點(diǎn)類似于管道的機(jī)制。

// 回調(diào)地獄 
getUser(token, function (user) { 
  getClassID(user, function (id) { 
    getClassName(id, function (name) { 
      console.log(name) 
    }) 
  }) 
}) 
 
// Promise 
getUser(token).then(function (user) { 
  return getClassID(user) 
}).then(function (id) { 
  return getClassName(id) 
}).then(function (name) { 
  console.log(name) 
}).catch(function (err) { 
  console.error('請(qǐng)求異常', err) 
})

Promise 在很多語(yǔ)言中都有類似的實(shí)現(xiàn)，在 JavaScript 發(fā)展過(guò)程中，比較著名的框架 jQuery、Dojo 也都進(jìn)行過(guò)類似的實(shí)現(xiàn)。2009 年，推出的 CommonJS 規(guī)范中，基于 Dojo.Deffered 的實(shí)現(xiàn)方式，提出 Promise/A 規(guī)范。也是這一年 Node.js 橫空出世，Node.js 很多實(shí)現(xiàn)都是依照 CommonJS 規(guī)范來(lái)的，比較熟悉的就是其模塊化方案。

早期的 Node.js 中也實(shí)現(xiàn)了 Promise 對(duì)象，但是 2010 年的時(shí)候，Ry(Node.js 作者)認(rèn)為 Promise 是一種比較上層的實(shí)現(xiàn)，而且 Node.js 的開(kāi)發(fā)本來(lái)就依賴于 V8 引擎，V8 引擎原生也沒(méi)有提供 Promise 的支持，所以后來(lái) Node.js 的模塊使用了 error-first callback 的風(fēng)格(cb(error, result))。

const fs = require('fs') 
// 第一個(gè)參數(shù)為 Error 對(duì)象，如果不為空，則表示出現(xiàn)異常 
fs.readFile('./README.txt', function (err, buffer) { 
  if (err !== null) { 
    return 
  } 
  console.log(buffer.toString()) 
})

這一決定也導(dǎo)致后來(lái) Node.js 中出現(xiàn)了各式各樣的 Promise 類庫(kù)，比較出名的就是 Q.js、Bluebird。關(guān)于 Promise 的實(shí)現(xiàn)，之前有寫過(guò)一篇文章，感興趣可以看看：《手把手教你實(shí)現(xiàn) Promise》。

在 Node.js@8 之前，V8 原生的 Promise 實(shí)現(xiàn)有一些性能問(wèn)題，導(dǎo)致原生 Promise 的性能甚至不如一些第三方的 Promise 庫(kù)。

所以，低版本的 Node.js 項(xiàng)目中，經(jīng)常會(huì)將 Promise 進(jìn)行全局的替換：

const Bulebird = require('bluebird') 
global.Promise = Bulebird

Generator & co

Generator(生成器) 是 ES6 提供的一種新的函數(shù)類型，主要是用于定義一個(gè)能自我迭代的函數(shù)。通過(guò) function * 的語(yǔ)法能夠構(gòu)造一個(gè) Generator 函數(shù)，函數(shù)執(zhí)行后會(huì)返回一個(gè)iteration(迭代器)對(duì)象，該對(duì)象具有一個(gè) next() 方法，每次調(diào)用 next() 方法就會(huì)在 yield 關(guān)鍵詞前面暫停，直到再次調(diào)用 next() 方法。

function * forEach(array) { 
  const len = array.length 
  for (let i = 0; i < len; i ++) { 
    yield i; 
  } 
} 
const it = forEach([2, 4, 6]) 
it.next() // { value: 2, done: false } 
it.next() // { value: 4, done: false } 
it.next() // { value: 6, done: false } 
it.next() // { value: undefined, done: true }

next() 方法會(huì)返回一個(gè)對(duì)象，對(duì)象有兩個(gè)屬性 value、done：

value：表示 yield 后面的值;
done：表示函數(shù)是否執(zhí)行完畢;

由于生成器函數(shù)具有中斷執(zhí)行的特點(diǎn)，將生成器函數(shù)當(dāng)做一個(gè)異步操作的容器，再配合上 Promise 對(duì)象的 then 方法可以將交回異步邏輯的執(zhí)行權(quán)，在每個(gè) yeild 后面都加上一個(gè) Promise 對(duì)象，就能讓迭代器不停的往下執(zhí)行。

function * gen(token) { 
  const user = yield getUser(token) 
  const cId = yield getClassID(user) 
  const name = yield getClassName(cId) 
  console.log(name) 
} 
 
const g = gen('xxxx-token') 
 
// 執(zhí)行 next 方法返回的 value 為一個(gè) Promise 對(duì)象 
const { value: promise1 } = g.next() 
promise1.then(user => { 
  // 傳入第二個(gè) next 方法的值，會(huì)被生成器中第一個(gè) yield 關(guān)鍵詞前面的變量接受 
  // 往后推也是如此，第三個(gè) next 方法的值，會(huì)被第二個(gè) yield 前面的變量接受 
  // 只有第一個(gè) next 方法的值會(huì)被拋棄 
  const { value: promise2 } = gen.next(user).value 
  promise2.then(cId => { 
    const { value: promise3, done } = gen.next(cId).value 
    // 依次先后傳遞，直到 next 方法返回的 done 為 true 
  }) 
})

我們將上面的邏輯進(jìn)行一下抽象，讓每個(gè) Promise 對(duì)象正常返回后，就自動(dòng)調(diào)用 next，讓迭代器進(jìn)行自執(zhí)行，直到執(zhí)行完畢(也就是 done 為 true)。

function co(gen, ...args) { 
  const g = gen(...args) 
  function next(data) { 
    const { value: promise, done } = g.next(data) 
    if (done) return promise 
    promise.then(res => { 
      next(res) // 將 promise 的結(jié)果傳入下一個(gè) yield 
    }) 
  } 
   
  next() // 開(kāi)始自執(zhí)行 
} 
 
co(gen, 'xxxx-token')

這也就是 koa 早期的核心庫(kù) co 的實(shí)現(xiàn)邏輯，只是 co 進(jìn)行了一些參數(shù)校驗(yàn)與錯(cuò)誤處理。通過(guò) generator 加上 co 能夠讓異步流程更加的簡(jiǎn)單易讀，對(duì)開(kāi)發(fā)者而言肯定是階段歡喜的一件事。

async/await

async/await 可以說(shuō)是 JavaScript 異步變成的解決方案，其實(shí)本質(zhì)上就是 Generator & co 的一個(gè)語(yǔ)法糖，只需要在異步的生成器函數(shù)前加上 async，然后將生成器函數(shù)內(nèi)的 yield 替換為 await。

async function fun(token) { 
  const user = await getUser(token) 
  const cId = await getClassID(user) 
  const name = await getClassName(cId) 
  console.log(name) 
} 
 
fun()