前言

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

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

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

異步是什么

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

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

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

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

實(shí)現(xiàn)異步編程的方式有很多種，其中比較常見(jià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ù)。

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

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

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

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

Promise

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

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

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

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

例如：

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

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

async/await

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

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

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

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

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

異步模式有哪些

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

事件監(jiān)聽(tīng)

在 JavaScript 中，我們可以使用 addEventListener 來(lái)綁定一個(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è)例子中，我們通過(guò) addEventListener 方法將 handleClick 函數(shù)添加為按鈕的 click 事件的處理程序。每當(dāng)按鈕被點(diǎn)擊時(shí)，handleClick 函數(shù)就會(huì)被調(diào)用。

發(fā)布/訂閱模式

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

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

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

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

結(jié)論

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

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

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

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