Колбэки и ад колбэков

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Функцию в JavaScript можно передать в другую функцию так же спокойно, как число или строку. Функцию, переданную ради того, чтобы её вызвали потом, называют колбэком (англ. call back — «перезвонить»). Вы не вызываете её сами: вы оставляете номер, по которому вас наберут.

js

function greet(name, callback) {
  callback("Привет, " + name + "!");
}

greet("Аня", (text) => console.log(text));
greet("Боб", (text) => console.log(text.length));

Сначала предположите, что выведет код

Обратите внимание: скобок после callback при передаче нет. greet("Аня", fn) отдаёт саму функцию, greet("Аня", fn()) отдал бы её результат — самая частая опечатка новичка. И пока ничего асинхронного здесь нет: колбэк вызывается сразу, это просто ответ на вопрос «что сделать с результатом».

Настоящая польза появляется, когда результата пока не существует. Запрос к серверу, чтение файла, таймер — всё это заканчивается не в тот момент, когда вы написали строчку. Вернуть значение через return невозможно: возвращать нечего. Зато можно оставить функцию, которую вызовут, когда значение появится.

js

function loadUser(id, callback) {
  setTimeout(() => callback({ id: id, name: "Аня" }), 100);
}

console.log("старт");
loadUser(7, (user) => console.log("пришёл " + user.name));
console.log("финиш");

Сначала предположите, что выведет код

Порядок вывода важнее самого вывода: финиш печатается раньше, чем пришёл Аня. Движок не садится ждать таймер — он идёт дальше по коду, а колбэк вызывает позже, когда дойдут руки. Всё, что должно случиться «после», обязано жить внутри колбэка: снаружи данных ещё нет.

Колбэк — это не пауза. Вы не стоите у телефона: вы оставили номер и пошли дальше по коду.

Пока шаг один, всё честно. Беда начинается, когда шагов три и каждый следующий зависит от предыдущего: сначала пользователь, потом его заказы, потом детали заказа. Единственный способ дождаться — вложить колбэк в колбэк, а его — ещё в один.

js

function step(name, next) {
  setTimeout(() => { console.log("шаг " + name); next(); }, 10);
}
step("A", () => {
  step("B", () => {
    step("C", () => console.log("всё"));
  });
});

Сначала предположите, что выведет код

Это и есть ад колбэков (callback hell), он же «пирамида судьбы». Код рабочий, но читается он не сверху вниз, а вправо и вниз, а хвост из }); приходится расшифровывать глазами. Добавьте сюда шестой шаг и попробуйте вставить условие в середину — вот тут и становится больно.

Можно вынести каждый уровень в именованную функцию — отступы исчезнут.

js

function step(name, next) {
  setTimeout(() => { console.log("шаг " + name); next(); }, 10);
}
const finish = () => console.log("всё");
const doC = () => step("C", finish);
const doB = () => step("B", doC);
step("A", doB);

Сначала предположите, что выведет код

Стало плоско, но читать теперь надо снизу вверх, и каждому шагу нужно имя. Это лечение симптома: вложенность ушла, а связанность шагов через чужие вызовы осталась.

У асинхронного колбэка нет try/catch: к моменту вызова функция, которая его приняла, давно завершилась, и try вокруг вызова уже ничего не поймает. Поэтому в Node.js прижилось соглашение error-first: первый аргумент колбэка — ошибка, второй — результат. Всё прошло хорошо — первым приходит null.

js

function readConfig(name, cb) {
  if (name !== "app") return cb(new Error("нет файла " + name));
  cb(null, { theme: "dark" });
}

readConfig("app", (err, data) => console.log(err, data.theme));
readConfig("db", (err) => console.log(err.message));

Сначала предположите, что выведет код

Соглашение простое, а дисциплина утомительная: проверку if (err) надо писать на каждом уровне вложенности. И имена начинают путаться — во внутреннем колбэке своя переменная err, которая перекрывает внешнюю, так что забытая проверка тихо теряет ошибку.

js

function load(key, cb) {
  setTimeout(() => key === "bad" ? cb(new Error("нет " + key)) : cb(null, key), 10);
}
load("user", (err, user) => {
  if (err) return console.log("сбой: " + err.message);
  load("bad", (err2) => console.log(err2 ? "сбой: " + err2.message : user));
});

Сначала предположите, что выведет код

Главная беда колбэка — вовсе не отступы. Вы отдаёте свою функцию чужому коду и надеетесь: её вызовут, вызовут один раз, не забудут вызвать при ошибке, не позовут внезапно синхронно. Управление продолжением вашей программы оказалось у чужой библиотеки — это называют инверсией управления.

Промис переворачивает картину. Функция больше не забирает вашу функцию — она возвращает объект, обещание будущего результата. Обещание можно положить в переменную, передать дальше, навесить обработчик хоть через секунду. А гарантии даёт сам язык: сработает ровно один раз, ошибка не потеряется, вызов всегда асинхронный.

js

function step(name) {
  return new Promise((resolve) => {
    setTimeout(() => { console.log("шаг " + name); resolve(); }, 10);
  });
}
step("A")
  .then(() => step("B"))
  .then(() => console.log("всё"));

