Обратный вызов — это метод программирования, при котором функция передается в качестве аргумента другой функции и выполняется.
Перед этой статьей я упомянул вам, что я начну серию статей, и я создал введение и о движке JavaScript V8. Если вы потеряли то, что я сделал, проверьте это:
- Введение — понимание запросов и ответов JavaScript API в жизненном цикле выборки данных
- JavaScript engine V8 — Понимание запросов и ответов JavaScript API в жизненном цикле выборки данных
В этой серии статей я не буду объяснять концепцию Promises или async/await, но не беспокойтесь, я объясню это в следующей статье.
Таким образом, обратный вызов — это метод программирования, при котором функция передается в качестве аргумента другой функции и выполняется позже, обычно после завершения задачи. Этот метод обычно используется в асинхронном программировании и программировании, управляемом событиями, и цель обратного вызова — позволить функции выполнить обратный вызов или уведомить вызывающую программу о завершении задачи или некоторой операции.
Обратные вызовы — это мощная техника программирования в JavaScript, которая обеспечивает гибкое и эффективное асинхронное программирование. Их можно использовать для обработки сложных и длительных операций, обработки пользовательского ввода или событий браузера, передачи данных между функциями и многого другого.
Вот простой пример того, как работает обратный вызов с использованием калькулятора, передающего функцию обратного вызова в качестве аргумента.
В приведенном ниже примере функция калькулятора получает параметры x и y как число и обратный вызов как функцию и возвращает результат вызова функции обратного вызова с x и y в качестве аргументов.
function calculator(x, y, callback) { return callback(x, y); } function add(x, y) { return x + y; } function subtract(x, y) { return x - y; } function multiply(x, y) { return x * y; } function divide(x, y) { return x / y; } console.log(calculator(10, 2, add)); // Output: 12 console.log(calculator(10, 2, subtract)); // Output: 8 console.log(calculator(10, 2, multiply)); // Output: 20 console.log(calculator(10, 2, divide)); // Output: 5
Где я могу использовать обратные вызовы?
Обратные вызовы могут использоваться в различных контекстах в JavaScript. Вот несколько распространенных примеров:
Асинхронное программирование. Обратные вызовы обычно используются для обработки асинхронных операций, таких как выборка данных с сервера или чтение файла с диска. Когда асинхронная операция завершается, выполняется обратный вызов для обработки результата.
В приведенном ниже примере функция fetch() вызывается с аргументом URL-адреса для отправки HTTP-запроса на указанный URL-адрес и извлечения данных из него. В данном случае мы запрашиваем у API Chuck Norris Jokes получение случайной шутки.
fetch("https://api.chucknorris.io/jokes/random") .then((response) => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then((data) => console.log(data)) .catch((error) => console.error(`Error: ${error}`)) .finally(() => console.log("Fetch complete!"));
Программирование, управляемое событиями. Обратные вызовы часто используются для обработки событий в веб-приложении, таких как щелчки мышью, ввод с клавиатуры или отправка форм. Когда происходит событие, выполняется обратный вызов для обработки события.
В приведенном ниже примере изобразите тег кнопки в HTML и добавит действие щелчка.
const button = document.querySelector("button"); function handleClick(event) { console.log("Button clicked!"); } button.addEventListener("click", handleClick);
API на основе обратных вызовов. Некоторые библиотеки и платформы JavaScript используют обратные вызовы, чтобы предоставить разработчикам простой и гибкий интерфейс для взаимодействия со своими API. Например, API файловой системы Node.js использует обратные вызовы, чтобы обеспечить простой и гибкий способ чтения и записи файлов на сервере.
В приведенном ниже примере определите функцию sayHello, которая возвращает строку «Hello World!». Я использовал функцию setTimeout, чтобы запланировать вызов функции sayHello после задержки в 1000 миллисекунд (т. е. 1 секунду).
function sayHello() { console.log("Hello World!"); } setTimeout(sayHello, 1000);
Модульное программирование. Обратные вызовы можно использовать для передачи функций между модулями в программе, что позволяет создавать более гибкий и модульный код. Например, модуль, генерирующий случайные числа, может использовать функцию обратного вызова, позволяющую вызывающей стороне указать, как следует использовать число.
В приведенном ниже примере определите функцию sayMyName, которая принимает функцию обратного вызова в качестве параметра. Внутри функции sayMyName мы определяем переменную с именем name и присваиваем ей значение «Rodrigo». Когда вызывается функция sayHello, она записывает в журнал сообщение «Hello World Rodrigo!» к консоли.
function sayMyName(callback) { const name = "Rodrigo"; callback(name); } function sayHello(name) { console.log(`Hello World ${name}!`); } sayMyName(sayHello); // Output: Hello World Rodrigo!
Что означает Callback Hell, также известный как Pyramid of Doom
Чрезмерное использование обратных вызовов может привести к сложному и трудночитаемому коду, поэтому важно использовать их разумно и при необходимости рассматривать альтернативные методы.
Чтобы избежать этих проблем, важно разумно использовать обратные вызовы и при необходимости рассматривать альтернативные методы. Промисы и синтаксис async/await — это новые возможности языка в JavaScript, которые могут предоставить более мощные и гибкие альтернативы обратным вызовам.
Итак, если вы хотите узнать больше о промисах и асинхронности/ожидании, ждите следующей статьи, которую я опубликую.
Спасибо за прочтение, я надеюсь, что эта статья каким-то образом пополнила вашу базу знаний об этом.