JavaScript ES6+: промисы и async/await

Асинхронное программирование — позволяет выполнять операции, не блокируя основной поток выполнения. В этом уроке мы рассмотрим, как работать с промисами и использовать синтаксис async/await для упрощения асинхронного кода.

Основы работы с промисами

Что такое промис?

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

• Pending (ожидание): начальное состояние, промис ещё не выполнен или отклонён
• Fulfilled (выполнен): операция завершена успешно
• Rejected (отклонён): операция завершена с ошибкой

Создание промиса

Чтобы создать промис, используйте конструктор Promise, который принимает функцию-обработчик (executor) с двумя параметрами: resolve и reject.

const myPromise = new Promise((resolve, reject) => {
    // Асинхронная операция
    const success = true; // Симуляция успеха

    if (success) {
        resolve("Операция выполнена успешно");
    } else {
        reject("Произошла ошибка");
    }
});

Методы промисов

.then()

Метод .then() используется для обработки успешного результата промиса

myPromise
    .then(result => {
        console.log(result); // Операция выполнена успешно
    })
    .catch(error => {
        console.error(error);
    });

.catch()

Метод .catch() используется для обработки ошибок

myPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error); // Произошла ошибка
    });

.finally()

Метод .finally() выполняется после завершения промиса, независимо от результата

myPromise
    .finally(() => {
        console.log("Завершение операции");
    });

Цепочка промисов

Промисы могут быть объединены в цепочку, что позволяет передавать данные между .then()

myPromise
    .then(result => {
        console.log(result);
        return "Следующий шаг";
    })
    .then(nextResult => {
        console.log(nextResult); // Следующий шаг
    })
    .catch(error => {
        console.error(error);
    });

Промисы и ошибки

Ошибки можно обрабатывать в цепочке промисов с помощью .catch()

const anotherPromise = new Promise((resolve, reject) => {
    reject("Ошибка в другом промисе");
});

anotherPromise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error); // Ошибка в другом промисе
    });

Как использовать async/await для работы с асинхронным кодом

Что такое async/await?

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

Создание функции с async/await

Чтобы объявить функцию как асинхронную, используйте ключевое слово async

async function myAsyncFunction() {
    return "Результат асинхронной функции";
}

Использование await

Ключевое слово await используется для ожидания выполнения промиса

async function fetchData() {
    const result = await myPromise;
    console.log(result); // Операция выполнена успешно
}
fetchData();

Обработка ошибок с помощью try/catch

Ошибки в асинхронных функциях можно обрабатывать с помощью блока try/catch

async function fetchDataWithErrorHandling() {
    try {
        const result = await anotherPromise;
        console.log(result);
    } catch (error) {
        console.error(error); // Ошибка в другом промисе
    }
}
fetchDataWithErrorHandling();

Сравнение промисов и async/await

• Промисы: требуют использования .then() и .catch(), что может усложнять чтение кода при глубокой вложенности
• Async/await: делает код более линейным и понятным, упрощает обработку ошибок

Практическое задание

Создайте простое приложение, использующее промисы и async/await для выполнения асинхронных запросов. Например, получите данные с публичного API и отобразите их на странице

Пример кода

async function getData() {
    try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts");
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("Ошибка при получении данных:", error);
    }
}

getData();

В этом уроке мы изучили основы работы с промисами и синтаксисом async/await в JavaScript. Теперь вы можете использовать эти инструменты для упрощения работы с асинхронным кодом

Если у вас есть вопросы, не стесняйтесь задавать их. Я здесь, чтобы помочь!

Рекомендации по дополнительным материалам

• Документация по MDN

Применяя эти знания на практике, вы сможете создавать более эффективные и читаемые асинхронные приложения на JavaScript!