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

vx6bjr1n 于 2023-11-17 发布在 jQuery

关注(0)|答案(1)|浏览(119)

我正在创建一个输入表单，用户可以在其中输入他们每天工作的小时数。如果在输入表单上输入的小时数大于限制，我希望显示一个错误模式。单击“保存”按钮后，我需要检查时间限制，将用户数据保存到DB，并刷新表。
我尝试使用JavaScript promise chains来确保我们在执行下一个异步步骤之前等待一个步骤的结果返回结果。我在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块执行时，模态不会显示，错误是未定义的。但是，如果我在.then()参数中添加错误回调并在那里切换模态，它会工作，catch块中的toggle函数不会执行。
这段代码包含在每个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块中切换模式？
如何简化这段代码，使其只有一个错误回调或catch块，用于接收来自不同promise的错误并切换警报？

jquery

来源：https://stackoverflow.com/questions/77461296/how-to-toggle-an-error-modal-after-we-reject-a-promise-in-a-javascript-promise-c

1条答案

按热度按时间

gj3fmq9x1#

听起来很复杂。通过在input元素上设置属性required、min="0"和max="24"，表单将仅在用户输入0到24之间的数字时提交。这可能是一个开始，然后您可以在提交事件上执行AJAX请求。

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>

赞(0）回复(0）举报 2023-11-17

我来回答

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

1条答案

相关问题

热门标签

最新问答