JavaScript使用回調(diào)，承諾和異步/等待異步操作； 1?；卣{(diào)是最古老的方法，但導(dǎo)致“回調(diào)地獄”和控制問(wèn)題的反轉(zhuǎn)； 2。承諾通過(guò).CATCH（）和.catch（）鏈提高可讀性和錯(cuò)誤處理； 3。異步/等待，建立在承諾上，使用等待內(nèi)部函數(shù)的函數(shù)和嘗試/捕捉錯(cuò)誤，提供了一種干淨(jìng)，同步的語(yǔ)法；如今，異步/等待新代碼的推薦方法由於其清晰度和可維護(hù)性，而在遺產(chǎn)環(huán)境中，應(yīng)避免使用回調(diào)。

長(zhǎng)期以來(lái)，JavaScript一直是單線程和非障礙物，這意味著它無(wú)法等待慢速操作，例如從服務(wù)器獲取數(shù)據(jù)。為了解決這個(gè)問(wèn)題，JavaScript進(jìn)化了幾種用於處理異步操作的模式：回調(diào)，承諾和異步/等待。如果您曾經(jīng)對(duì)何時(shí)或?yàn)槭颤N使用每個(gè)人都感到困惑，那麼您並不孤單。讓我們?cè)趯?shí)用的現(xiàn)代背景下將它們分解。

回調(diào)：原始方式（和“回調(diào)地獄”）

回調(diào)是作為參數(shù)傳遞給其他函數(shù)的函數(shù)，在完成任務(wù)後將執(zhí)行。

函數(shù)fetchdata（回調(diào)）{
  settimeout（（）=> {
    回調(diào)（“獲取數(shù)據(jù)！”）;
  }，1000）;
}

fetchdata（（結(jié)果）=> {
  console.log（結(jié)果）; //“獲取數(shù)據(jù)！” 1秒後
}）;

這對(duì)於簡(jiǎn)單的情況很好，但是當(dāng)您進(jìn)行多個(gè)異步操作時(shí)會(huì)出現(xiàn)問(wèn)題：

 fetchdata（（data1）=> {
  ProcessData（data1，（data2）=> {
    savedata（data2，（data3）=> {
      console.log（'全部完成：'，data3）;
    }）;
  }）;
}）;

這種嵌套被稱(chēng)為“回調(diào)地獄” - 很難閱讀，調(diào)試和維護(hù)。

？關(guān)鍵問(wèn)題：控制倒置。您將邏輯交給另一個(gè)功能，並信任它正確調(diào)用您的回調(diào) - 只有一次。

承諾：一種更好的鏈條異步邏輯的方法

承諾通過(guò)表示未來(lái)價(jià)值來(lái)解決許多回調(diào)問(wèn)題。諾言可以待定，實(shí)現(xiàn)或拒絕。

函數(shù)fetchdata（）{
  返回新的承諾（（分辨率，拒絕）=> {
    settimeout（（）=> {
      分辨（“獲取數(shù)據(jù)！”）;
    }，1000）;
  }）;
}

fetchdata（）
  。然後（（結(jié)果）=> {
    console.log（結(jié)果）;
  }））
  .catch（（錯(cuò)誤）=> {
    Console.Error（“出現(xiàn)問(wèn)題：”，錯(cuò)誤）；
  }）;

現(xiàn)在，您可以乾淨(jìng)地進(jìn)行連鎖操作：

 fetchdata（）
  然後（processData）
  然後（Savedata）
  。
  .catch（err => console.error（err））;

?好處：

• 避免深築巢
• 使用.catch()的集中錯(cuò)誤處理
• 您可以控制流程而不是交出流程

.then().then().catch()

異步/等待：編寫(xiě)看起來(lái)同步的異步代碼

async/await是在承諾之上構(gòu)建的，可以讓您像同步一樣編寫(xiě)異步代碼 - 而不會(huì)阻止線程。

異步函數(shù)whindata（）{
  嘗試 {
    const data1 =等待fetchdata（）;
    const data2 =等待processData（data1）;
    const data3 =等待savedata（data2）;
    console.log（'完成：'，data3）;
  } catch（錯(cuò)誤）{
    Console.Error（'錯(cuò)誤：'，錯(cuò)誤）;
  }
}

andledata（）;

這是發(fā)生的事情：

• async函數(shù)總是回報(bào)諾言
• await暫停執(zhí)行，直到承諾解決（但不會(huì)阻止線程！）
• 就像同步代碼一樣，使用try/catch進(jìn)行錯(cuò)誤處理

？專(zhuān)家提示：您可以await任何諾言 - 包括fetch() ， setTimeout （帶包裝器）或您自己的自定義異步功能。

您甚至可以並行運(yùn)行操作：

異步函數(shù)loadAll（）{
  const [result1，result2] =等待承諾。
    fetch（'/api/user'），
    fetch（'/api/posts'）
  ）;
  返回{result1，result2};
}

那麼，您今天應(yīng)該使用哪個(gè)？

• ?回調(diào)：除非使用Legacy API，否則請(qǐng)避免在新代碼中。它們?nèi)菀壮鲥e(cuò)，難以擴(kuò)展。
• ?承諾：非常適合簡(jiǎn)單鏈，或者當(dāng)您無(wú)法使用async/await （例如，在較舊環(huán)境中的頂級(jí)代碼）。
• ??異步/等待：現(xiàn)代標(biāo)準(zhǔn)。在幾乎所有新的異步代碼中使用它 - 更清潔，更易於調(diào)試，並且更可讀。

??記?。?await僅在async功能中起作用。因此，除非回調(diào)為async ，否則您不能直接在.map()或.forEach()中使用它。

最後的想法

回調(diào)的演變→承諾→異步/等待，將JavaScript的增長(zhǎng)轉(zhuǎn)化為用於復(fù)雜應(yīng)用程序的強(qiáng)大語(yǔ)言。雖然您仍然會(huì)在較舊的代碼或node.js apis中遇到回調(diào)，但是現(xiàn)代javascript偏愛(ài)異步/等待清晰度和可維護(hù)性。

了解它們?nèi)绾我黄鸸ぷ?-異步/等待的是句法糖，而不是承諾取代了回調(diào)的陷阱- 使您有能力閱讀，調(diào)試和編寫(xiě)更好的異步代碼。

基本上，除非有理由不這樣做，否則請(qǐng)使用async/await ?，F(xiàn)在您知道為什麼它有效。

以上是現(xiàn)代JavaScript：脫神秘的異步/等待，應(yīng)許和回調(diào)的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！