Question

假设您有一个场景，您需要在页面的textarea中创建.csv输出...

所以我有一个循环查询数组。在循环内部我将查询传递给ajax调用...我需要将ajax调用的结果追加到textarea中。

我的问题是如何按照请求的顺序打印结果（基本上是查询数组中的顺序）

//example array to loop.
var queries= ['query1', 'query', 'query3', 'query4'];

//the textarea where im going to print the results in order later to open in excel as a .csv file
var $csvText= $('#some-text-area');

//inserting the csv headers
$csvText.val('Column1, Column2\r\n');

$.each(queries, function(index, value){
   //someGoogleAPI is an ajax call from google's api
   someGoogleAPI(value).then(function(response){
      //Adding row with values
      $csvText.val(response.column1 + ',' response.column2 + '\r\n');
   });
})

这是一个简化的例子，但通过解决这个问题，我会知道如何解决我的问题。

谢谢你们。

Answer 1

您可以使用reduce来创建任意承诺列表，而不是$ .each。

queries.reduce(function(seq, val) {
    return seq.then(function() {
      return someGoogleAPI(val)
    })
    .then(function(response){
        var curr = $csvText.val();
        $csvText.val(curr + ',' + response.column1 + ',' + response.column2 + '\r\n');
      });
}, Promise.resolve());

jsfiddle：https://jsfiddle.net/75sse6n2/

Answer 2

您的查询似乎不依赖于彼此，因此可以并行执行。如果是这样，那么你真的需要按顺序处理响应。您可以通过以下几种方式实现这一目标：

与Promise.all（）

并行运行

并行启动所有请求，收集所有结果，使用Promise.all()知道它们何时完成，然后插入所有结果。

//example array to loop.
var queries= ['query1', 'query', 'query3', 'query4'];

//the textarea where im going to print the results in order later to open in excel as a .csv file
var $csvText= $('#some-text-area');

//inserting the csv headers
$csvText.val('Column1, Column2\r\n');

Promise.all(queries.map(function(item) {
   return someGoogleAPI(value);
})).then(function(results) {
   $csvText.append(results.map(function(item) {
        return response.column1 + ',' response.column2;
   }).join('\r\n'));       
});

无论首先实际完成哪些请求，

Promise.all()都会按顺序收集结果。

对您的运营进行排序

您可以对操作进行排序，因此一次只运行一个操作，插入结果，然后运行下一个，依此类推。这将是一个较慢的端到端运行时间，但会为您提供结果的中间显示。

//example array to loop.
var queries= ['query1', 'query', 'query3', 'query4'];

//the textarea where im going to print the results in order later to open in excel as a .csv file
var $csvText= $('#some-text-area');

//inserting the csv headers
$csvText.val('Column1, Column2\r\n');

queries.reduce(function(p, item) {
    return p.then(function() {
        return someGoogleAPI(item).then(function(result) {
            $csvText.append(result.column1 + ',' result.column2 + '\r\n');
        });
    });
}, Promise.resolve());

这将创建一系列链式承诺，这些承诺将按顺序执行，一个接一个，每个承诺在到达时插入其结果。

循环中的Ajax API调用需要按顺序执行

2 个答案: