了解異步等待-css教學-PHP中文網

首頁

web前端

css教學

了解異步等待

Jennifer Aniston

Apr 12, 2025 am 09:55 AM

了解異步等待

在為Web編寫代碼時，最終您需要進行一些可能需要一些時間才能完成的過程。 JavaScript無法真正多任務，因此我們需要一種處理這些長期運行過程的方法。

異步/等待是處理此類基於時間的測序的一種方式。當您需要提出某種網絡請求然後使用結果數據時，這尤其適合。讓我們挖！

承諾？承諾。

異步/等待是一種承諾。 JavaScript中的承諾是可以具有多個狀態的對象（類似於現實生活的對象☺️）。承諾這樣做是因為有時我們要求的東西不立即可用，我們需要能夠檢測到它的狀態。

考慮某人要求您保證為他們做些事情，例如幫助他們移動。他們詢問的是最初的狀態。但是，直到出現並幫助他們移動之前，您才履行對他們的諾言。如果您取消計劃，則拒絕了承諾。

同樣，在JavaScript中承諾的三個可能的狀態是：

待處理：當您第一次致電時，尚不清楚它將返回什麼。
實現：這意味著操作成功完成
拒絕：操作失敗

這是這些州的承諾的一個例子：

這是滿足的狀態。我們存儲一個名為GetometAcos的承諾，通過解決方案並拒絕參數。我們告訴我們的諾言已經解決，這使我們可以再安裝兩次。

 const getOmetAcos = new Promise（（（分辨，拒絕）=> {
  console.log（“初始狀態：對不起，我可以吃一些炸玉米餅嗎”）；

  解決（）;
}））
  。然後（（）=> {
    console.log（“訂購一些炸玉米餅”）;
  }））
  。然後（（）=> {
    console.log（“這是您的炸玉米餅”）;
  }））
  .catch（err => {
    Console.Error（“不！沒有炸玉米餅。”）;
  }）;

 >初始狀態：對不起，我可以吃點炸玉米餅嗎
>訂購一些炸玉米餅
>這是你的炸玉米餅

如果我們選擇被拒絕的狀態，我們將執行相同的功能，但這次拒絕它。現在，將打印到控制台的是初始狀態和捕獲錯誤：

 const getOmetAcos = new Promise（（（分辨，拒絕）=> {
  console.log（“初始狀態：對不起，我可以吃一些炸玉米餅嗎”）；

  拒絕（）;
}））
  。然後（（）=> {
    console.log（“訂購一些炸玉米餅”）;
  }））
  。然後（（）=> {
    console.log（“這是您的炸玉米餅”）;
  }））
  .catch（err => {
    Console.Error（“不！沒有炸玉米餅。”）;
  }）;

 >初始狀態：對不起，我可以吃點炸玉米餅嗎
>不！沒有炸玉米餅。

當我們選擇待處理狀態時，我們將簡單地console.log我們存儲的內容，getOmetAcos。這將打印出懸而未決的狀態，因為那是我們記錄下來的承諾所處於的狀態！

 console.log（getometAcos）

 >初始狀態：對不起，我可以有一些＆＃x1f32e;
> Promise {<perdend>}
>訂購一些＆＃x1f32e; s
>這是您的＆＃x1f32e; s</perdend>

那呢？

但這是一開始讓我感到困惑的部分。為了從承諾中獲得價值，您必須使用.when（）或返回諾言解決方案的東西。如果您考慮一下，這是有道理的，因為您需要捕獲最終將是什麼（而不是最初），因為它最初將處於等待狀態。這就是為什麼當我們記錄上面的承諾時，我們看到它會打印出諾言{}的原因。在執行中，這一點還沒有解決。

在您剛剛看到的那些承諾之上，異步/等待的是句法糖。這是我如何使用它以及安排多次執行的一個小例子。

異步函數炸玉米餅（）{
  返回等待Promise.resolve（“然後我不時吃美味的炸玉米餅！”）
};

炸玉米餅（）。然後（console.log）

或更深入的例子：

 //這是我們要安排的功能。這是一個諾言。
