一、異步編程的問題

在 Web 開發(fā)中，我們經(jīng)常需要進行異步操作，比如從服務(wù)器獲取數(shù)據(jù)，或者執(zhí)行耗時操作。這些任務(wù)通常需要一定的時間來完成，而在這段時間內(nèi)，JavaScript 不能停止執(zhí)行其他代碼，否則會導(dǎo)致界面卡住或者無響應(yīng)。因此，我們需要使用異步編程技術(shù)來處理這些操作。

傳統(tǒng)的異步編程技術(shù)有回調(diào)函數(shù)和 Promise。使用回調(diào)函數(shù)時，我們需要將后續(xù)的操作寫在回調(diào)函數(shù)中，這樣才能確保在異步操作完成后執(zhí)行?；卣{(diào)函數(shù)雖然簡單易用，但是嵌套多個回調(diào)函數(shù)會導(dǎo)致代碼難以閱讀和維護。而 Promise 解決了這個問題，它可以鏈式調(diào)用，避免了回調(diào)函數(shù)嵌套的問題。但是，Promise 的語法并不是那么直觀，需要一定的學(xué)習(xí)成本。

為了更加直觀地表達異步代碼，ES2017 引入了 Async/Await。Async/Await 可以使異步代碼看起來像同步代碼，這樣可以使代碼更加易于理解和維護。接下來，我們將詳細講解 Async/Await 的實現(xiàn)原理。

二、 Async/Await 的實現(xiàn)原理

Async 和 Await 都是異步編程的關(guān)鍵字。在 ES2017 中，Async 函數(shù)用來聲明一個異步函數(shù)，它的定義方式類似于普通的函數(shù)，但是在函數(shù)關(guān)鍵字前面添加 async 關(guān)鍵字，如下所示：

async function fetchData() {
  // 異步操作
}

我們可以在 Async 函數(shù)內(nèi)部使用 await 關(guān)鍵字來等待異步操作完成。await 表示等待異步操作返回結(jié)果后再繼續(xù)執(zhí)行后續(xù)的代碼。

async function fetchData() {
  const result = await fetch("/api/data");
  console.log(result);
}

這段代碼中，我們使用了 fetch 函數(shù)來獲取服務(wù)器數(shù)據(jù)，fetch 返回的是 Promise 實例。我們在該 Promise 實例前面加上 await 關(guān)鍵字，表示等待該 Promise 對象返回數(shù)據(jù)后再繼續(xù)執(zhí)行后續(xù)的代碼。

當(dāng) Async 函數(shù)被調(diào)用時，它返回的是一個 Promise 對象。Promise 對象有三種狀態(tài)：已完成、已拒絕和未完成。如果 Async 函數(shù)內(nèi)部沒有拋出異常，則該 Promise 對象將進入已完成狀態(tài)，并返回 Async 函數(shù)返回值；如果 Async 函數(shù)內(nèi)部拋出異常，則該 Promise 對象將進入已拒絕狀態(tài)，并返回拋出的異常。例如，下面這個例子中，Async 函數(shù)返回的 Promise 對象的狀態(tài)為已完成，并返回字符串 "Hello World!"：

async function hello() {
  return "Hello World!";
}
hello().then((result) => console.log(result)); // 輸出 "Hello World!"

在下面的示例中，我們使用 Async/Await 實現(xiàn)一個簡單的異步操作：

async function fetchData() {
  try {
    const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

在這個例子中，我們使用了 fetch 函數(shù)來獲取服務(wù)器數(shù)據(jù)，并且使用 await 等待數(shù)據(jù)返回。如果出現(xiàn)異常，則使用 try...catch 處理異常。這段代碼使用起來非常直觀和易于理解。

Async/Await 的同步實現(xiàn)原理

雖然使用 Async/Await 可以使異步代碼看起來像同步代碼，但是底層仍然是異步執(zhí)行的。那么，Async/Await 是如何通過同步的方式實現(xiàn)異步的呢？答案就是 Generator 函數(shù)和 Promise。

Generator 函數(shù)是一種特殊的函數(shù)，它可以被暫停和恢復(fù)執(zhí)行。在 Generator 函數(shù)中，我們可以使用 yield 關(guān)鍵字將控制權(quán)交給調(diào)用方，并在下次調(diào)用時從上次暫停的位置繼續(xù)執(zhí)行。這種特性可以用來實現(xiàn)異步操作。

Promise 是 ES6 引入的另一種異步編程技術(shù)。Promise 對象表示一個尚未完成或失敗的操作，它可以被異步執(zhí)行，并返回一個代表操作結(jié)果的值。

Async 函數(shù)實際上是一種特殊的 Generator 函數(shù)，它使用 yield 關(guān)鍵字暫停執(zhí)行，并在異步操作完成后，通過調(diào)用 next 方法恢復(fù)執(zhí)行。這個過程中，Async 函數(shù)內(nèi)部創(chuàng)建了一個 Promise 對象，并將該 Promise 對象返回給調(diào)用方。下面是 Async 函數(shù)的簡化版實現(xiàn)：

function asyncToGenerator(generatorFunc) {
  return function () {
    const generator = generatorFunc.apply(this, arguments);
    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let generatorResult;
        try {
          generatorResult = generator[key](arg);
        } catch (error) {
          reject(error);
        }
        const { value, done } = generatorResult;
        if (done) {
          resolve(value);
        } else {
          Promise.resolve(value).then(
            (result) => step("next", result),
            (error) => step("throw", error)
          );
        }
      }
      step("next");
    });
  };
}

