循环中的Ajax API调用需要按顺序执行 [英] Ajax API calls in loop need to be executed in order

问题描述

让我们说您有一种情况需要在页面的文本区域中创建.csv输出...

lets say you have a scenario where you needed to create a .csv output in a page's textarea...

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

So I have an array of queries which i loop. Inside the loop im passing a query to an ajax call... I need to append the result of the ajax call into the textarea.

我的问题是如何按照请求的顺序(基本上是查询数组中的顺序)将结果打印出来

My question is how do you get the results printed out in the order they are requested (basically the order in the queries array)

//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');
   });
})

这是一个简化的示例，但是通过解决这个问题，我将对如何解决我的问题有所了解.

This is simplified example but by resolving this I would get an idea of how to tackle my problem.

谢谢大家.

推荐答案

您的查询似乎并不相互依赖，因此可以并行执行.如果是这样，那么您实际上只需要按顺序处理响应即可.您可以通过几种方式做到这一点:

It appears that your queries do not depend upon each other and thus can be executed in parallel. If that's the case, then you really just need to get the responses processed in order. You can do that several ways:

与Promise.all()并行运行

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

Launch all the requests in parallel, collect all the results, use Promise.all() to know when they are all done and then insert all the results.

//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()会按顺序收集结果，而不管哪个请求实际上先完成.

Promise.all() will collect the results in order, regardless of which requests actually finished first.

按顺序排列操作

您可以对操作进行排序，以便一次只运行一个，插入结果，然后运行下一个，依此类推.这将降低端到端的运行时间，但可以使您以中间方式显示结果.

You can sequence your operations so only one is run at a time, it's result is inserted, then the next one is run and so on. This will be a slower end-to-end run time, but gives you intermediate display of results.

//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());

这将创建一系列按顺序执行的链式承诺，一个接一个地执行，每个到达时插入结果.

This will create a series of chained promises that will execute in order, one after the other which each one inserting its result when it arrives.

这篇关于循环中的Ajax API调用需要按顺序执行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！