Понимание промисов в JavaScript

Всем привет!

На написание этой статьи меня вдохновили мои ученики и подопечные. Подобных статей много в интернете, но эту я посвящаю новичкам (конкретно тем, кому нужно знать только основы).

Эта статья будет полезна, если вы только начинаете свой путь в качестве инженера по автоматизации контроля качества.

ВАЖНО. Это неполное руководство по асинхронным функциям и обещаниям. Если вы хотите узнать больше, лучше ознакомьтесь с веб-документами mdn.

Что обещают?

Говоря технически, Promise — это объект. Он представляет возможное завершение (или сбой) асинхронной операции и ее результирующее значение.

Лучшим примером объекта Promise является запрос HTTP:

Когда вы отправляете запрос - серверу требуется некоторое время для его обработки (это означает, что мы не получаем ответ от сервера сразу).

Как только сервер обработал запрос — мы получаем от него ответ. Как видно на снимке экрана, ответ сервера занял ~3 секунды.

КАК это работает в Javascript?

Итак, если бы мы выполнили функцию JavaScript fetch, чтобы получить ответ — мы также не получим его сразу.

То есть функция fetch вернет Promise вместо ответа:

С точки зрения JavaScript — он выполнил свою работу (запрос отправлен, не так ли?).

Если мы посмотрим на функцию fetch, мы увидим, что это функция, которая возвращает Promise<Response>:

Это означает, что эта функция возвращает Promise (конечно же). Но если мы подождем разрешения Promise, он вернет объект Response!

Как мы ждем? Ну, есть 2 способа сделать это…

Синхронный код

Используйте функцию затем:

Функция затем получает разрешенный объект (Response в текущем примере) — то есть все, что Promise<something> попало внутрь <> ;.

Асинхронный код

Использовать async / await:

Чем это отличается от того, что мы сделали в примере с синхронным (синхронным)?

1. Вам не нужна функция .then() для извлечения значения из функции async (fetch).

2. Ключевое слово await доступно в функциях async только.

3. Если вы не будете использовать слово await в асинхронных функциях (тех, которые возвращают объекты Promise) - они будут выполняться одновременно.

Асинхронный запуск кода

Promise.all([
  fetch(...),
  fetch(...),
  ...
]).then((responses) => {
    responses.forEach(value => console.log(value))
  })

const [responses] = await Promise.all([
  fetch(...),
  fetch(...),
  ...
])

responses.forEach(value => console.log(value))