Criar um carregador básico com promessas de JavaScript

Uso carregadores de JavaScript há anos, seja o carregador Dojo, curl.jsou mesmo usando jQuery como um carregador de JavaScriptO jQuery é um carregador de JavaScript, que é incrivelmente útil para solicitar um conjunto de recursos e reagir assim que o carregamento for concluído. Cada carregador de JavaScript é repleto de recursos, eficiente e faz um excelente trabalho de shimming da API Promise que não existia no navegador quando o carregador foi criado. O seguinte não é esse tipo de carregador.

Este super simples permite o carregamento de arquivos de imagem, CSS e JavaScript, usando o API Promisee dispara um retorno de chamada em caso de sucesso ou falha. Esse pequeno “carregador” (eu nem deveria chamá-lo assim) faz não:

• resultados do cache (embora isso fosse fácil)
• fornecer um módulo/objeto de volta
• fazem chamadas AJAX (embora um XHR-to-Promise está disponível, ou o senhor pode usar o buscar)
• … ou qualquer outra coisa avançada

Aqui está o pequeno “carregador” em toda a sua glória:

var load = (function() {
  // Function which returns a function: https://davidwalsh.name/javascript-functions
  function _load(tag) {
    return function(url) {
      // This promise will be used by Promise.all to determine success or failure
      return new Promise(function(resolve, reject) {
        var element = document.createElement(tag);
        var parent="body";
        var attr="src";

        // Important success and error for the promise
        element.onload = function() {
          resolve(url);
        };
        element.onerror = function() {
          reject(url);
        };

        // Need to set different attributes depending on tag type
        switch(tag) {
          case 'script':
            element.async = true;
            break;
          case 'link':
            element.type="text/css";
            element.rel="stylesheet";
            attr="href";
            parent="head";
        }

        // Inject into document to kick off loading
        element[attr] = url;
        document[parent].appendChild(element);
      });
    };
  }
  
  return {
    css: _load('link'),
    js: _load('script'),
    img: _load('img')
  }
})();

// Usage:  Load different file types with one callback
Promise.all([
    load.js('lib/highlighter.js'), 
    load.js('lib/main.js'), 
    load.css('lib/highlighter.css'),
    load.img('images/logo.png')
  ]).then(function() {
    console.log('Everything has loaded!');
  }).catch(function() {
    console.log('Oh no, epic failure!');
  });

A load é criado com o js, css, e img que aceitam um URL para carregar. Cada função retorna uma Promise e a função onload ou onerror da tag do recurso aciona o evento resolve ou reject para a promessa. Promise.all coleta os recursos a serem carregados e then é acionado após o carregamento bem-sucedido de todos os recursos, catch se algum deles falhar.

Devo enfatizar que este é um “carregador” muito, muito simples; por favor, guarde os comentários sobre o fato de ele não ter os recursos que outros carregadores têm. Eu adoro o fato de o API Promise faz gerenciamento assíncrono e de carregamento de recursos, assim como a API ServiceWorker e o API fetch. Faça um favor a si mesmo e dê uma olhada nessas APIs incríveis!