title: Best way to asynchronously load external js files via Promises
body: <p>I am building a website that uses some external js files. I load the files via the code below, but I am not sure how to proceed if one or more of the files fails downloading. Should I just keep requesting them until all of them download? Is it better to do a separate onload event for each file? How would I know which file has failed loading and needs to be requested again?</p>
  
  <pre><code>var filesToLoad = ["https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"];
  
  var loader = new ScriptLoader();
  filesToLoad.forEach(function(file) {
      loader.add(file);
  });
  
  loader.loaded(function(failedCallbackF) {
      console.log("Error.");
      //Try getting the files again??
  });
  
  function ScriptLoader() {
      var promises = [];
  
      this.add = function(url) {
          var promise = new Promise(function(resolve, reject) {
  
              var script = document.createElement('script');
              script.src = url;
  
              script.addEventListener('load', function() {
                  resolve(script);
              }, false);
  
              script.addEventListener('error', function() {
                  reject(script);
                  console.log('was rej');
              }, false);
  
              document.body.appendChild(script);
          });
  
          promises.push(promise);
      };
  
      this.loaded = function(callbackOnFailed) {
          Promise.all(promises).then(function(result1) {
              console.log('Script loaded from:', result1);
          }, callbackOnFailed);
      };
  }
  </code></pre>