SweetAlert поддерживает работу с промисами, что позволяет интегрировать модальные окна в асинхронные процессы и управлять поведением всплывающих окон в зависимости от результатов операций. Использование промисов открывает дополнительные возможности для создания более динамичных интерфейсов и упрощает обработку логики в приложении.
SweetAlert позволяет использовать модальные окна внутри цепочек
промисов, что значительно улучшает синхронизацию операций в приложении.
По сути, каждое модальное окно SweetAlert возвращает промис, который
может быть обработан с помощью стандартных методов .then()
и .catch().
Пример базового использования промиса с SweetAlert:
swal("Задача выполнена!").then((result) => {
console.log(result); // Выведет "Действие выполнено"
});В этом примере swal() возвращает промис, и метод
.then() будет вызван, когда модальное окно будет закрыто.
Значение, которое возвращается из модального окна, можно использовать
для дальнейшей логики.
SweetAlert может отследить, какой именно вариант выбора сделал пользователь (например, “ОК”, “Отмена”), и вернуть соответствующее значение в промис. Важно понимать, что промис будет резолвиться только после того, как пользователь взаимодействует с модальным окном.
Пример с кнопками “ОК” и “Отмена”:
swal({
title: "Вы уверены?",
text: "Вы не сможете отменить это действие!",
icon: "warning",
buttons: ["Отмена", "ОК"],
}).then((willDelete) => {
if (willDelete) {
console.log("Действие подтверждено");
} else {
console.log("Действие отменено");
}
});Здесь промис резолвится в значение true, если
пользователь нажал на кнопку “ОК”, и в значение false, если
нажал на кнопку “Отмена”.
Кроме успешного завершения, промис может быть отклонен. Для этого
можно использовать метод .catch(), который позволяет
обработать возможные ошибки при взаимодействии с модальным окном.
Пример:
swal({
title: "Ошибка",
text: "Что-то пошло не так!",
icon: "error",
}).then(() => {
throw new Error("Произошла ошибка!");
}).catch((error) => {
console.error(error.message);
});В данном случае, если произошла ошибка, промис отклоняется, и метод
.catch() перехватывает её. Это особенно полезно при
асинхронной обработке данных, когда важно ловить исключения.
SweetAlert можно интегрировать с асинхронными операциями, что
позволяет использовать async/await для
упрощения кода. Важно, чтобы использование промисов с асинхронными
функциями было правильно структурировано, чтобы избежать проблем с
производительностью и синхронизацией.
Пример с асинхронной функцией:
async function deleteUser() {
const result = await swal({
title: "Удалить пользователя?",
text: "Вы уверены, что хотите удалить этого пользователя?",
icon: "warning",
buttons: ["Отмена", "Удалить"],
});
if (result) {
// Выполнение удаления пользователя
console.log("Пользователь удалён");
} else {
console.log("Удаление отменено");
}
}В этом примере использование await упрощает обработку
результата модального окна. Функция deleteUser будет
ожидать, пока не будет получен результат выбора пользователя, прежде чем
выполнить удаление.
SweetAlert позволяет организовывать цепочку модальных окон, где каждый следующий экран зависит от действий пользователя в предыдущем. Это полезно, например, для многоэтапных подтверждений или взаимодействий с пользователем.
Пример цепочки модальных окон:
swal("Шаг 1: Подтверждение действия").then(() => {
return swal("Шаг 2: Выбор опции");
}).then(() => {
return swal("Шаг 3: Завершение процесса");
}).then(() => {
console.log("Все шаги выполнены");
});Здесь каждый промис, возвращаемый из swal(), передаёт
управление следующему в цепочке. Модальные окна будут показаны
последовательно, и следующий шаг не начнется до тех пор, пока не будет
завершено предыдущее действие.
SweetAlert поддерживает использование нескольких кнопок, что может быть полезно для сложных решений. Для обработки каждого из вариантов ответа можно возвращать разные результаты, что позволяет гибко управлять логикой работы с модальным окном.
Пример с несколькими кнопками:
swal({
title: "Выберите действие",
icon: "info",
buttons: ["Отмена", "Сохранить", "Удалить"],
}).then((action) => {
switch (action) {
case 0:
console.log("Действие отменено");
break;
case 1:
console.log("Данные сохранены");
break;
case 2:
console.log("Данные удалены");
break;
default:
console.log("Неизвестное действие");
}
});В этом примере значение, возвращаемое промисом, указывает на то, какую кнопку нажал пользователь. В зависимости от этого значения выполняется соответствующая логика.
Иногда полезно добавить задержку или тайм-аут перед автоматическим
закрытием модального окна. Это можно сделать с помощью
setTimeout() в сочетании с промисами.
Пример:
swal("Дождитесь автоматического закрытия...").then(() => {
return new Promise((resolve) => {
setTimeout(() => {
resolve("Модальное окно закрыто");
}, 2000);
});
}).then((message) => {
console.log(message);
});Здесь используется промис, который выполняет задержку в 2 секунды перед тем, как продолжить выполнение цепочки. Это может быть полезно для отображения сообщений или инструкций пользователю, которые должны быть видны некоторое время.
Промисы в SweetAlert можно комбинировать с асинхронными операциями, такими как загрузка данных с сервера, выполнение долгих вычислений или взаимодействие с другими сервисами. Это позволяет сделать интерфейс более отзывчивым и плавным.
Пример с асинхронной загрузкой данных:
async function loadData() {
const loading = swal("Загрузка данных...");
try {
const data = await fetch("https://api.example.com/data");
const result = await data.json();
loading.close();
swal("Данные загружены!", JSON.stringify(result), "success");
} catch (error) {
loading.close();
swal("Ошибка", "Не удалось загрузить данные", "error");
}
}Здесь SweetAlert отображает окно с загрузкой, пока данные не будут загружены, и затем обновляет модальное окно с результатами или ошибкой.