Дизайн материала - Диалог подтверждения - Как работать с обещаниями в методе dialog.listen?

Question

Перед выполнением важных действий в моем приложении я передаю диалоговое окно подтверждения MD клиенту.
Я хочу выполнить указанное действие c, только если пользователь нажимает кнопку «Подтвердить».
способ реализовать это с помощью документации MD - с помощью метода dialog.listen ().
Прямо сейчас я отправляю функцию обратного вызова и выполняю ее только тогда, когда действие «подтвердить».
Мой код:

const showConfirmationDialog = callbackFunc => {
    const dialog = new MDCDialog(document.querySelector('.mdc-dialog'));

    dialog.open();

    dialog.listen('MDCDialog:closed', e => {
        if (e.detail.action === 'confirm') callbackFunc();
      });
};

Функции showConfirmationDialog () и callBackFun c () размещены в разных файлах.
Работать с обратным вызовом нормально, но есть ли способ использовать обещания в этом случае?
Что-то вроде:

import showConfirmationDialog from '...';

const functionToExecute = () => {
   // Something in here
};

showConfirmationDialog()
    .then(() => functionToExecute());

РЕДАКТИРОВАТЬ: Я пытался сделать что-то подобное, но это не сработало:

        if (e.detail.action === 'confirm') return Promise.resolve();

Answer 1

Вам необходимо вернуть обещание в функции showConfirmationDialog. У вас есть 2 варианта:

1. Реализация Promise внутри функции для разрешения или отклонения в зависимости от успеха или неудачи
2. Преобразование функции в обещание с функцией promisify().

Второй вариант возможен только в том случае, если ваша функция использует «Ошибка первого обратного вызова». Как и callback(error, obj), затем promisify преобразует его в реализацию Promise.

Вот код для непосредственной реализации Promise, просто измените обратный вызов на обещание:

const showConfirmationDialog = () => {
  const dialog = new MDCDialog(document.querySelector('.mdc-dialog'));

  return new Promise((resolve, reject) => {
    dialog.open();
    dialog.listen('MDCDialog:closed', e => {
      if (e.detail.action === 'confirm') {
        resolve();
      } else {
        reject();
      }
    });
  });
};

--- - РЕДАКТИРОВАТЬ ----

В вашем случае обещание шаблона обратного вызова с ошибкой может выглядеть следующим образом:

const showConfirmationDialog = callbackFunc => {
  const dialog = new MDCDialog(document.querySelector('.mdc-dialog'));

  dialog.open();

  dialog.listen('MDCDialog:closed', e => {
    if (e.detail.action === 'confirm') callbackFunc();
    else callbackFunc();
  });
};

const showConfirmationDialogPromise = Promise.promisify(showConfirmationDialog);

showConfirmationDialogPromise()
  .then(() => console.log('promise work'));