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

Question

我需要为 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) { 
      .....
  });

Answer 1

正如 @epascarello 的回答中已经建议的那样，promise 将是在这里使用的一种简单方法。

如果您可以使用 native promise ，您可以执行类似的操作来消除重复的代码和 if 检查。这还允许在执行 $.ajax() 之前加载任意数量的文件。

这个想法是将 Promise 添加到数组中，然后等待它们全部解决。当文件读取器完成读取时， promise 将得到解决。

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