Освоение асинхронного программирования на JavaScript

Введение

Асинхронное программирование — важнейший аспект JavaScript, который позволяет разработчикам создавать адаптивные и эффективные приложения. В этой статье мы рассмотрим основы асинхронного программирования на JavaScript и углубимся в три основных метода: обратные вызовы, обещания и асинхронное ожидание.

Почему асинхронное программирование имеет значение?

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

Асинхронное программирование позволяет JavaScript управлять этими трудоемкими задачами, не блокируя основной поток, обеспечивая удобство работы пользователя и одновременное выполнение нескольких задач.

Давайте углубимся в три основные концепции:

1. Обратные вызовы

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

Анатомия обратного вызова

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

Вот базовый пример обратного вызова:

function greeting(name) {
  console.log(`Hello, ${name}!`);
}

function processUserInput(callback) {
  const name = prompt("Please enter your name:");
  callback(name);
}

processUserInput(greeting);

В этом примере greeting — это функция обратного вызова. Мы передаем его в качестве аргумента processUserInput, и он выполняется с именем пользователя.

Синхронные и асинхронные обратные вызовы

Обратные вызовы можно разделить на два основных типа: синхронные и асинхронные.

Синхронные обратные вызовы

Синхронные обратные вызовы выполняются немедленно. Их часто используют для задач, не требующих ожидания, например, для перебора массива:

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number) => {
  console.log(number);
});

В этом случае стрелочная функция является синхронным обратным вызовом.

Асинхронные обратные вызовы

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

function fetchData(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => callback(data))
    .catch((error) => console.error(error));
}

fetchData("https://api.example.com/data", (result) => {
  console.log(result);
});

Здесь стрелочная функция внутри функции fetchData является асинхронным обратным вызовом.

2. Обещания

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

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

Создание обещания

Начнем с создания базового промиса. Конструктор промиса принимает один аргумент: функцию с двумя параметрами: resolve и reject.

Вот простой пример:

const myPromise = new Promise((resolve, reject) => {
  // Simulate an asynchronous task
  setTimeout(() => {
    const randomNumber = Math.random();

    if (randomNumber < 0.5) {
      resolve(randomNumber); // Resolve with the random number
    } else {
      reject(new Error('Random number is too high')); // Reject with an error
    }
  }, 1000);
});

В этом примере мы создали обещание, которое разрешается со случайным числом или отклоняется с сообщением об ошибке на основе значения randomNumber.

Потребление обещаний

Получив промис, вы можете использовать его значение, используя методы .then() и .catch().

myPromise
  .then((result) => {
    console.log(`Resolved with: ${result}`);
  })
  .catch((error) => {
    console.error(`Rejected with error: ${error.message}`);
  });

Метод .then() обрабатывает разрешенное значение, а метод .catch() обрабатывает любые возникающие ошибки.

Объединение обещаний

Промисы можно объединять в цепочки для создания более сложных асинхронных потоков. Это особенно полезно, когда вам необходимо последовательно выполнить несколько асинхронных операций.

const fetchData = () => {
  return fetch('https://api.example.com/data')
    .then((response) => response.json());
};

const processData = (data) => {
  return data.map((item) => item.name);
};

fetchData()
  .then(processData)
  .then((names) => {
    console.log(`Names: ${names.join(', ')}`);
  })
  .catch((error) => {
    console.error(`An error occurred: ${error.message}`);
  });

В этом примере мы получаем данные из API, обрабатываем их, а затем регистрируем обработанные данные. Если в процессе возникают какие-либо ошибки, они обнаруживаются методом .catch().

3. асинхронный/ожидание

async/await — это способ написания асинхронного кода, напоминающего синхронный код. Он построен на основе Promise API JavaScript, что упрощает управление обещаниями и обработку асинхронных потоков. async объявляет функцию как асинхронную, а await используется внутри асинхронной функции для приостановки выполнения до тех пор, пока обещание не будет выполнено.

Создание асинхронной функции

Вот как вы объявляете функцию async:

async function fetchData() {
  // Asynchronous code here
}

Теперь давайте воспользуемся await внутри этой функции, чтобы приостановить выполнение до тех пор, пока обещание не будет выполнено:

async function fetchData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  return data;
}

В этом примере await используется для ожидания результата операции fetch, а затем для анализа JSON. Функция возвращает разрешенное значение после выполнения обещаний.

Обработка ошибок с помощью try/catch

Использование try/catch необходимо при работе с async/await. Это позволяет вам ловить и корректно обрабатывать ошибки.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`An error occurred: ${error.message}`);
  }
}

Выполнение асинхронных функций

Чтобы выполнить асинхронную функцию, просто вызовите ее:

fetchData()
  .then((data) => {
    console.log('Data:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

Или используйте async/await в другой асинхронной функции:

(async () => {
  try {
    const data = await fetchData();
    console.log('Data:', data);
  } catch (error) {
    console.error('Error:', error);
  }
})();

Заключение

Асинхронное программирование — фундаментальный аспект разработки JavaScript. Хотя поначалу это может быть сложно, овладение им необходимо для создания адаптивных и эффективных веб-приложений. Независимо от того, работаете ли вы с обратными вызовами, обещаниями или асинхронными/ожидающими операциями, понимание цикла событий и следование лучшим практикам поможет вам написать чистый и производительный асинхронный код JavaScript.

Стеккадемический

Спасибо, что дочитали до конца. Прежде чем уйти:

• Пожалуйста, рассмотрите возможность аплодировать и следовать автору! 👏
• Следуйте за нами в Twitter(X), LinkedIn и YouTube.
• Посетите Stackademic.com, чтобы узнать больше о том, как мы демократизируем бесплатное образование в области программирования во всем мире.