等待异步 GET 在 Javascript/JQuery 中完成

Question

我完全知道 XMLHttpRequest 已弃用async: false，但以下代码满足了我在后续任务迭代之前获取所有页面的迫切需求。

for (i=0; i <= last_page; i++) {
      $.ajax({
          url : '/static/experiments/zoning_out_task/text/' + i + '.html',
          cache: false,
          async: false,
          success : function(result) {
              pages.push(result);
          }
      });
}

有没有一种模式可以使用async: true实现相同的目标？

Answer 1

在 es6 中，如果你在继续下一个任务之前需要它们，你可以使用 promisy.all

var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
}); 
Promise.all([p1, p2, p3]).then(values => { 
  console.log(values); // [3, 1337, "foo"] 
});

如果您需要按顺序完成每个任务，您可以使用 async.waterfall

async.waterfall([
    function(callback) {
        callback(null, 'one', 'two');
    },
    function(arg1, arg2, callback) {
        // arg1 now equals 'one' and arg2 now equals 'two'
        callback(null, 'three');
    },
    function(arg1, callback) {
        // arg1 now equals 'three'
        callback(null, 'done');
    }
], function (err, result) {
    // result now equals 'done'
});

你也可以通过承诺来实现这一目标

var p1 = new Promise( (resolve, reject) => {
  resolve('Success!');
  // or
  // reject ("Error!");
} );
    var p2 = new Promise( (resolve, reject) => {
  setTimeout(resolve, 1000, 'foo');
  // or
  // reject ("Error!");
} );
p1.then( value => {
  console.log(value); // Success!
    // here you can call the second promise and so on 
    p2.then(value=>{
       console.log("second promise done",value)
    })
}, reason => {
  console.log(reason); // Error!
} );