const addOne =（x）=> {
  返回新的承諾（resolve => {
    settimeout（（）=> { 
      console.log（`我添加了一個！現在是$ {x 1}。）
      解決（）
    }，2000）;
  }））
}

//我們將立即記錄第一個， 
//然後，Addone Promise將運行，需要2秒
//然後最終控制台。 Log將開火
異步函數addAsync（）{
  console.log（'我有10'）
  等待addone（10）
  console.log（`現在我已經完成了！`）
}

addAsync（）

 >我有10個
>我添加了一個！現在是11。
>現在我完成了！

一件事（a）等待另一件事

異步/等待的一種常見用途是將其用於鏈多個異步調用。在這裡，我們將獲取一些JSON，我們將使用這些JSON進入下一個獲取呼叫，以找出要從第二個API中獲取哪種類型的東西。在我們的情況下，我們想訪問一些編程笑話，但是我們首先需要從其他API中找出我們想要的類型的報價。

第一個JSON文件看起來像這樣 - 我們希望報價類型是隨機的：

 {
  “類型”：“隨機”
}

考慮到我們剛剛得到的隨機查詢參數，第二個API將返回看起來像這樣的東西：

 {
  “ _id”：“ 5A933F6F8E7B510004CBA4C2”，
  “ en”：“儘管如此，計算機是一個苛刻的任務主管。它的程序必須是正確的，我們希望說的是必須在每個細節上準確地說。
  “作者”：“ Alan Perlis”，
  “ ID”：“ 5A933F6F8E7B510004CBA4C2”
}

我們調用異步函數，然後讓它等待去檢索第一個.json文件，然後才能從API獲取數據。一旦發生這種情況，我們就可以對該響應做一些事情，例如將其添加到我們的頁面中。

異步函數getQuote（）{
  //從一個獲取電話中獲取報價的類型，其他所有內容都等待這一點
  令soiteTyPeresponse =等待提取（`https：//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/quotes.json`）
  令qouteType =等待foiteTyPeresponse.json（）（）

    //使用我們從第二個通話中的第一個電話中獲得的收到的東西，其他所有內容都等待了這一點
  令quoteresponse =等待提取（“ https://programming-quotes-api.herokuapp.com/quotes/” quoteType.type）
  令Quote =等待引用QUONSE.JSON（）

  //完成
  console.log（'DONE'）
}

我們甚至可以使用模板文字和箭頭功能簡化此內容：

異步函數getQuote（）{
  //從一個獲取電話中獲取報價的類型，其他所有內容都等待這一點
  令quoteType =等待提取（`quates.json`）。然後（res => res.json（））

    //使用我們從第二個通話中的第一個電話中獲得的收到的東西，其他所有內容都等待了這一點
  讓QUOTE =等待提取（`programming-quotes.com/$ {quoteType.type}`）。然後（res => res.json（））

  //完成
  console.log（'DONE'）
}

getQuote（）

這是對此過程的動畫解釋。

嘗試，抓住，最後

最終，我們希望將錯誤狀態添加到此過程中。我們有方便的嘗試，捕捉，最後阻止。

嘗試 {
  //我會嘗試為您執行一些代碼
}
捕獲（錯誤）{
  //我將在此過程中處理任何錯誤
} 
最後 {
  //我會以任何方式開火
}

讓我們重組上面的代碼以使用此語法並捕獲任何錯誤。

異步函數getQuote（）{
  嘗試 {
    //從一個獲取電話中獲取報價的類型，其他所有內容都等待這一點
    令quoteType =等待提取（`quates.json`）。然後（res => res.json（））

      //使用我們從第二個通話中的第一個電話中獲得的收到的東西，其他所有內容都等待了這一點
    讓QUOTE =等待提取（`programming-quotes.com/$ {quoteType.type}`）。然後（res => res.json（））

    //完成
    console.log（'DONE'）
  }

  捕獲（錯誤）{
    console.warn（`我們在這裡有一個錯誤：$ {error}`）
  }
}

getQuote（）

我們最終沒有在這裡使用，因為我們並不總是需要它。這是一個塊，無論成功還是失敗，它將始終發射。考慮最終在嘗試捕捉的任何重複事物時最終使用。我通常將其用於清理。我寫了一篇文章，如果您想知道更多。

您最終可能需要更複雜的錯誤處理，例如一種取消異步函數的方法。不幸的是，沒有辦法在本地進行此操作，但是值得慶幸的是，凱爾·辛普森（Kyle Simpson）創建了一個名為CAF的庫，可以提供幫助。