前言

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

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

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

異步是什么

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

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

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

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

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

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

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

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

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

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

雖然回調(diào)函數(shù)是一種簡單有效的方法，但它們也容易導(dǎo)致 回調(diào)地獄 ，因?yàn)楸匾奶幚沓绦蛐枰嗷デ短?，使代碼變得難以閱讀和維護(hù)。

Promise

Promise 是 ES6 中引入的一種新型異步編程模式，通過鏈?zhǔn)秸{(diào)用 then 方法，每一步都返回一個(gè) Promise 對象，從而避免了回調(diào)地獄的問題。

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

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

在這個(gè)示例中，我們定義了一個(gè) getData 函數(shù)來獲取數(shù)據(jù)，并使用 Promise 包裹了它。如果我們需要進(jìn)一步處理返回的數(shù)據(jù)，可以通過鏈?zhǔn)秸{(diào)用 then 方法來處理。

例如：

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

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

async/await

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

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

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

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

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

異步模式有哪些

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

事件監(jiān)聽

在 JavaScript 中，我們可以使用 addEventListener 來綁定一個(gè)事件的處理程序。當(dāng)事件發(fā)生時(shí)，它會(huì)自動(dòng)調(diào)用相應(yīng)的處理程序。

例如：

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

在這個(gè)例子中，我們通過 addEventListener 方法將 handleClick 函數(shù)添加為按鈕的 click 事件的處理程序。每當(dāng)按鈕被點(diǎn)擊時(shí)，handleClick 函數(shù)就會(huì)被調(diào)用。

發(fā)布/訂閱模式

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

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

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

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

結(jié)論

在 JavaScript 中，異步編程技術(shù)是高效利用計(jì)算機(jī)資源和提高代碼性能的關(guān)鍵。了解不同的異步編程模式和實(shí)現(xiàn)方式對于開發(fā)人員來說非常重要。

回調(diào)函數(shù)是最早出現(xiàn)的實(shí)現(xiàn)異步編程的方式之一，然而它易導(dǎo)致代碼的深層次嵌套，后來 Promise 通過鏈?zhǔn)秸{(diào)用方法讓代碼變得更加整潔，而 async/await 更是通過將代碼轉(zhuǎn)換為異步函數(shù)，簡化了異步代碼的編寫。

除此之外，還有事件監(jiān)聽、發(fā)布/訂閱等異步編程模式可以使用。不同的場景和需求需要采用不同的異步編程技術(shù)，排查異步回調(diào)地獄以獲得更好的可讀性和可維護(hù)性。

以上就是JavaScript異步編程的干貨知識(shí)點(diǎn)分享的詳細(xì)內(nèi)容，更多關(guān)于JavaScript異步編程的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論