Сначала предположите, что выведет код

Вопрос	Колбэк	Промис
Где живёт результат	у чужого кода, который зовёт вашу функцию	в объекте, который можно передать и сохранить
Сколько раз сработает	как решит библиотека	ровно один раз
Ошибка	первым аргументом, проверка на каждом шаге	один .catch на всю цепочку
Три шага подряд	лестница вправо	столбик .then

Колбэки никуда не делись и не считаются злом. map, filter, sort, обработчики событий — все они принимают функцию, и это нормальный, читаемый код.

js

const nums = [1, 2, 3];
console.log(nums.map((n) => n * 2));
console.log(nums.filter((n) => n > 1));

Сначала предположите, что выведет код

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

Колбэк — функция, переданная другой функции, чтобы её вызвали позже: сразу и синхронно (map, filter) или когда придёт результат (setTimeout, запрос).
Асинхронный колбэк не останавливает выполнение: строки после вызова отработают раньше самого колбэка, поэтому всё, что зависит от результата, живёт внутри него.
Три зависимых шага складываются в лестницу, растущую вправо, — это и есть ад колбэков: код читается не сверху вниз, а по диагонали.
Соглашение error-first ставит ошибку первым аргументом, а результат — вторым; проверку if (err) приходится повторять на каждом уровне вложенности.
Промисы решают не только отступы: результат становится значением, которое можно передать, а язык гарантирует однократный вызов и доставку ошибки в .catch.

1/3console.log("A"); setTimeout(() => console.log("B"), 0); console.log("C"); — что выведется?

2/3Колбэк в стиле error-first получил (null, data). Что это значит?

3/3Что даёт промис, чего не гарантирует обычный колбэк?

Переведите функцию на error-first

Функция делит числа и отдаёт результат в колбэк, но про деление на ноль ничего не знает — колбэк получает Infinity и считает это нормальным ответом.

js

function divide(a, b, callback) {
  callback(a / b);
}

divide(10, 2, (result) => console.log(result));
divide(10, 0, (result) => console.log(result)); // Infinity — а хотелось бы ошибку

Сначала предположите, что выведет код

Перепишите divide в стиле error-first: при b === 0 колбэк должен получить первым аргументом new Error("деление на ноль"), а в обычном случае — null и результат.

Ошибку отдаём первым аргументом и сразу выходим из функции — иначе колбэк вызовется дважды.

jsлистинг · не запускается

function divide(a, b, callback) {
  if (b === 0) return callback(new Error("деление на ноль"));
  callback(null, a / b);
}

divide(10, 2, (err, res) => console.log(err, res)); // null 5
divide(10, 0, (err, res) => console.log(err.message, res)); // деление на ноль undefined

function divide(a, b, callback) {
  if (b === 0) return callback(new Error("деление на ноль"));
  callback(null, a / b);
}

divide(10, 2, (err, res) => console.log(err, res)); // null 5
divide(10, 0, (err, res) => console.log(err.message, res)); // деление на ноль undefined

Приём с return callback(...) — стандартный: он и завершает функцию, и передаёт ошибку одной строкой.

Разверните лестницу в цепочку промисов

Три шага выполняются по очереди, и каждый вложен в предыдущий. Перепишите так, чтобы wait возвращала промис, а вызовы шли плоским столбиком .then — вывод должен остаться прежним.

js

function wait(ms, name, done) {
  setTimeout(() => { console.log(name); done(); }, ms);
}
wait(10, "первый", () => {
  wait(10, "второй", () => {
    wait(10, "третий", () => console.log("готово"));
  });
}); // первый, второй, третий, готово

Сначала предположите, что выведет код

Вместо аргумента done функция возвращает промис, а resolve зовём там же, где раньше звали колбэк.

jsлистинг · не запускается

function wait(ms, name) {
  return new Promise((resolve) => {
    setTimeout(() => { console.log(name); resolve(); }, ms);
  });
}

wait(10, "первый")
  .then(() => wait(10, "второй"))
  .then(() => wait(10, "третий"))
  .then(() => console.log("готово")); // первый, второй, третий, готово

function wait(ms, name) {
  return new Promise((resolve) => {
    setTimeout(() => { console.log(name); resolve(); }, ms);
  });
}

wait(10, "первый")
  .then(() => wait(10, "второй"))
  .then(() => wait(10, "третий"))
  .then(() => console.log("готово")); // первый, второй, третий, готово

Ключевая деталь: внутри .then промис нужно именно вернуть. Без return (здесь его заменяет короткая стрелка без фигурных скобок) цепочка не станет ждать следующий шаг и порядок сломается.

Колбэки и ад колбэков

Видеоразбор темы за 5–7 минут

Функция, которую позовут позжепередана, но пока не вызвана

Колбэк как способ дождаться результатакогда значения ещё нет

Лестница, растущая вправокаждый шаг сдвигает код глубже

Ошибки: соглашение error-firstпервым аргументом идёт ошибка

Почему из этой боли выросли промисырезультат становится значением

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Переведите функцию на error-first

Разверните лестницу в цепочку промисов