javascript - 如何使用 Promises 顺序发送 Javascript/jQuery AJAX POST 请求，循环请求数据数组？

Question

我有一个巨大的文章列表，通过列出文章标题的表格直观地指示，我们必须对其执行特定的处理操作，一个接一个地处理元素，通过发送带有该文章 ID 的 POST 请求，同时从表列表中删除该行，作为进度的视觉指示器。

这是我最初使用的:

var article_ids = [1,2,...];
article_ids.each(function (value, index) {
  var id = value;
  jQuery.ajax({
    type: "POST",
    url: "index.php?process_article",
    data: {article_id: id},
    cache: false,
    async: false
  })
  .done(function(reponse) {
    console.log(response);
    jQuery('.article-id-' + id).css('display', 'none');
  });  
});

它在 FireFox 中运行良好，逐一处理项目，从表列表中删除相应的行。

但在 Google Chrome 中，所有这些似乎都是一次性处理的，而不是这些请求在另一个请求完成后才发生。

经过一番谷歌搜索后，发现引用文献说要使用 Javascript Promises，但我不知道如何在这种情况下使用它。

然后，我将上面的内容更改为以下递归函数，该函数似乎在 Chrome 和 Firefox 上都能正常工作，请求一个接一个地发生:

var article_ids = [1,2,...];
function processIds(ids) {
  if (ids.length > 0) {
    id = ids.shift();     
    console.log("Processing ID: " + id);
    jQuery.ajax({
      type: "POST",
      url: "index.php?process_article",
      data: {article_id: id},
      cache: false
    })
    .done(function() {
      jQuery('.article-id-' + id).css('display', 'none');
      processIds(ids);
    });
  } else {
    alert("Successfully processed all articles.");
  }
}
processIds(article_ids);

疑问:

1. 这是解决这个问题的好方法吗？
2. 我们如何使用 Javascript Promises 实现相同的目标？

Answer 1

您建议的递归解决方案有效并且有意义，IMO。不过，在这种情况下，我通常使用 Array.reduce。

这是一个例子:

function processIds(ids) {
  return ids.reduce((promise, nextId) => {
    return promise.then(() =>
      jQuery.ajax({
        type: "POST",
        url: "index.php?process_article",
        data: { article_id: nextId },
        cache: false,
      })
    );
  }, Promise.resolve());
}

请注意，在此示例中，promise 中包含的返回值被丢弃，仅保留最后一个值。如果您愿意，可以修改它以捕获和聚合所有返回值。

将其提取为可重用的东西也很容易。例如:

function forEachAsync(myArray, funcPromise) {
  return myArray.reduce((promise, nextValue) => {
    return promise.then(() => funcPromise(nextValue));
  }, Promise.resolve());
}

然后您可以使用新的 forEachAsync 函数，如下所示:

function processIds(ids) {
  return forEachAsync(ids, processArticle);
}

function processArticle(id) {
  return jQuery.ajax({
    type: "POST",
    url: "index.php?process_article",
    data: { article_id: nextId },
    cache: false,
  });
}

我相信最新版本的 jQuery 使用与 JavaScript Promise 兼容的 Promise，但这是您应该检查并注意的事情。

我相信它们是在 ES2015 中引入的和 jQuery 在 v3.0 中引入了兼容性.