在網(wǎng)站開(kāi)發(fā)中，異步事件是項(xiàng)目必然需要處理的一個(gè)環(huán)節(jié)，也因?yàn)榍岸丝蚣艿呐d起，通過(guò)框架實(shí)現(xiàn)的 SPA 已經(jīng)是快速建構(gòu)網(wǎng)站的標(biāo)配了，一部獲取數(shù)據(jù)也就成了不可或缺的一環(huán);本文來(lái)就講一講 JavaScript 中異步的處理方式。

[[349669]]

同步?異步?

首先當(dāng)然要先理解一下同步及異步分別是指什么。

這兩個(gè)名詞對(duì)于初學(xué)者來(lái)說(shuō)總是讓人感到困惑的，畢竟從中文字面上的意思很容易讓人反過(guò)來(lái)理解，從信息科學(xué)的角度來(lái)說(shuō)，[同步](https:// developer.mozilla.org/en-US/docs/Glossary/Synchronous) 指的是一件一件做事，而 異步 則是很多事情在一起并行的處理。

比如我們?nèi)ャy行辦理業(yè)務(wù)，在窗口前排隊(duì)就是同步執(zhí)行，而拿到號(hào)碼先去做別的事情的就是異步執(zhí)行;通過(guò) Event Loop 的特性，在 JavaScript 處里異步事件可說(shuō)是輕而易舉的

那么在 JavaScript 中處理異步事件的方法是什么呢?

回調(diào)函數(shù)

我們最熟悉最的就是回調(diào)函數(shù)了。例如網(wǎng)頁(yè)與用戶進(jìn)行互動(dòng)時(shí)注冊(cè)的事件監(jiān)聽(tīng)器，就需要接收一個(gè)回調(diào)函數(shù);或是其他 Web API 的各種功能如 setTimeout、xhr，也都能通過(guò)傳遞回調(diào)函數(shù)在用戶要求的時(shí)機(jī)去觸發(fā)。先看一個(gè) setTimeout 的例子：

// callback 
function withCallback() { 
  console.log('start') 
  setTimeout(() => { 
    console.log('callback func') 
  }, 1000) 
  console.log('done') 
}withCallback() 
// start 
// done 
// callback func 

在 setTimeout 被執(zhí)行后，當(dāng)過(guò)了指定的時(shí)間間隔之后，回調(diào)函數(shù)會(huì)被放到隊(duì)列的末端，再等待事件循環(huán)處理到它。

注意：也就時(shí)因?yàn)檫@種機(jī)制，開(kāi)發(fā)者設(shè)定給 setTimeout 的時(shí)間間隔，并不會(huì)精準(zhǔn)的等于從執(zhí)行到觸發(fā)所經(jīng)過(guò)的時(shí)間，使用時(shí)要特別注意!

