Урок 3.4 Асинхронное программирование: Callbacks, Promises, Async/Await
Цели урока:
- Понять основы асинхронного программирования в JavaScript.
- Изучить работу с асинхронными операциями с использованием колбэков, промисов и async/await.
- Научиться управлять асинхронным кодом для эффективного выполнения задач.
Введение
Асинхронное программирование позволяет JavaScript выполнять длительные операции, такие как запросы к серверу или чтение файлов, без блокировки основного потока выполнения. Это делает приложения более отзывчивыми и улучшает пользовательский опыт.
1. Callbacks
Колбэки — это функции, передаваемые в качестве аргументов другим функциям для отложенного выполнения после завершения асинхронной операции.
- Пример с колбэком:
function loadData(url, callback) {
setTimeout(() => { // Имитация асинхронной операции
callback("Данные загружены");
}, 1000);
}
loadData("https://example.com/data", function(result) {
console.log(result); // Данные загружены
});
2. Promises
Промисы предоставляют более удобный и мощный способ управления асинхронными операциями по сравнению с колбэками. Позволяет отложенное выполнение определенных частей кода после завершения асинхронной операции.
- Создание и использование промиса:
let promise = new Promise(function(resolve, reject) {
setTimeout(() => resolve("Данные загружены"), 1000);
});
promise.then(
result => console.log(result), // Данные загружены
error => console.log(error) // Выполнено не будет
);
3. Async/Await
`Async/await` — синтаксический сахар над промисами, позволяющий писать асинхронный код, который выглядит как синхронный.
- Пример с async/await:
async function loadDataAsync(url) {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("Данные загружены"), 1000);
});
let result = await promise; // Ожидает выполнения промиса
console.log(result); // Данные загружены
}
loadDataAsync("https://example.com/data");
4. Управление ошибками
- В колбэках ошибки обрабатываются через передачу первого аргумента функции обратного вызова.
- В промисах для обработки ошибок используется метод `.catch()`.
- В async/await для обработки ошибок используется конструкция `try/catch`.
Задание для самостоятельной работы
1. Создайте функцию, возвращающую промис, который после задержки в 1 секунду либо успешно разрешается с данными, либо завершается с ошибкой. Используйте `.then()`, `.catch()` для обработки результата промиса.
2. Перепишите эту функцию с использованием async/await и обработайте возможные ошибки с помощью `try/catch`.
Заключение
Асинхронное программирование является ключевым аспектом современного JavaScript, позволяя создавать эффективные и отзывчивые приложения. Понимание и правильное использование колбэков, промисов и async/await значительно упрощает работу с асинхронными операциями и повышает качество кода.