跳到主要内容

異步等待

@serverSerrverlesskiy

有一種特殊的語法可以處理諾言 async / await.

創建一個異步函數​

creature

異步函數⚙️由異步函數表達式⚙️定義。 基本功能⚙️看起來像這樣：

async function foo() {
  const value = await somePromise()
  return value
}

我們定義一個函數⚙️使用 async. 此關鍵字可以與函數聲明的任何語法一起使用：

// Function Declaration
async function foo() { ... }

// Function Expression
const foo = async function () { ... }

// Arrow function
const foo = async () => { ... }

// Class methods
class Bar {
    async foo() { ... }
}

Stops

將函數定義為異步後，我們可以使用 await keyword. 該關鍵字放在 promise 調用之前，它將暫停功能，直到 promise 被實現或拒絕。

異步​

run

我們有關鍵字 async, 我們將其放在函數聲明之前以使其異步。 異步功能⚙️是一種功能⚙️，可以預期使用 await 關鍵字以運行異步代碼

嘗試在瀏覽器控制台中鍵入以下內容：

function hello() {
  return 'Hello'
}
hello()

該函數將返回 Hello. 沒什麼不尋常的。

但是，如果我們將其轉換為異步函數⚙️呢？ 請嘗試以下操作：

async function hello() {
  return 'Hello'
}
hello()

Promise

現在，函數調用將返回一個Promise。 這是異步函數的功能之一⚙️-它們返回 保證可以轉換為承諾的值。

您還可以創建一個異步函數表達式，如下所示：

// Function Expression
let hello = async function () {
  return hello()
}
hello()

您還可以使用箭頭功能 ⚙️：

let hello = async () => {
  return 'Hello'
}

所有這些功能⚙️做相同的事情。

要獲得已兌現承諾的價值，我們可以使用 .then() 堵塞：

hello().then(value => console.log(value))

… or even like this:

hello().then(console.log)

因此，添加關鍵字 async 使函數返回一個 promise，而不是一個值。 它還允許同步功能避免與啟動和維護等待相關的任何開銷。 只需添加 async 在功能⚙️使JS引擎自動優化代碼之前。

等待​

Wait

當您將異步功能與await關鍵字結合使用時，異步功能的好處變得更加明顯。 可以在任何基於promise的函數之前添加它⚙️，以使其等待promise完成，然後返回結果。 之後，執行下一個代碼塊

您可以使用 await 當調用任何返回諾言的函數時，包括 Web API 功能。

句法 :

let response = await fetch('https://jsonplaceholder.typicode.com/users')
let data = await response.json()

console.log(data[0].name + ' and ' + data[2].name)

錯誤處理 try ... catch​

code rewriting

如果要添加錯誤處理，則有幾種選擇。

您可以使用同步 try ... catch s與結構 async / await:

async function myFetch() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/users')
    let data = await response.json()
    console.log(data[0].name + ' and ' + data[2].name)
  } catch (e) {
    console.log(e)
  }
}

myFetch()

catch () {} 塊接受一個錯誤對象，我們將其命名為 e. 現在我們可以將其輸出到控制台，這將使我們能夠獲得消息 有關代碼在何處發生錯誤的信息

讓我們有目的地在url中創建一個錯誤並查看錯誤輸出。

async function myFetch() {
  try {
    let response = await fetch('https://jsonplaceholder.typicode.com/sers')
    let data = await response.json()
    console.log(data[0].name + ' and ' + data[2].name)
  } catch (e) {
    console.log(e)
  }
}

myFetch()

fetch error

全部的​

Conclusion

Async / await 允許您編寫易於閱讀和維護的異步代碼。 出於六個原因，為什麼最好使用它而不是應許閱讀 here.

問題?​

Problem

寫給 Discord chat.

問題:​

Question

在哪裡 async 關鍵字去嗎？

1.函數聲明前 2.函數聲明後 3.在功能主體中

有什麼功能 await上班嗎

1.僅在同步功能中 2.僅在異步功能中 3.任何功能

異步函數是：

1.這是由關鍵字定義的功能 async 2.此功能可預期使用 await 關鍵詞 3.兩種選擇都是正確的

的優勢 async / await 是：

1.自己的代碼被鎖定 2.擺脫代碼 .then() 塊 3.需要將期望的承諾包裝在異步函數中

這段代碼是什麼：

let hello = async function () {
  return hello()
}
hello()

1.同步功能 2.箭頭功能 3.異步函數表達式

為了了解您學到了多少本課程，請對 mobile application 我們學校就這個話題。

EnglishMoji!

鏈接:​

  1. Async-await
  2. How to master async / await in JavaScript with real examples
  3. Asynchronous programming with async / await

貢獻者 ✨​

感謝這些好人 (emoji key):


AlisaNasibullina

Dmitriy Vasilev
💵
Resoner2005
🐛 🎨

EnglishMoji!