這段代碼中，我們定義了一個名為 asyncToGenerator 的函數(shù)，它接收一個 Generator 函數(shù)作為參數(shù)，并返回一個 Promise 對象。在 asyncToGenerator 函數(shù)內(nèi)部，我們首先調(diào)用傳入的 Generator 函數(shù)，獲取到一個迭代器對象。然后，我們在 Promise 對象的構(gòu)造函數(shù)中使用遞歸調(diào)用的方式來處理每一次迭代。如果當(dāng)前迭代已經(jīng)完成，則調(diào)用 resolve 函數(shù)，將結(jié)果返回給調(diào)用方；否則，將該迭代的 Promise 對象通過 then 方法注冊成功和失敗回調(diào)函數(shù)，并在回調(diào)函數(shù)中繼續(xù)處理下一次迭代。

三、Async/Await 的使用場景

Async/Await 通常用于處理多個異步操作的情況，它可以避免回調(diào)地獄和 Promise 層層嵌套的問題。下面是一個具有挑戰(zhàn)性的使用場景。

假設(shè)我們需要獲取某些商品的信息并計算它們的總價格，其中每個商品需要從服務(wù)器獲取，并且需要等待前一個商品請求完成后才能發(fā)送下一次請求。在寫傳統(tǒng)異步代碼時，我們可能會陷入回調(diào)地獄：

function getTotalPrice(items) {
  let totalPrice = 0;
  fetchItem(0, items);
  function fetchItem(index, items) {
    if (index >= items.length) {
      console.log("totalPrice:", totalPrice);
      return;
    }
    const item = items[index];
    fetch(`/api/items/${item.id}`).then((response) => {
      response.json().then((data) => {
        item.price = data.price;
        totalPrice += item.price * item.count;
        fetchItem(index + 1, items);
      });
    });
  }
}

這段代碼中，我們首先定義了一個 getTotalPrice 函數(shù)，它接收一個商品列表作為參數(shù)，并計算所有商品的總價格。我們在該函數(shù)中定義了一個名為 fetchItem 的遞歸函數(shù)，用于依次獲取每個商品的價格，并累加到 totalPrice 變量中。在 fetchItem 函數(shù)中，我們使用 fetch 函數(shù)獲取商品信息，然后使用嵌套的 Promise.then 調(diào)用來等待異步操作返回。這段代碼雖然可行，但是非常難以理解和維護。

使用 Async/Await 可以讓代碼更加直觀和易于理解：

async function getTotalPrice(items) {
  let totalPrice = 0;
  for (let item of items) {
    const response = await fetch(`/api/items/${item.id}`);
    const data = await response.json();
    item.price = data.price;
    totalPrice += item.price * item.count;
  }
  console.log("totalPrice:", totalPrice);
}

可以看到，在上面的代碼中，我們使用了 Async/Await 和 for...of 循環(huán)，避免了回調(diào)地獄和 Promise 層層嵌套的問題。這樣的代碼看起來非常簡單和直觀。

四、小結(jié)一下

Async/Await 是一種比較新的異步編程技術(shù)，它使異步代碼看起來像同步代碼，更加直觀和易于理解。Async/Await 的實現(xiàn)原理是 Generator 函數(shù)和 Promise，它通過同步的方式實現(xiàn)異步。使用 Async/Await 可以避免回調(diào)地獄和 Promise 層層嵌套的問題。Async/Await 通常用于處理多個異步操作的情況，這樣的代碼看起來非常簡單和直觀。

以上就是JavaScript中Async/Await通過同步的方式實現(xiàn)異步的方法介紹的詳細內(nèi)容，更多關(guān)于JavaScript Async/Await異步的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論