JavaScript異步編程的干貨知識點分享

更新時間：2023年06月04日 14:09:49 作者：??????????????????

異步是什么意思？如何實現(xiàn)異步編程？不同的異步模式有哪些？本文將圍繞這些問題和大家分享JavaScript異步編程中的重要知識點，需要的可以學習一下

前言

想象一下，如果所有的代碼必須按照順序執(zhí)行，每一個函數(shù)都必須等待前面的函數(shù)執(zhí)行完畢，那么這樣的程序將會變得極其緩慢，也使我們無法利用計算機硬件資源的優(yōu)勢。

這時候，JavaScript 的異步編程模式就為我們提供了可能性。

那么，異步是什么意思？如何實現(xiàn)異步編程？不同的異步模式有哪些？本文將圍繞這些問題展開討論。

異步是什么

異步指的是在某個請求處理結束之前，程序可以繼續(xù)執(zhí)行其他的操作，而不需要等待這個請求處理結束才能繼續(xù)執(zhí)行后面的代碼。

簡單來說，異步編程就是在發(fā)送一個請求后，立刻返回一個響應，而不必等待該請求的返回結果。相比之下，同步編程則需要等待請求完成之后，才能進行下一步的操作。

舉個例子：假設我們正在下載一個很大的文件，同步編程模式會讓我們一直等著下載完成后再去進行下一步的操作。但異步編程就可以讓我們邊下邊處理，減少等待時間。

如何實現(xiàn)異步編程？

實現(xiàn)異步編程的方式有很多種，其中比較常見的是回調函數(shù)、Promise 和 async/await。

回調函數(shù)

回調函數(shù)是最早出現(xiàn)的實現(xiàn)異步編程的方式之一?；卣{函數(shù)通常指定一個函數(shù)作為參數(shù)，并在異步操作完成后將結果傳遞給這個函數(shù)。

例如，我們可以通過以下方式使用回調函數(shù)來獲取 api 數(shù)據(jù)：

function getData(callback) {
  $.get('/api/data', function(data) {
    callback(data);
  });
}

在該代碼中，我們使用了 jQuery 的 $.get 方法發(fā)送請求，并在成功的時候使用傳遞的回調函數(shù)返回數(shù)據(jù)。當接收到數(shù)據(jù)后，回調函數(shù)被執(zhí)行并把數(shù)據(jù)傳遞給它。

雖然回調函數(shù)是一種簡單有效的方法，但它們也容易導致回調地獄，因為必要的處理程序需要相互嵌套，使代碼變得難以閱讀和維護。

Promise

Promise 是 ES6 中引入的一種新型異步編程模式，通過鏈式調用 then 方法，每一步都返回一個 Promise 對象，從而避免了回調地獄的問題。

假設我們需要通過 Promise 請求 api 獲取數(shù)據(jù)，代碼示例如下：

function getData() {
  return new Promise(function(resolve, reject) {
    $.get('/api/data', function(data) {
      resolve(data);
    });
  });
}

在這個示例中，我們定義了一個 getData 函數(shù)來獲取數(shù)據(jù)，并使用 Promise 包裹了它。如果我們需要進一步處理返回的數(shù)據(jù)，可以通過鏈式調用 then 方法來處理。

例如：

getData().then(function(data) {
  console.log(data);
});

盡管 Promise 已經(jīng)解決了回調地獄的問題，但是它仍然有一些限制。首先，我們需要手動創(chuàng)建一個 Promise 對象，而且會導致代碼變得冗長。其次，在較老的瀏覽器中，Promise 也不一定能夠工作，尤其在 IE 等瀏覽器中兼容性并不好。

async/await

async/await是 ES8 中引入的異步編程模式，本質上也是基于 Promise 的。async 表示該函數(shù)返回一個 Promise 對象，而 await 關鍵詞是用來等待一個 Promise 對象的結果。

在使用 async/await 編寫異步代碼時，我們不再需要手動創(chuàng)建和管理 Promise 對象，而是通過 async 關鍵字將其轉換為異步函數(shù)。以下是一個簡單的例子：

async function getData() {
  const data = await $.get('/api/data');
  return data;
}

在這個例子中，我們使用了 async/await 來等待 api 請求完成后獲取數(shù)據(jù)。await $get('/api/data') 這行代碼會阻塞代碼執(zhí)行，直到請求返回數(shù)據(jù)才會繼續(xù)執(zhí)行接下來的代碼。

雖然 async/await 看起來更簡潔，但是它仍然依賴于 Promise，并不能解決 Promise 無法兼容早期瀏覽器的問題。此外，如果錯誤處理不當，async/await 可能會使應用程序變得混亂并且難以維護。所以在使用 async/await 時一定要注意錯誤處理。

異步模式有哪些

除了上述常見的回調函數(shù)、Promise 和 async/await 外，還有其他一些實現(xiàn)異步編程的方式，例如事件監(jiān)聽、發(fā)布/訂閱模式、流式操作等。這里我們稍微介紹一下事件監(jiān)聽和發(fā)布/訂閱模式。

事件監(jiān)聽

在 JavaScript 中，我們可以使用 addEventListener 來綁定一個事件的處理程序。當事件發(fā)生時，它會自動調用相應的處理程序。

例如：

const button = document.querySelector('button');
function handleClick() {
  console.log('Button has been clicked');
}
button.addEventListener('click', handleClick);

在這個例子中，我們通過 addEventListener 方法將 handleClick 函數(shù)添加為按鈕的 click 事件的處理程序。每當按鈕被點擊時，handleClick 函數(shù)就會被調用。

發(fā)布/訂閱模式

發(fā)布/訂閱模式，也稱為觀察者模式，是一種常見的異步編程模式。在該模式中，訂閱者可以注冊對某一特定事件的監(jiān)聽，當該事件發(fā)生時，發(fā)布者會通知所有已注冊的訂閱者執(zhí)行相應操作。

在 JavaScript 中，我們可以使用 EventEmitter 類來實現(xiàn)此模式。以下是一個簡單的例子：

const EventEmitter = require('events');
class MyEmitter extends EventEmitter {}
const myEmitter = new MyEmitter();
myEmitter.on('event', () => {
  console.log('an event occurred!');
});
myEmitter.emit('event');

在這個例子中，我們通過創(chuàng)建一個 MyEmitter 類來擴展 EventEmitter，并在其上繼續(xù)添加事件和監(jiān)聽器。當 myEmitter.emit 方法被調用時，我們的回調函數(shù)就會被執(zhí)行。