回調(diào)函數(shù)雖然在開(kāi)發(fā)中十分常見(jiàn)，但也有許多難以避免的問(wèn)題。例如由于函數(shù)需要被傳遞給其他函數(shù)，開(kāi)發(fā)者難以掌控其他函數(shù)內(nèi)的處理邏輯;又因?yàn)榛卣{(diào)函數(shù)僅能配合 try … catch 捕捉錯(cuò)誤，當(dāng)異步錯(cuò)誤發(fā)生時(shí)難以控制;另外還有最著名的“回調(diào)地獄”。

Promise

幸好在 ES6 之后出現(xiàn)了 Promise，拯救了身陷在地獄的開(kāi)發(fā)者們。其基本用法也很簡(jiǎn)單：

function withPromise() { 
  return new Promise(resolve => { 
    console.log('promise func') 
    resolve() 
  }) 
} 
withPromise() 
  .then(() => console.log('then 1')) 
  .then(() => console.log('then 2')) 
// promise func 
// then 1 
// then 2 

之前討論 Event Loop 時(shí)沒(méi)有提到的是，在HTML 5 的Web API 標(biāo)準(zhǔn) 中，Event Loop 新增了微任務(wù)隊(duì)列(micro task queue)，而 Promise 正是通過(guò)微任務(wù)隊(duì)列來(lái)驅(qū)動(dòng)它的;微任務(wù)隊(duì)列的觸發(fā)時(shí)機(jī)是在棧被清空時(shí)，JavaScript 引擎會(huì)先確認(rèn)微任務(wù)隊(duì)列有沒(méi)有東西，有的話就優(yōu)先執(zhí)行，直到清空后才從隊(duì)列拿出新任務(wù)到棧上。

如上面的例子，當(dāng)函數(shù)回傳一個(gè) Promise 時(shí)，JavaScript 引擎便會(huì)把后傳入的函數(shù)放到微任務(wù)隊(duì)列中，反復(fù)循環(huán)，輸出了上列的結(jié)果。后續(xù)的 .then 語(yǔ)法會(huì)回傳一個(gè)新的 Promise，參數(shù)函數(shù)則接收前一個(gè) Promise.resolve 的結(jié)果，憑借這樣函數(shù)參數(shù)傳遞，讓開(kāi)發(fā)者可以管道式的按順序處理異步事件。

如果在例子中加上 setTimeout 就更能清楚理解微任務(wù)與一般任務(wù)的差別：

function withPromise() { 
  return new Promise(resolve => { 
    console.log('promise func') 
    resolve() 
  }) 
} 
withPromise() 
  .then(() => console.log('then 1')) 
  .then(() => setTimeout(() => console.log('setTimeout'), 0)) 
  .then(() => console.log('then 2')) 
// promise func 
// then 1 
// then 2 -> 微任務(wù)優(yōu)先執(zhí)行 
// setTimeout 

另外，前面所說(shuō)的回調(diào)函數(shù)很難處理的異步錯(cuò)誤，也可以通過(guò) .catch 語(yǔ)法來(lái)捕獲。

function withPromise() { 
  return new Promise(resolve => { 
    console.log('promise func') 
    resolve() 
  }) 
} 
withPromise() 
  .then(() => console.log('then 1')) 
  .then(() => { throw new Error('error') }) 
  .then(() => console.log('then 2')) 
  .catch((err) => console.log('catch:', err)) 
// promise func 
// then 1 
// catch: error 
//   ...error call stack 

async await

從 ES6 Promise 問(wèn)世之后，異步代碼從回呼地獄逐漸變成了優(yōu)雅的函數(shù)式管道處理，但對(duì)于不熟悉度的開(kāi)發(fā)者來(lái)說(shuō)，只不過(guò)是從回調(diào)地獄變成了 Promise 地獄而已。

在 ES8 中規(guī)范了新的 async/await，雖然只是 Promise 和 Generator Function組合在一起的語(yǔ)法糖，但通過(guò) async/await 便可以將異步事件用同步語(yǔ)法來(lái)處理，就好像是老樹(shù)開(kāi)新花一樣，寫(xiě)起來(lái)的風(fēng)格與 Promise 完全不同：

function wait(time, fn) { 
  return new Promise(resolve => { 
    setTimeout(() => { 
      console.log('wait:', time) 
      resolve(fn ? fn() : time) 
    }, time) 
  }) 
} 
await wait(500, () => console.log('bar')) 
console.log('foo') 
// wait: 500 
// bar 
// foo 

通過(guò)把 setTimeout 包裝成 Promise，再用 await 關(guān)鍵字調(diào)用，可以看到結(jié)果會(huì)是同步執(zhí)行的先出現(xiàn) bar，再出現(xiàn) foo，也就是開(kāi)頭提到的將異步事件寫(xiě)成同步處理。

再看一個(gè)例子：

async function withAsyncAwait() { 
  for(let i = 0; i < 5; i++) { 
    await wait(i*500, () => console.log(i)) 
  } 
}await withAsyncAwait() 
// wait: 0 
// 0 
// wait: 500 
// 1 
// wait: 1000 
// 2 
// wait: 1500 
// 3 
// wait: 2000 
// 4 

代碼中實(shí)現(xiàn)了withAsyncAwait 函數(shù)，用 for 循環(huán)及 await 關(guān)鍵字反復(fù)執(zhí)行 wait 函數(shù);此處執(zhí)行時(shí)，循環(huán)每次會(huì)按順序等待不同的秒數(shù)再執(zhí)行下一次循環(huán)。

在使用 async/await 時(shí)，由于 await 關(guān)鍵字只能在 async function 中執(zhí)行，使用時(shí)務(wù)必要記得要同時(shí)使用。

另外在用循環(huán)處理異步事件時(shí)，需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 語(yǔ)法，如果這里用 forEach 取代 for，結(jié)果會(huì)變成同步執(zhí)行，每隔 0.5 秒就打印出數(shù)字。

總結(jié)

本文簡(jiǎn)單介紹了 JavaScript 處理異步的三種方式，并通過(guò)一些簡(jiǎn)單的例子說(shuō)明代碼的執(zhí)行順序;呼應(yīng)前面提到的事件循環(huán)，再其中加入了微任務(wù)隊(duì)列的概念。希望幫你理解同步和異步的應(yīng)用。