144просмотров
11 декабря 2024 г.
Score: 158
🚀 Как управлять асинхронностью через колбеки
🍀 Асинхронная функция в JavaScript — это функция, которая позволяет выполнять асинхронные операции, такие как запросы к серверу, чтение файлов, таймер и любые другие действия, которые могут занять длительное время. Основная идея асинхронности заключается в том, что выполнение таких операций не блокирует выполнение остального кода. Это позволяет вашему коду оставаться отзывчивым и эффективным. Это функции выполнение которых будет завершено не сейчас,а потом.
🍀 Callback (коллбек) в JavaScript — это функция, которая передается в другую функцию в качестве аргумента и вызывается после выполнения определенной операции или события в исходной функции. Это один из основных принципов асинхронного программирования в JavaScript. 👍 Управлять асинхронным поток можно с помощью использования колбеков.
В функции, которые выполняют какие-либо асинхронные операции, передается аргумент callback.
callback - это функция, которая будет вызвана после завершения асинхронных операций.
🔮 Асинхронные операции
- Пример с использованием fetch API и колбеков
// Функция, которая получает данные с API и принимает колбек для обработки результатов
function fetchData(url, callback) { // Выполняем HTTP GET запрос fetch(url) .then(response => { if (!response.ok) { throw new Error('Сетевая ошибка'); } return response.json(); // Преобразуем ответ в JSON }) .then(data => { // Вызываем колбек и передаем полученные данные callback(null, data); // Передаем данные через колбек (первый аргумент — ошибка, второй — данные) }) .catch(error => { // Если произошла ошибка, вызываем колбек с ней callback(error); });
} // Колбек, который будет использовать полученные данные
function processData(error, data) { if (error) { console.error('Ошибка при получении данных:', error); return; } console.log('Полученные данные:', data);
} // URL для запроса к публичному API
const apiURL = 'https://jsonplaceholder.typicode.com/users'; // Вызов функции fetchData и передача ей колбека processData
fetchData(apiURL, processData);
- Пример с prompt
function greeting(name) { console.log(Привет, ${name}!);
} function processUserInput(callback) { let name = prompt("Введите ваше имя:"); // Здесь мы предполагаем, что prompt доступен callback(name); // Вызываем коллбек с именем пользователя и колбек вызоветсе после отработки prompt
} // Передаем функцию greeting в качестве коллбека
processUserInput(greeting);
- Пример с setTimeout
function greeting(name) { console.log(Привет, погода супер!);
} function processUserInput(callback) { setTimeout(callback, 2000); // Вызываем коллбек через 2 секунды
} // Передаем функцию greeting в качестве коллбека
processUserInput(greeting);
💟 Основные выводы о коллбеках:
Гибкость: Коллбеки позволяют создавать динамичные и адаптивные программы, предоставляя возможность определять, какой код будет выполняться по завершении определенной задачи.
Асинхронное программирование: Коллбеки важны для работы с асинхронными операциями, такими как обработка событий, HTTP-запросы и таймеры.
Проблемы с читабельностью: Сложность и вложенность коллбеков могут приводить к трудностям при чтении и поддержке кода. #javascript
#angular
#frontend
#programming 🐱 FrontEnd_Xpert