Jquery AJAX 承诺在 ajax 失败时总是中断

Question

我有一个包含多个 ajax 请求的循环。 每个 ajax 都是通过总是回调来管理的。 每个 ajax 都被推送到 promises 数组中。 最后 $.when 总是被使用。

如果所有$.ajax 都成功了$.when.apply($, promises).always(...); 当所有$.ajax 调用成功时调用。

但例如在 3 $.ajax 调用第二个失败时，$.when.apply($, promises).always(...); 仅在第二个之后触发，而不是在所有 3 $.ajax 调用成功时触发。

有什么帮助吗？ 跟着代码

$(".upload_all").bind("click", function() {
  var confirmed_count = 0;
  var error_count = 0;
  var promises = [];

  to_uploads.each(function(index,val) {
    var elem = $(this);
    var promise = $.ajax({
      url: "/upload/storeUploadedFile",
      type: 'POST',
    }).always(function(data_or_jqXHR, textStatus, jqXHR_or_errorThrown) {
      if (textStatus === "success") {
        // ..
      } else {
        // ..
      }                  
    });

    promises.push(promise);
  });

  $.when.apply($, promises)
    .always(function() {
      console.log("Promises Always! ") // do other stuff
    });
}

Answer 1

正如@kevin-b 所提到的，如果传递给它的任何承诺被拒绝，$.when 返回的承诺（与Promise.all 几乎相同）将被拒绝。您可能希望这样做，以通知用户某些上传不成功。

但$.ajax(..).always（与promise.finally 相同）的意思是“当这个promise 被拒绝或解决时执行这个回调”。您可能希望在所有 ajax 调用成功时执行某些操作，或者在其中任何一个调用失败时执行其他操作。为此使用Promise.all(promises).then(...).catch(...)。

$(".upload_all").bind("click", function() {
  var confirmed_count = 0;
  var error_count = 0;

  var promises = to_uploads.map(function(index,val) { // using map instead of each here saves us a couple of steps
    var elem = $(this);

    return $.ajax({
      url: "/upload/storeUploadedFile",
      type: 'POST',
    })
      .then(function() { confirmed_count += 1; })
      .catch(function() {
        error_count += 1;
        return Promise.reject(); // Return a rejected promise to avoid resolving the parent promise
      });
  });

  // You can use the native API here which does not require doing the `apply` hack
  Promise.all(promises)
    .then(function() { alert('All uploads successful'); })
    .catch(function() { alert(`Successful uploads: ${confirmed_count}. Failed uploads: ${error_count}`); }
}

请记住，JQuery 使用了 Promise 的替代实现，但它们仍然响应原生 API：

• .then（JQuery 风格的.done）：附加一个回调以在成功时运行
• .catch（JQuery 风格中的.fail）：附加一个回调以在错误时运行。除非返回被拒绝的承诺，否则这将解决承诺。
• .finally（JQuery 风格的.always）：附加一个回调以在任何其他回调运行后运行，尽管承诺被拒绝或解决。