拒绝 JavaScript promise 链中的 promise 后如何切换错误模式？-解网

问：

我正在创建一个输入表单，用户可以在其中输入他们每天工作的小时数。如果在输入表单上输入的小时数大于限制，我想显示错误模式。点击“保存”按钮后，我需要检查时间限制，将用户数据保存到数据库，并刷新表。

我正在尝试使用 JavaScript promise 链来确保我们在执行下一个异步步骤之前等待一个步骤的结果返回结果。在我们拒绝承诺链末尾的 promise 以切换模态后，我捕获了抛出的任何错误。

$('#saveForm').on('click', function (e) {
    
    checkDailyTimeLimit()
        .then(data => checkWeeklyTimeLimit())
        .then(data => saveData())
        .then(data => getData())
        .then(data => populateDataInTable())
        .catch(error => {
             $('#modal').modal('toggle')
             $('#modalBody').html(error)
        })
}

function checkDailyTimeLimit() {
    return currTime > timeLimit 
        ? reject('Time limit exceeded. Please enter time that is below 24 hours')
        : resolve(true)
}

如果输入的时间超过限制，则 promise 将被拒绝，但是当执行 catch 块时，模态不会显示，并且错误未定义。但是，如果我在参数中添加错误回调并在那里切换模态，它会起作用并且不会执行 catch 块中的切换函数。.then()

此代码在每个 promise 之后定义了错误回调。

checkDailyTimeLimit()
    .then(data => checkWeeklyTimeLimit(), error => toggleModal(error))
    .then(data => saveData(), error => toggleModal(error))

function toggleModal(error) {
    $('#modal').modal('toggle')
    $('#modalBody').html(error)
}

为什么它会在 promise 的即时错误回调中切换模态，而不是在 promise 链末尾的 catch 块中切换？

我将如何简化此代码，使其只有一个错误回调或捕获块，该块接收来自不同承诺的错误并切换警报？

JavaScript jQuery 承诺

document.forms.form01.addEventListener('submit', e => {
  e.preventDefault();
  console.log('Form is submitting...');
});

document.forms.form01.addEventListener('invalid', e => {
  e.preventDefault();
  if (e.target.validity.rangeOverflow) {
    e.target.closest('label').classList.add('invalid');
  }
}, true);

document.forms.form01.addEventListener('input', e => {
  if(e.target.validity.valid){
    e.target.closest('label').classList.remove('invalid');
  }
});

label~div {
  visibility: hidden;
}

label.invalid~div {
  visibility: visible;
}

<form name="form01">
  <label>Enter time:<input type="number" name="time" min="0" max="24" required/></label>
  <div>Time limit exceeded. Please enter time that is below 24 hours.</div>
  <button>Submit</button>
</form>

上一个：var 不能在函数中设置，但会丢失函数外的值。var 不应该全局可用来设置 [duplicate]

下一个：承诺不就是回调吗？

拒绝 JavaScript promise 链中的 promise 后如何切换错误模式？

How to toggle an error modal after we reject a promise in a JavaScript promise chain?

评论