javascript - 如何使用 Javascript Promise 在循环中按顺序执行 AJAX 调用

Question

我正在遍历一个 map ，我想在其中以每个 map 值作为参数进行单独的 AJAX 调用，以获取一些数据并将其记录下来。见下文。这是有效的，但我想让 AJAX 调用按 map 的顺序进行。因为每次调用都是异步的，所以似乎我应该使用 promises 来实现顺序执行。但是我对 promise 不熟悉，真的不知道如何在这里做。我在这里的其他地方看过，但找不到任何东西。请帮忙。

map.forEach(function(url, key) {
   log(url);
});

function log(url) {
    $.ajax({
      url: url, 
      dataType: 'json',
      success: function (result) {
          console.log(result.value);
          console.log(result.name);
          console.log(result.action);
      }
  });
}

Answer 1

由于 $.ajax 返回一个 promise ，您可以使用 promise 链接来实现您想要的

var p = $.when();
map.forEach(function(url, key) {
    p = p.then(function() { 
        return log(url);
    });
});

function log(url) {
    return $.ajax({
        url: url, 
        dataType: 'json',
        success: function (result) {
            console.log(result.value);
            console.log(result.name);
            console.log(result.action);
        }
    });
}

注意:上面的代码只使用了 jQuery，没有原生的 promise

或者使用Array的reduce函数

map.reduce(function(p, url) {
    return p.then(function() { 
        return log(url);
    });
}, $.when());

如果你可以使用 ES2015+，那么就有原生的 Promises，

map.reduce((p, url) => p.then(() => log(url)), Promise.resolve());

如果你愿意，你也可以这样做

function log(url) {
    return $.ajax({
        url: url, 
        dataType: 'json'
    });
}

map.reduce((p, url) => p.then(results => log(url).then(result => results.concat(result))), Promise.resolve([]))
.then(results => {
    results.forEach(result => {
        console.log(result.value);
        console.log(result.name);
        console.log(result.action);
    })
});

不同之处在于，一旦最后一个请求完成，所有的 console.log 都会发生(如果有任何失败，则不会发生任何控制台日志)