Пошаговое руководство по обратным вызовам JavaScript, объясненное на реальных примерах.

Есть несколько определений, которые могут описывать обратные вызовы, давайте рассмотрим 3 из них.

  • Обратный вызов — это функция, которая передается в качестве аргумента другой функции.
  • Этот метод позволяет функции вызывать другую функцию.
  • Функция обратного вызова может выполняться после завершения другой функции.

Давайте упростим эти определения.

Я объясню обратные вызовы с помощью стрелочных функций, а не обычных функций, если вы не знаете различий между наиболее популярными методами функций создания, вы можете проверить это здесь.

Давайте посмотрим на пример ниже:

const calc = (x, y) => {
    let sum = x + y; //5 + 6
    return sum;
}
const result = calc(5,6); //Will return 11.

Эта функция рассчитает сумму x + y , а затем вернет значение суммы в переменную result. Как видно из примера, итоговый результат равен 11.

Теперь давайте создадим еще одну функцию для вывода результата на консоль.

const calc = (x, y) => {
    let sum = x + y; //5 + 6
    return sum;
}
const showResult = (result) => {
    console.log(result);
}
const result = calc(5, 6); //Will return 11.
showResult(result); //Will print 11 to the console.

Теперь у нас есть функция showResult(result), которая получает в качестве параметра переменную result для вывода значения вычисления из функции calc(x, y). Другими словами, нам нужно дождаться, пока функция calc(x, y) завершит работу и вернет расчетное значение для использования функции showResult(result).

Это хороший момент для преобразования функции showResult в функцию обратного вызова, давайте посмотрим на пример ниже:

const calc = (x, y, callback)=>{
    let sum = x + y;
    callback(sum); //Will print to the console the result.
}
const showResult = (result)=>{
    console.log(result);
}
calc(5, 6, showResult); //Here we add the showResult to be callback.

Теперь мы передаем в качестве аргумента функцию showResult, которая будет вызываться после завершения вычисления функцией calc. Параметр callback в функции calc теперь действует как showResult, который ожидает получить параметр result для вывода результата на консоль. Таким образом, мы можем быть уверены, что в конце расчета мы напечатаем результат.

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

Теперь, когда мы знаем, как работают обратные вызовы, давайте создадим реальный пример:

const fetchMovies = (url, callback)=>{
    fetch(url)
  .then(response => response.json())
  .then(data =>{
      callback(data);
  });
}
const filterMoviesById = (result)=>{
    const filteredResults = result.filter((item)=>[1,5,6,9,15].includes(item.id));
    
    console.log(filteredResults);
}
fetchMovies('http://example.com/movies', filterMoviesById);

Во-первых, давайте объясним приведенный выше пример. Мы создаем запрос на получение данных из URL-адреса “http://example.com/movies”, который содержит список фильмов, затем мы хотим напечатать только фильмы с идентификаторами [1,5,6,9,15].

Шаг 1: мы создаем функцию fetchMovies, которая получает в качестве параметров url и callback.

Шаг 2. Мы создаем функцию фильтра, чтобы находить только фильмы с нужными нам идентификаторами.

Шаг 3: мы передаем аргументы url и обратный вызов filterMoviesById в функцию fetchMovies.

Теперь функция fetchMovies является асинхронной функцией, что означает, что когда мы делаем вызов выборки, мы не ждем получения результата, компилятор будет работать над другими заданиями, поэтому мы должны быть уверены, что когда получен результат, мы вызовем функцию filterMoviesById и распечатаем отфильтрованные результаты.

Пожертвование

Если вы считаете эту статью полезной и хотите поддержать меня, чтобы я загружал больше подобного контента, вы можете угостить меня кофе, нажав здесь.

Дополнительный пример

Что, если мы будем рассматривать асинхронную функцию как синхронную?

Вот пример, который не работает:

const fetchMovies = (url, callback)=>{
    fetch(url)
  .then(response => response.json())
  .then(data =>{
      callback(data);
  });
}
const filterMoviesById = (result)=>{
    const filteredResults = result.filter((item)=>[1,5,6,9,15].includes(item.id));
    
    console.log(filteredResults);
}
const result = fetchMovies('http://example.com/movies.json');
filterMoviesById(result); //result is undefined.

Как мы видим, мы не можем сделать то же самое с асинхронной функцией, fetch — это асинхронная функция, поэтому нам нужно дождаться прихода результата и только потом сделать вызов функции для filterMoviesById для фильтрации результата. Итак, здесь вы можете видеть, что мы должны передать функцию в качестве обратного вызова в fetchMovies и, когда придёт результат, вызвать обратный вызов.

Вот сила обратных вызовов.

Спасибо за то, что вы дочитали до сих пор, если вам нравится такой контент, и вы хотите поддержать меня как программиста и писателя, чтобы я писал больше статей, подобных этой, пожалуйста, подпишитесь подписаться на Medium (подписка на 5 долларов США в месяц) по моей ссылке, и вы получите неограниченный доступ ко всему на Medium.

Спасибо, надеюсь, это было полезно для вас. Следите за дополнительными пояснениями, примерами и советами по JavaScript.

Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Посетите наш Community Discord и присоединитесь к нашему Коллективу талантов.