javascript - 完成 ajax 调用数组的循环，而不是因调用之一的错误而中断

Question

我正在尝试从数组中循环进行 ajax 调用，并保存在成功接收到所有调用后将打印的每个数据结果。

问题是，如果有任何ajax调用返回错误，整个过程就会中止并且回调不会执行。 (尝试使用listWithErrorResult)

如何在不破坏循环的情况下推送错误的内容？

JSFIDDLE

var list = ['UQ13nr6urIo', 'hxa_Z0eZ83E', 'ulHB2mNlovg'];
var listWithErrorResult = ['UQ13nr6urIo', 'hxa_Z0eZ83E', 'IWEHeIdBkc4'];

var callback = function() {
  console.log("done");
  console.log(tracks);
};

var requests = [], tracks = [];

  for(i = 0; i < list.length; i++) {
    requests.push($.ajax({
      url: 'http://www.youtubeinmp3.com/fetch/?format=JSON&video=https://www.youtube.com/watch?v='+list[i],
      dataType: "json",
      success: function(data) {
        console.log('suc');
        tracks.push(data);
      },error: function() {
	      console.log('err');
	      tracks.push('err');
	    }
    }));
  }

$.when.apply(undefined, requests).then(function(results){callback()});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您只需将 .then() 句柄附加到您的 ajax 调用，并确保每个 ajax 调用都能解析而不是拒绝。这将在最后为您提供一组结果，保证包含您的所有 ajax 调用。:

var callback = function(/* tracks are passed here as arguments */) {
  console.log("done");
  var tracks = Array.prototype.slice.call(arguments);
  console.log(tracks);
};

var requests = [];

  for(var i = 0; i < list.length; i++) {
    requests.push($.ajax({
      url: 'http://www.youtubeinmp3.com/fetch/?format=JSON&video=https://www.youtube.com/watch?v='+list[i],
      dataType: "json",
    }).then(function(data) {
        return data;
    }, function(err) {
        // convert failure into success so $.when() doesn't stop
        return $.Deferred().resolve('err');
    }));
  }

$.when.apply($, requests).then(callback);

<小时/>

您还可以使用我编写的 $.settle() 版本，它可以让所有 Promise 完成并给出所有结果，即使某些 Promise 被拒绝。

您可以使用这个新函数 $.settle() 来代替 $.when() (在第一个被拒绝的 Promise 时停止)，它会返回结果所有的 promise 。它返回一个 PromiseInspection 对象数组，允许您查询每个 Promise 的解析值或拒绝原因。

您使用 $.settle() 就像 $.when() 一样，只不过它返回 PromiseInspection 对象中的所有结果，并且始终解析(从不拒绝)。由于 jQuery 将多个参数传递给 .then() 处理程序(特定的 Ajax 调用)的非标准方法，如果 .settle() 检测到多个参数，它会将它们复制到一个数组，因此成功的 ajax 调用返回的 PromiseInspection.value 是一个数组 [data, textStatus, jqXHR]。这是 jQuery 非标准 promise 中最糟糕的部分。据推测，这在 jQuery 3.x 中已修复/更改，应该符合标准。此代码适用于任一参数，因为它会自动检测 .then() 处理程序是否发送了多个参数并将它们转换为单个数组参数。

// ES6 version of settle
jQuery.settle = function(promises) {
    function PromiseInspection(fulfilled, val) {
        return {
            isFulfilled: function() {
                return fulfilled;
            }, isRejected: function() {
                return !fulfilled;
            }, isPending: function() {
                // PromiseInspection objects created here are never pending
                return false;
            }, value: function() {
                if (!fulfilled) {
                    throw new Error("Can't call .value() on a promise that is not fulfilled");
                }
                return val;
            }, reason: function() {
                if (fulfilled) {
                    throw new Error("Can't call .reason() on a promise that is fulfilled");
                }
                return val;
            }
        };
    }

    return $.when.apply($, promises.map(function(p) {
        return p.then(function(val) {
            if (arguments.length > 1) {
                val = Array.prototype.slice.call(arguments);
            }
            return new PromiseInspection(true, val);
        }, function(err) {
            if (arguments.length > 1) {
                err = Array.prototype.slice.call(arguments);
            }
            return new PromiseInspection(false, err);
        });
    }));
}

<小时/>