логотип PurpleSchool
логотип PurpleSchool

Метод finally() в JavaScript

Автор

Дмитрий Нечаев

В JavaScript промисы являются мощным инструментом для управления асинхронными операциями. Они позволяют обрабатывать результаты асинхронных функций, таких как запросы к серверу, чтение файлов и т.д. Один из методов промисов — .finally(), который позволяет выполнить код после того, как промис завершил своё выполнение, независимо от того, был ли он разрешён или отклонён. Это особенно полезно для выполнения общих задач очистки или завершения, таких как скрытие индикаторов загрузки.

Описание метода .finally()

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

Пример использования .finally()

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

// Функция для имитации загрузки данных
function fetchData() {
  return new Promise((resolve, reject) => {
    // Имитация асинхронной операции с использованием setTimeout
    setTimeout(() => {
      // Имитируем успешную или неуспешную загрузку с вероятностью 50%
      if (Math.random() > 0.5) {
        resolve("Данные загружены успешно");
      } else {
        reject("Ошибка загрузки данных");
      }
    }, 2000); // Задержка в 2 секунды
  });
}

// Использование промиса с .finally()
fetchData()
  .then(data => {
    console.log("Результат:", data); // Обработка успешного результата
  })
  .catch(error => {
    console.error("Ошибка:", error); // Обработка ошибки
  })
  .finally(() => {
    console.log("Загрузка завершена."); // Выполняется всегда после .then или .catch
  });

Когда использовать .finally()

Метод .finally() особенно полезен в следующих случаях:

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

Заключение

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

Стрелочка влевоPromise в JavaScriptМетод catch() в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод search() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие scroll в JavaScriptСобытие reset в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний