Javascript 在ajax post请求之前加载两个文件

我需要为ajax post请求加载两个文件。如何确保在ajax调用之前加载它们？当前代码如下所示

  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) { 
      .....
  });

---

这实际上很难做到。一种可能是设置一个计时器，定期检查两个文件的状态（

data.a

，

data.b

）。启动计时器，而不是直接调用ajax函数。一旦计时器函数确定它们都已加载，则执行ajax调用

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) { 
        .....
      }
    });
  }
}

用来处理这种情况

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

---

正如@epascarello的回答中已经提到的，在这里，承诺是一种很容易使用的方法

如果您可以使用本机承诺，那么您可以这样做以消除重复的代码和

If

-检查。这还允许在执行

$.ajax（）

之前加载任意数量的文件

其思想是向数组中添加承诺，然后等待它们全部解决。当filereader完成读取时，承诺将得到解决

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) {
            .....
          });
      });

---

承诺是你所需要的。你可以建议你不熟悉问题的概念，调整你的答案，或者被否决。你可以更具体一点吗？你测试过你提供的代码吗？它对你说的乳清有效吗？如果是这样的话，就像我之前说的，可能表明你不熟悉或者确信它是有效的。can是can的一个词形变化，用来表示可能性或过去的能力，以及提出建议和要求。我不会修改我的答案，因为它是完全有效的。建议将其作为编辑。