現在Web應用程序對網頁的動態交換需要越來越高，因此越來越有必要進行密集的操作，例如發出外部網絡請求以檢索API數據。要在 JAVAScript 中處理這些操作，開發人員必須使用異步編程技術。

由于 JavaScript 是一種具有同步執行模型的單線程編程語言，用于處理一個又一個操作，因此它一次只能處理一個語句。但是，從 API 請求數據等操作可能需要不確定的時間，具體取決于所請求的數據大小、網絡連接速度和其他因素。如果以同步方式執行 API 調用，則在該操作完成之前，瀏覽器將無法處理任何用戶輸入，例如滾動或單擊按鈕。這稱為阻止。

為了防止阻塞行為，瀏覽器環境具有許多 JavaScript 可以訪問的異步 Web API，這意味著它們可以與其他操作并行運行，而不是按順序運行。這很有用，因為它允許用戶在處理異步操作時繼續正常使用瀏覽器。

作為 JavaScript 開發人員，您需要知道如何使用異步 Web API 并處理這些操作的響應或錯誤。在本文中，您將了解事件循環、通過回調處理異步行為的原始方法、更新的 ECMAScript 2015 添加的承諾以及使用異步/await 的現代實踐。

事件循環The Event Loop

下面開始介紹JavaScript如何通過事件循環Event Loop 實現異步操作的。

// Define three example functions
function step_first() {
  console.log(1)
}

function  step_second() {
  console.log(2)
}

function  step_third() {
  console.log(3)
}

執行后，將會得到如下順序輸出：

// Execute the functions
first()
second()
third()

也就是依次執行了step_first() step_second() step_third()

輸出是

1
2
3

下面以內置函數setTimeout 來演示異步機制。

// Define three example functions, but one of them contains asynchronous code
function step_first() {
  console.log(1)
}

function step_second() {
  setTimeout(() => {
    console.log(2)
  }, 0)
}

function step_third() {
  console.log(3)
}

也是依次執行了step_first() step_second() step_third()

但輸出卻是：

1
3
2

無論將setTimeOut 的超時設置為0秒還是5分鐘都不會有什么區別

- 異步代碼調用的console.log將在同步頂級函數之后執行。

發生這種情況是因為 JavaScript 主機環境（在本例中為瀏覽器）使用稱為事件循環Event Loop的概念來處理并發或并行事件。

棧Stack

棧或調用堆棧保存當前正在運行的函數的狀態。如果您不熟悉堆棧的概念，則可以將其想象為具有“最后進先出”（LIFO）屬性的數組，這意味著您只能在堆棧的末尾添加或刪除項目。JavaScript 將在堆棧中運行當前幀（或特定環境中的函數調用），然后將其刪除并轉到下一個幀。

對于僅包含同步代碼的示例，瀏覽器按以下順序處理執行：

添加step_first()到棧stack, 執行step_first() 當輸出1 后, 從棧stack 刪除step_first().
添加step_second() 到棧stack, 執行step_second() 當輸出1 后, 從棧stack 刪除step_second() .
添加step_third() 到棧stack, 執行step_third() 當輸出1 后, 從棧stack 刪除step_third() .

對于使用了setTimeout 的例子，執行順序如下：

添加step_first()到棧stack, 執行step_first() 當輸出1 后, 從棧stack 刪除step_first()..
添加step_second()到棧stack, 執行step_second().添加setTimeout() 到棧,執行 setTimeout()啟動一個定時器 timer 并將steTimeout 設置的異步函數添加到隊列queue, 從棧刪除setTimeout()
從棧stack刪除step_second().
添加step_third() 到棧stack, 執行step_third() 當輸出1 后, 從棧stack 刪除step_third().
事件循環檢查隊列 queue 找到異步函數setTimeout(), 添加console.log(2)到棧 stack，然后執行console.log(2). 輸出2 后，從棧刪除console.log(2).

隊列queue

隊列（也稱為消息隊列或任務隊列）是函數的等待區域。每當調用堆棧為空時，事件循環將從最舊的消息開始檢查隊列中是否有任何等待的消息。一旦找到一個，它就會將其添加到堆棧中，這將執行消息中的函數。

