Resolució de problemes de descàrrega de fitxers JavaScript des del servidor web ESP32

Entendre els problemes de descàrrega de fitxers JavaScript amb ESP32

Descarregar fitxers d'un servidor web de vegades pot ser complicat, especialment quan es tracta de microcontroladors com l'ESP32. Quan s'intenta descarregar un fitxer amb JavaScript, pot haver-hi casos en què la descàrrega funcioni perfectament quan s'accedeix directament des del navegador, però falla quan s'inicia mitjançant un script.

En aquest escenari, l'ESP32 publica un fitxer .CSV estàtic mitjançant un servidor web PsychicHTTP. El problema sorgeix quan el fitxer no es descarrega mitjançant JavaScript, tot i ser accessible mitjançant un enllaç HTML directe al navegador. Aquest problema pot ser frustrant, però és un problema comú que s'enfronta quan es treballa amb sistemes integrats.

El codi JavaScript utilitza una XMLHttpRequest per sol·licitar el fitxer a l'ESP32, però no activa la descàrrega com s'esperava. En aquest article s'explorarà per què l'enllaç directe funciona però el mètode JavaScript no. També proporcionarà informació sobre com modificar el JavaScript mitjançant una API d'obtenció més moderna per resoldre aquest problema.

A més, parlarem de si calen canvis al codi ESP32 en canviar de XMLHttpRequest a l'API de recuperació. En examinar aquestes dues preguntes, descobrirem el problema subjacent i oferirem solucions per a descàrregues de fitxers fiables.

Anàlisi de mètodes i solucions de descàrrega de fitxers JavaScript

En els exemples proporcionats, l'objectiu era descarregar un fitxer CSV des d'un servidor web ESP32 amb PsychicHTTP. El primer guió utilitza el modern Fetch API, una eina potent per fer sol·licituds HTTP en JavaScript. Aquest mètode simplifica el procés gestionant promeses i és més llegible que les tècniques anteriors com XMLHttpRequest. La sol·licitud d'obtenció envia una sol·licitud GET a l'ESP32, recupera el fitxer i després el converteix en un taca format, que és essencial per manejar dades binàries com els fitxers CSV. Aleshores es genera un URL temporal per permetre a l'usuari descarregar el fitxer mitjançant una etiqueta d'ancoratge.

El segon script és una alternativa que utilitza XMLHttpRequest, una forma més tradicional de fer sol·licituds HTTP. Tot i que XMLHttpRequest és més antic, encara s'utilitza en moltes aplicacions. En aquest exemple, el tipus de resposta s'estableix en "blob" per gestionar el fitxer binari que retorna el servidor. L'script escolta la resposta i, quan es torna amb èxit, crea dinàmicament un element d'ancoratge per activar la descàrrega. Aquest mètode proporciona un control més granular sobre la sol·licitud, però no té la simplicitat i la flexibilitat de l'API Fetch, especialment quan es gestiona promeses.

La tercera solució és una alternativa que no requereix JavaScript en absolut. Utilitza una etiqueta d'ancoratge HTML amb el descarregar atribut, que permet als usuaris fer clic a l'enllaç i descarregar automàticament el fitxer. Aquesta és la solució més bàsica i no requereix cap script. Tanmateix, és menys flexible, ja que no us permet gestionar amb programació les descàrregues de fitxers ni afegir cap condició o lògica abans d'activar la descàrrega.

Cadascuna d'aquestes solucions aborda un cas d'ús diferent. L'API Fetch és la solució recomanada per a aplicacions modernes per la seva senzillesa i rendiment. XMLHttpRequest és útil quan necessiteu més control sobre la sol·licitud i la resposta. Finalment, la solució només HTML és ideal per a pàgines web estàtiques o simples on no cal JavaScript. Amb la implementació d'un d'aquests mètodes, podeu garantir descàrregues de fitxers fiables des d'un servidor web ESP32, millorant tant l'experiència com la funcionalitat de l'usuari.

function downloadFile(url, fileName) {
  fetch(url, { method: 'GET', mode: 'cors' })
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.blob();
    })
    .then(blob => {
      const aElement = document.createElement('a');
      const objectUrl = URL.createObjectURL(blob);
      aElement.href = objectUrl;
      aElement.download = fileName;
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(objectUrl);
      document.body.removeChild(aElement);
    })
    .catch(error => console.error('Fetch error:', error));
}
downloadFile('http://192.168.0.136/saveFile', 'sample.csv');

function saveFile() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', '/saveFile', true);
  xhr.responseType = 'blob';
  xhr.onload = function () {
    if (xhr.status === 200) {
      var blob = xhr.response;
      var aElement = document.createElement('a');
      var url = URL.createObjectURL(blob);
      aElement.href = url;
      aElement.download = 'sample.csv';
      document.body.appendChild(aElement);
      aElement.click();
      URL.revokeObjectURL(url);
      document.body.removeChild(aElement);
    }
  };
  xhr.send();
}

<a href="http://192.168.0.136/saveFile" download="sample.csv">Download CSV</a>

describe('Download File Test', function() {
  it('should successfully download a file using fetch', function(done) {
    const url = 'http://192.168.0.136/saveFile';
    fetch(url, { method: 'GET' })
      .then(response => {
        expect(response.ok).toBe(true);
        return response.blob();
      })
      .then(blob => {
        expect(blob.size).toBeGreaterThan(0);
        done();
      })
      .catch(done.fail);
  });
});

Explorant les diferències en els mètodes de descàrrega de fitxers JavaScript i HTML

Quan baixeu fitxers mitjançant JavaScript, és important entendre com interactuen els diferents mètodes amb les polítiques de seguretat del navegador. Un dels motius pels quals funciona l'enllaç directe de la barra d'adreces és perquè el navegador pot resoldre immediatament la sol·licitud i gestionar la descàrrega. Tanmateix, quan s'intenta això a través de JavaScript, els navegadors apliquen regles més estrictes, com ara exigir la correcció CORS Configuració (Compartició de recursos entre orígens). Sense posar no-cors o cors modes correctament, és possible que la descàrrega no es produeixi.

A més, els navegadors moderns prefereixen l'ús del fetch() API sobre mètodes antics com XMLHttpRequest, ja que proporciona més control sobre com es gestionen les respostes, especialment per a taca o objectes semblants a fitxers. També gestiona els errors amb més gràcia, cosa que la converteix en una solució més fiable per descarregar fitxers de forma dinàmica. Configurar els tipus MIME adequats és un altre factor clau per garantir que el client gestioni correctament el fitxer.

Per a aplicacions com ara descarregar des d'un ESP32, és crucial assegurar-se que el servidor gestiona correctament les sol·licituds i les respostes, oferint els tipus i capçaleres MIME correctes. L'API Fetch també permet un millor maneig de promeses, que és especialment útil en entorns asíncrons com la descàrrega de fitxers, assegurant que l'experiència de l'usuari segueixi sent fluida i sensible.