मुख्य कंटेंट तक स्किप करें

Async Await

@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. Это ключевое🗝️ слово помещается перед вызовом промиса, оно приостанавливает выполнение функции⚙️ до тех пор, пока промис не будет выполнен или отклонён.

Async

run

У нас есть ключевое🗝️ слово async, которое мы помещаем перед объявлением🗣️ функции⚙️, чтобы сделать ее асинхронной. Асинхронная функция⚙️ — это функция⚙️, которая предвосхищает возможность использования ключевого🗝️ слова await для запуска асинхронного кода📟 .

Попробуйте набрать в консоли браузера следующее:

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

Функция⚙️ вернет 'Hello'. Ничего необычного.

Но что если мы превратим ее в асинхронную функцию⚙️? Попробуйте сделать следующее:

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

Promise

Теперь вызов функции⚙️ возвращает🔄 обещание. Это одна из особенностей асинхронных функций⚙️ — они возвращают🔄 значения, которые гарантировано преобразуются в обещания.

Вы также можете создать🏗️ асинхронное функциональное⚙️ выражение, например, так:

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

Также можно использовать стрелочные функции⚙️:

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

Все эти функции⚙️ делают одно и тоже.

Для того, чтобы получить значение завершенного обещания, мы можем использовать блок .then():

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

… или даже так:

hello().then(console.log)

Таким образом, добавление ключевого🗝️ слова async заставляет функцию⚙️ возвращать🔄 обещание вместо значения. Кроме того, это позволяет синхронным функциям избегать любых накладных расходов, связанных с запуском и поддержкой использования await. Простое добавление async перед функцией⚙️ обеспечивает автоматическую оптимизацию кода📟 движком JS.

Await

Wait

Преимущества асинхронных функций⚙️ становятся еще более очевидными, когда вы комбинируете их с ключевым🗝️ словом await. Оно может быть добавлено перед любой основанной на обещаниях функцией⚙️, чтобы заставить ее дожидаться завершения обещания, а затем вернуть результат. После этого выполняется следующий блок кода📟 .

Вы можете использовать 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 вместе с 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 позволяет писать 🖊️ асинхронный код, который легко читать и поддерживать. Шесть причин почему его лучше использовать вместо промисов читайте здесь.

Проблемы?

Problem

Пишите в Discord или телеграмм чат, а также подписывайтесь на наши новости

Вопросы:

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. Асинхронное функциональное выражение

Для того чтобы понять, на сколько вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме.

JS Camp

Ссылки:

  1. Async-await
  2. Как освоить Async / Await в JavaScript на реальных примерах
  3. Асинхронное программирование с async/await

Contributors ✨

Thanks goes to these wonderful people (emoji key):


AlisaNasibullina

📖

Dmitriy Vasilev

💵

Resoner2005

🐛 🎨

Become a Patron!