回調函數Callback Functions

在 setTimeout 示例中，具有超時的函數在主頂級執行上下文中的所有內容之后運行。但是，如果要確保其中一個函數（如step_thrid函數）在超時后運行，則必須使用異步編碼方法。此處的超時可以表示包含數據的異步 API 調用。您希望使用來自 API 調用的數據，但必須確保首先返回數據。

處理此問題的原始解決方案是使用回調函數Callback Functions。回調函數沒有特殊的語法;它們只是一個作為參數傳遞給另一個函數的函數。將另一個函數作為參數的函數稱為高階函數。根據此定義，如果將任何函數作為參數傳遞，則可以成為回調函數。回調本質上不是異步的，但可用于異步目的。

// A function
function fn() {
  console.log('Just a function')
}

// A function that takes another function as an argument
function higherOrderFunction(callback) {
  // When you call a function that is passed as an argument, it is referred to as a callback
  callback()
}

// Passing a function
higherOrderFunction(fn)

在此代碼中，您將定義一個函數 fn，定義一個將函數回調作為參數的函數更高階函數，并將 fn 作為回調傳遞給更高階函數。

運行此代碼將提供以下內容：

Just a function

完整例子如下

// Define three functions
function first() {
  console.log(1)
}

function second(callback) {  setTimeout(() => {
    console.log(2)

    // Execute the callback function
    callback()  }, 0)
}

function third() {
  console.log(3)
}

嵌套回調和末日金字塔Nested Callbacks and the Pyramid of Doom

回調函數是確保延遲執行函數直到另一個函數完成并返回數據的有效方法。但是，由于回調的嵌套性質，如果您有大量相互依賴的連續異步請求，則代碼最終可能會變得混亂。對于早期的JavaScript開發人員來說，這是一個很大的挫折，因此包含嵌套回調的代碼通常被稱為“厄運金字塔”或“回調地獄”。

如：

function pyramidOfDoom() {
  setTimeout(() => {
    console.log(1)
    setTimeout(() => {
      console.log(2)
      setTimeout(() => {
        console.log(3)
      }, 500)
    }, 2000)
  }, 1000)
}

在實踐中，使用現實世界的異步代碼，這可能會變得更加復雜。您很可能需要在異步代碼中執行錯誤處理，然后將每個響應中的一些數據傳遞到下一個請求。使用回調執行此操作會使代碼難以閱讀和維護。

下面是一個更現實的“厄運金字塔”的可運行示例，您可以玩弄它：

// Example asynchronous function
function asynchronousRequest(args, callback) {
  // Throw an error if no arguments are passed
  if (!args) {
    return callback(new Error('Whoa! Something went wrong.'))
  } else {
    return setTimeout(
      // Just adding in a random number so it seems like the contrived asynchronous function
      // returned different data
      () => callback(null, { body: args + ' ' + Math.floor(Math.random() * 10) }),
      500
    )
  }
}

// Nested asynchronous requests
function callbackHell() {
  asynchronousRequest('First', function first(error, response) {
    if (error) {
      console.log(error)
      return
    }
    console.log(response.body)
    asynchronousRequest('Second', function second(error, response) {
      if (error) {
        console.log(error)
        return
      }
      console.log(response.body)
      asynchronousRequest(null, function third(error, response) {
        if (error) {
          console.log(error)
          return
        }
        console.log(response.body)
      })
    })
  })
}

// Execute
callbackHell()

輸出：

First 9
Second 3
Error: Whoa! Something went wrong.
    at asynchronousRequest (<anonymous>:4:21)
    at second (<anonymous>:29:7)
    at <anonymous>:9:13

承諾Promises

承諾Promises表示異步函數的完成。它是一個將來可能返回值的對象。它實現了與回調函數相同的基本目標，但具有許多其他功能和更具可讀性的語法。作為 JavaScript 開發人員，您可能會花費比創建承諾更耗時，因為通常異步 Web API 會返回承諾供開發人員使用。本教程將向您展示如何同時執行這兩項操作。

創建一個承諾Creating a Promise

// Initialize a promise
const promise = new Promise((resolve, reject) => {})

