Ajax-API-Aufrufe in Schleife benötigen, um

Question

ausgeführt werden kann sagen, Sie ein Szenario, wo Sie benötigten eine CSV-Ausgabe in einer Seite des Textfeld zu erstellen ...

So habe ich eine Reihe von Abfragen, die i-Schleife . Innerhalb der Schleife, die eine Frage zu einem Ajaxanruf überschreitet ... Ich muss das Resultat des Ajaxanrufes in den Textarea anhängen.

Meine Frage ist, wie Sie die Ergebnisse in der Reihenfolge ausgedruckt bekommen sie (im Grunde die Reihenfolge, in der Abfragen-Array) angefordert werden

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

Dieses Beispiel ist vereinfacht, aber das durch die Lösung würde ich eine Idee wie ich mein Problem angehen kann.

Danke Jungs.

Answer 1

Es scheint, dass Ihre Fragen hängen nicht von einander und können somit parallel ausgeführt werden. Wenn das der Fall ist, müssen Sie die Antworten nur in der richtigen Reihenfolge verarbeiten. Sie können tun, dass mehrere Möglichkeiten:

laufen parallel mit Promise.all()

Starten alle Anforderungen parallel, alle Ergebnisse zu sammeln, nutzen Promise.all() zu wissen, wann sie alle fertig sind und dann einfügen alle Ergebnisse.

//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() werden die Ergebnisse sammeln, um, unabhängig davon, welche zuerst tatsächlich beendet anfordert.

Sequence Ihre Operationen

Sie können so Ihre Operationen sequenzieren nur eine zu einem Zeitpunkt ausgeführt, es ist Ergebnis eingeführt wird, dann wird die nächste ausgeführt wird und so weiter. Dies ist eine langsamere Ende-zu-Ende-Laufzeit, aber Sie erhalten eine Zwischenanzeige der Ergebnisse.

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

Dies wird eine Reihe von verketteten Versprechen schaffen, um eine nach der anderen, die jeweils ein Einfügen sein Ergebnis, wenn es ankommt ausführt.

Answer 2

Anstelle von $ .each können Sie reduce verwenden, um eine willkürliche Liste von Versprechen zu erstellen.

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/