Цепочка промисов

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

Промис как основа взаимодействия

Промис в JavaScript представляет собой объект, который может быть в одном из трех состояний: выполнен, не выполнен или ошибка. Для работы с промисами в SweetAlert используется метод then, который позволяет определить действия, выполняющиеся после того, как модальное окно будет закрыто. Это важно в тех случаях, когда необходимо продолжить выполнение программы в зависимости от выбора пользователя.

Использование метода .then()

Когда модальное окно SweetAlert закрывается, оно возвращает промис, который может быть использован для дальнейшей обработки. Например, если пользователь нажал кнопку “OK” или “Cancel”, промис будет разрешён с результатом, который можно использовать в дальнейшем.

Пример базового использования:

Swal.fire({
  title: 'Вы уверены?',
  text: 'Вы хотите продолжить?',
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then((result) => {
  if (result.isConfirmed) {
    // действия при подтверждении
    console.log('Пользователь подтвердил');
  } else {
    // действия при отмене
    console.log('Пользователь отменил');
  }
});

В этом примере метод .then() используется для обработки выбора пользователя. Результат работы промиса (объект result) содержит информацию о том, какую кнопку нажал пользователь (isConfirmed — если пользователь подтвердил действие). Этот подход позволяет гибко реагировать на взаимодействие с модальным окном.

Цепочка вызовов .then()

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

Пример цепочки промисов:

Swal.fire({
  title: 'Первый вопрос',
  text: 'Вы хотите продолжить?',
  icon: 'question',
  showCancelButton: true,
  confirmButtonText: 'Да',
  cancelButtonText: 'Отмена'
}).then((firstResult) => {
  if (firstResult.isConfirmed) {
    return Swal.fire({
      title: 'Второй вопрос',
      text: 'Вы уверены, что хотите продолжить?',
      icon: 'warning',
      confirmButtonText: 'Да',
      cancelButtonText: 'Отмена'
    });
  }
}).then((secondResult) => {
  if (secondResult && secondResult.isConfirmed) {
    console.log('Пользователь прошёл оба шага');
  } else {
    console.log('Пользователь отменил один из шагов');
  }
});

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

Ошибки в цепочке промисов

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

Пример обработки ошибок:

Swal.fire({
  title: 'Введите ваш возраст',
  input: 'text',
  inputLabel: 'Возраст',
  inputValidator: (value) => {
    if (!value || isNaN(value)) {
      return 'Пожалуйста, введите корректный возраст';
    }
  }
}).then((result) => {
  if (result.value) {
    const age = parseInt(result.value, 10);
    if (age < 18) {
      return Swal.fire({
        title: 'Доступ запрещён',
        text: 'Вы должны быть старше 18 лет',
        icon: 'error'
      });
    } else {
      return Swal.fire({
        title: 'Добро пожаловать',
        text: `Возраст: ${age}`,
        icon: 'success'
      });
    }
  }
}).catch((error) => {
  console.error('Ошибка в процессе работы:', error);
});

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

Вложенные промисы

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

Пример вложенных промисов:

Swal.fire({
  title: 'Введите ваш email',
  input: 'email',
  inputLabel: 'Email',
  inputValidator: (value) => {
    if (!value) {
      return 'Пожалуйста, введите email';
    }
  }
}).then((result) => {
  const email = result.value;
  return Swal.fire({
    title: 'Подтвердите свой email',
    text: `Вы указали: ${email}`,
    confirmButtonText: 'Подтвердить',
    cancelButtonText: 'Отмена',
    showCancelButton: true
  });
}).then((confirmResult) => {
  if (confirmResult.isConfirmed) {
    Swal.fire('Email подтверждён');
  } else {
    Swal.fire('Email не подтверждён');
  }
}).catch((error) => {
  console.error('Ошибка при работе с модальными окнами:', error);
});

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

Заключение

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

Оглавление