在瀏覽器的console 可以看到輸出：

__proto__: Promise
[[PromiseStatus]]: "pending"
[[PromiseValue]]: undefined

增加resolve 的內容

const promise = new Promise((resolve, reject) => {
  resolve('We did it!')})

瀏覽器console 可以看到輸出：

__proto__: Promise
[[PromiseStatus]]: "fulfilled"
[[PromiseValue]]: "We did it!"

promise 有三種狀態: pending, fulfilled, and rejected.

Pending - 初始狀態
Fulfilled - 成功狀態， promise has resolved
Rejected - 失敗操作, promise has rejected

使用承諾Consuming a Promise

上一節中的承諾已通過值實現，但您還希望能夠訪問該值。承諾有一個調用的方法，該方法將在承諾在代碼中解析后運行。然后將返回承諾的值作為參數。

以下是返回并記錄示例承諾值的方式：

promise.then((response) => {
  console.log(response)
})

We did it!

到目前為止，您創建的示例不涉及異步 Web API，它僅解釋了如何創建、解析和使用本機 JavaScript 承諾。使用 set超時，您可以測試異步請求。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve('Resolving an asynchronous request!'), 2000)
})

// Log the result
promise.then((response) => {
  console.log(response)
})

Resolving an asynchronous request!

then 可以鏈式調用

// Chain a promise
promise
  .then((firstResponse) => {
    // Return a new value for the next then
    return firstResponse + ' And chaining!'
  })
  .then((secondResponse) => {
    console.log(secondResponse)
  })

Resolving an asynchronous request! And chaining!

錯誤處理Error Handling

到目前為止，你只處理了一個具有成功決心的承諾，這使承諾處于實現狀態。但是，對于異步請求，您通常還必須處理錯誤 - 如果 API 關閉，或者發送了格式不正確或未經授權的請求。承諾應該能夠處理這兩種情況。在本節中，您將創建一個函數來測試創建和使用承諾的成功和錯誤情況。

function getUsers(onSuccess) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // Handle resolve and reject in the asynchronous API
      if (onSuccess) {        resolve([          { id: 1, name: 'Jerry' },          { id: 2, name: 'Elaine' },          { id: 3, name: 'George' },        ])      } else {        reject('Failed to fetch data!')      }    }, 1000)  })
}

為了處理該錯誤，您將使用 catch 實例方法。這將為您提供一個失敗回調，其中錯誤作為參數。

// Run the getUsers function with the false flag to trigger an error
getUsers(false)
  .then((response) => {
    console.log(response)
  })
  .catch((error) => {
    console.error(error)
  })

Failed to fetch data!

使用 Fetch 和 Promises

返回承諾的最有用和最常用的 Web API 之一是 Fetch API，它允許您通過網絡發出異步資源請求。獲取是一個由兩部分組成的過程，因此需要鏈接。此示例演示如何通過 API 獲取用戶的數據，同時處理任何潛在的錯誤：

// Fetch a user from the prism3d.cn API
fetch('https://api.prism3d.cn/users/octocat')
  .then((response) => {
    return response.json()
  })
  .then((data) => {
    console.log(data)
  })
  .catch((error) => {
    console.error(error)
  })

login: "octocat",
id: 574232,
avatar_url: "https://avatars.prism3d.cn/u/574232"
blog: "https://blog.prism3d.cn"
company: "@prism3d"
followers: 1203
...

異步函數使用 async/await

異步函數允許您以顯示為同步的方式處理異步代碼。異步函數仍然在引擎蓋下使用承諾，但具有更傳統的JavaScript語法。在本節中，您將嘗試此語法的示例。

您可以通過在函數之前添加異步關鍵字來創建異步函數：

// Create an async function
async function getUser() {
  return {}
}

與如下功能相同，但是更為簡潔容易理解

getUser().then((response) => console.log(response))

完整樣例如下：

// Handling success and errors with async/await
async function getUser() {
  try {    // Handle success in try   
    const response = await fetch('https://api.prism3d.cn/users/octocat')
    const data = await response.json()

    console.log(data)
  } catch (error) {    // Handle error in catch    console.error(error)  }}