Что такое callback-функции?
JuniorJavaScript #javascript #async #callbacks
Вопрос
Что такое callback-функция и где она используется?
Короткий ответ
Callback — это функция, переданная в другую функцию как аргумент, которая будет вызвана позже: сразу, после завершения асинхронной операции или в ответ на событие.
Подробный ответ
Callback-и — базовый строительный блок асинхронного JavaScript до появления промисов. Типичные сценарии:
- Асинхронные операции — функция вызывается, когда данные готовы (ответ сервера, чтение файла).
- Обработка событий — функция вызывается браузером при клике, вводе и т.д.
- Таймеры —
setTimeout/setIntervalвызывают callback через заданное время.
Главная проблема callback-подхода — callback hell: при цепочке из нескольких последовательных асинхронных шагов код уходит вправо вложенными друг в друга функциями, что затрудняет чтение и обработку ошибок. Именно это стало причиной появления Promise, а затем async/await.
Пример
// Асинхронная операция с callback
function fetchData(url, callback) {
fetch(url)
.then(response => response.json())
.then(data => callback(null, data))
.catch(error => callback(error))
}
fetchData('/api/posts', (error, data) => {
if (error) return console.error(error)
console.log(data)
})
// Обработка событий
button.addEventListener('click', () => {
console.log('Button clicked')
})
// Таймер
setTimeout(() => {
console.log('Прошло 2 секунды')
}, 2000)
// Callback hell: несколько последовательных шагов
getUser(id, (user) => {
getOrders(user.id, (orders) => {
getOrderDetails(orders[0].id, (details) => {
console.log(details) // вложенность растёт с каждым шагом
})
})
})
Дополнительные вопросы
- Что такое "callback hell" и как от него избавиться?
- Чем callback отличается от Promise по способу обработки ошибок?
- Что такое error-first callback (конвенция Node.js)?