laden Sie zwei Dateien vor Ajax Post Anfrage

Question

Ich muss zwei Dateien für die Ajax Post Anfrage laden. Wie stelle ich sicher, dass beide vor dem Ajax-Aufruf geladen sind? Der aktuelle Code ist wie folgt.

if (options.a) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.a);           
    reader.onload = function(evt) {            
     data.a = window.btoa(evt.target.result);     
    }                                   
    } 
    if (options.b) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.b);           
    reader.onload = function(evt) {            
     data.b = window.btoa(evt.target.result);     
    }                                   
    }     
    $.ajax({                  
    url: command,                
    data: JSON.stringify(data),             
    type: 'POST',                
    success: function(result, status) { 
     ..... 
    }); 

Answer 1

Dies ist eigentlich schwierig zu tun. Eine Möglichkeit besteht darin, einen Timer zu setzen, um den Status beider Dateien periodisch zu überprüfen (data.a, data.b). Und anstatt die Ajax-Funktion direkt aufzurufen, starten Sie den Timer. Sobald Ihre Timer-Funktion feststellt, dass beide geladen sind, führen Sie Ihren Ajax-Anruf aus.

if (options.a) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.a);           
    reader.onload = function(evt) {            
     data.a = window.btoa(evt.target.result);     
    } 
} 
if (options.b) {             
    var reader = new FileReader();            
    reader.readAsBinaryString(options.b);           
    reader.onload = function(evt) {            
     data.b = window.btoa(evt.target.result);     
    } 
} 

//CHECK THE STATUS OF YOUR FILES EVERY 300 MILLISECONDS 
var postHandler = setInterval(postData, 300); 

//FUNCTION THAT CHECKS THE STATUS OF FILES, DOES THE AJAX POST, AND CLEARS THE TIMER 
function postData() { 
    if (data.a && data.b) { 
    clearInterval(postHandler); 
    $.ajax({ 
     url: command,                
     data: JSON.stringify(data),             
     type: 'POST',                
     success: function(result, status) { 
     ..... 
     } 
    }); 
    } 
} 

Answer 2

Verwenden Sie promises, um diese Situation zu behandeln.

var d1 = $.Deferred(); 
var d2 = $.Deferred(); 

$.when(d1, d2).done(function (value1, value2) { 
    console.log(value1); 
    console.log(value2); 
    //make your Ajax call 

}); 

d1.resolve("call one"); //trigger inside of onload a 
d2.resolve("call two"); //trigger inside of onload b 

Answer 3

Wie bereits in der Antwort von @ epascarello vorgeschlagen, wären Versprechen eine einfache Methode, hier zu verwenden.

Wenn Sie native Versprechungen verwenden können, könnten Sie etwas tun, um den doppelten Code und if-checks loszuwerden. Dies ermöglicht auch das Laden einer beliebigen Anzahl von Dateien, bevor die $.ajax() ausgeführt wird.

Die Idee ist, Versprechen zu einem Array hinzuzufügen und dann zu warten, bis sie alle gelöst haben. Die Versprechen werden aufgelöst, wenn der Leser mit dem Lesen fertig ist.

var promises = []; 
Object.keys(options).map(function(key) { 
    if (options[key]) { 
    var promise = new Promise(function(resolve, reject) { 
     var reader = new FileReader(); 
     reader.readAsBinaryString(options[key]); 
     reader.onload = function(evt) { 
     data[key] = window.btoa(evt.target.result); 
     resolve(); 
     } 
    }); 
    promises.push(promise); 
    } 
}); 

//Await all promises in array 
Promise.all(promises) 
    .then(function() { 
     //All data read, execute ajax 
     $.ajax({ 
      url: command, 
      data: JSON.stringify(data), 
      type: 'POST', 
      success: function(result, status) { 
      ..... 
      }); 
     });