Логотип YeaHub

База вопросов

Собеседования

Тренажёр

База ресурсов

Обучение

Навыки

Войти

Выбери, каким будет IT завтра — вместе c нами!

YeaHub — это полностью открытый проект, призванный объединить и улучшить IT-сферу. Наш исходный код доступен для просмотра на GitHub. Дизайн проекта также открыт для ознакомления в Figma.

© 2026 YeaHub

Документы

Медиа

Назад
Вопрос про JavaScript: callback hell, Promises, async await, ES6, asynchronous JavaScript

Как переписать callback-based код на ES6 (Promises/async-await)?

Вопрос проверяет умение модернизировать устаревший асинхронный код, использующий колбэки, на современные конструкции ES6, что критично для повышения читаемости и управляемости кода.

Короткий ответ

Код на колбэках можно переписать на ES6, используя промисы и async/await. Сначала оберни асинхронную функцию, принимающую колбэк, в промис. Затем используй цепочки .then() и .catch() для обработки успеха и ошибок. Для максимальной читаемости примени async/await, который позволяет писать асинхронный код почти как синхронный. Это устраняет "ад колбэков" и упрощает отладку.

Длинный ответ

Переход от колбэков к промисам и async/await — это ключевой шаг в модернизации JavaScript-кода. Колбэки приводят к вложенным структурам ("callback hell"), которые сложно читать и поддерживать. Промисы предоставляют более структурированный способ обработки асинхронных операций, а async/await делает код линейным и интуитивно понятным.

Шаг 1: Обёртка колбэка в промис

Любую функцию, которая использует колбэк в стиле (error, result) => {}, можно обернуть в промис. Это создаёт основу для дальнейших преобразований.

// Исходная функция с колбэком
function readFileCallback(path, callback) {
    // Имитация асинхронного чтения
    setTimeout(() => {
        const data = 'file content';
        callback(null, data); // Первый аргумент — ошибка
    }, 100);
}

// Обёртка в промис
function readFilePromise(path) {
    return new Promise((resolve, reject) => {
        readFileCallback(path, (err, data) => {
            if (err) reject(err);
            else resolve(data);
        });
    });
}

Шаг 2: Использование цепочек промисов

Вместо вложенных колбэков используйте методы .then() и .catch(). Это делает поток выполнения более явным.

// Колбэк-версия (плохо)
readFileCallback('file1.txt', (err, data1) => {
    if (err) console.error(err);
    else {
        processData(data1, (err, result) => {
            if (err) console.error(err);
            else console.log(result);
        });
    }
});

// Промис-версия (лучше)
readFilePromise('file1.txt')
    .then(data1 => processDataPromise(data1))
    .then(result => console.log(result))
    .catch(err => console.error(err));

Шаг 3: Применение async/await

Ключевые слова async и await позволяют работать с промисами так, будто это синхронный код. Функция, объявленная как async, всегда возвращает промис, а await приостанавливает выполнение до разрешения промиса.

// async/await версия (наиболее читаемая)
async function processFiles() {
    try {
        const data1 = await readFilePromise('file1.txt');
        const result = await processDataPromise(data1);
        console.log(result);
    } catch (err) {
        console.error(err);
    }
}
processFiles();

Где это применяется?

Этот подход используется везде, где есть асинхронные операции: работа с файловой системой в Node.js, сетевые запросы (API), взаимодействие с базами данных, таймеры. Современные библиотеки (например, для HTTP или баз данных) часто уже возвращают промисы, но legacy-код или некоторые нативные API Node.js (например, fs.readFile без промисов) требуют такой конвертации.

Вывод: Переписывайте callback-based код на async/await для повышения читаемости, упрощения обработки ошибок (через try/catch) и облегчения поддержки. Это особенно полезно в больших проектах, где важна ясность логики потока выполнения.

Уровень

  • Рейтинг:

    4

  • Сложность:

    3

Навыки

  • JavaScript

    JavaScript

Ключевые слова

#callback hell

#Promises

#async await

#ES6

#asynchronous JavaScript

Подпишись на React Developer в телеграм