Skip to main content

異步等待

@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 我們學校就這個話題。

Sumerian school

鏈接:

  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

🐛 🎨

Become a Patron!