本篇內(nèi)容介紹了“處理異步事件的方式有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)公司是一家專注于成都網(wǎng)站建設(shè)、網(wǎng)站制作與策劃設(shè)計,柳北網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:柳北等地區(qū)。柳北做網(wǎng)站價格咨詢:028-86922220

同步?異步?

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

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

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

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

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

我們最熟悉最的就是回調(diào)函數(shù)了。例如網(wǎng)頁與用戶進行互動時注冊的事件監(jiān)聽器，就需要接收一個回調(diào)函數(shù);或是其他 Web API 的各種功能如  setTimeout、xhr，也都能通過傳遞回調(diào)函數(shù)在用戶要求的時機去觸發(fā)。先看一個 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)過了指定的時間間隔之后，回調(diào)函數(shù)會被放到隊列的末端，再等待事件循環(huán)處理到它。

注意：也就時因為這種機制，開發(fā)者設(shè)定給 setTimeout 的時間間隔，并不會精準的等于從執(zhí)行到觸發(fā)所經(jīng)過的時間，使用時要特別注意!

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

Promise

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

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 時沒有提到的是，在HTML 5 的Web API 標準 中，Event Loop 新增了微任務(wù)隊列(micro task  queue)，而 Promise 正是通過微任務(wù)隊列來驅(qū)動它的;微任務(wù)隊列的觸發(fā)時機是在棧被清空時，JavaScript  引擎會先確認微任務(wù)隊列有沒有東西，有的話就優(yōu)先執(zhí)行，直到清空后才從隊列拿出新任務(wù)到棧上。

如上面的例子，當(dāng)函數(shù)回傳一個 Promise 時，JavaScript 引擎便會把后傳入的函數(shù)放到微任務(wù)隊列中，反復(fù)循環(huán)，輸出了上列的結(jié)果。后續(xù)的  .then 語法會回傳一個新的 Promise，參數(shù)函數(shù)則接收前一個 Promise.resolve  的結(jié)果，憑借這樣函數(shù)參數(shù)傳遞，讓開發(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

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

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  問世之后，異步代碼從回呼地獄逐漸變成了優(yōu)雅的函數(shù)式管道處理，但對于不熟悉度的開發(fā)者來說，只不過是從回調(diào)地獄變成了 Promise 地獄而已。

在 ES8 中規(guī)范了新的 async/await，雖然只是 Promise 和 Generator Function組合在一起的語法糖，但通過  async/await 便可以將異步事件用同步語法來處理，就好像是老樹開新花一樣，寫起來的風(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

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

再看一個例子：

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

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

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

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

“處理異步事件的方式有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！