如何使用 Javascript Promise 按顺序执行 AJAX 调用

我正在循环访问地图，我想使用每个地图值作为参数进行单独的 AJAX 调用，以获取一些数据并记录它。见下文。这是可行的，但我想让 AJAX 调用按照地图的顺序进行。因为每次调用都是异步的，所以看来我应该使用 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);
      }
  });
}

由于 $.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，没有原生承诺

或者使用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 都会发生（如果任何失败，则不会发生任何控制台日志）