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

Async Await

@serverSerrverlesskiy

Существует специальный синтаксис 📖 для работы с промисами, который называется async/await.

Создание асинхронной функции#

creature

Асинхронная функция⚙️ определяется выражением асинхронной функции⚙️. Базовая функция⚙️ выглядит так:

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

Мы определяем функцию⚙️ как асинхронную с помощью async. Это ключевое🗝️ слово может использоваться с любым синтаксисом📖 объявления🗣️ функции⚙️:

// Function Declarationasync function foo() { ... }
// Function Expressionconst foo = async function () { ... }
// Arrow functionconst foo = async () => { ... }
// Class methodsclass Bar {    async foo() { ... }}

Stops

Как только мы определили функцию⚙️ как асинхронную, мы можем использовать ключевое🗝️ слово await. Это ключевое🗝️ слово помещается перед вызовом промиса, оно приостанавливает выполнение функции⚙️ до тех пор, пока промис не будет выполнен или отклонён.

Async#

run

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

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

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

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

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

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

Promise

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

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

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

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

Sumerian school

Ссылки:#

  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!