Вирішення проблем із завантаженням файлів JavaScript із веб-сервера ESP32

Розуміння проблем із завантаженням файлів JavaScript за допомогою ESP32

Завантажувати файли з веб-сервера іноді може бути складно, особливо коли ви маєте справу з мікроконтролерами, такими як ESP32. Під час спроби завантажити файл за допомогою JavaScript можуть бути випадки, коли завантаження працює ідеально, якщо отримати доступ безпосередньо з браузера, але не вдасться, якщо ініціювати за допомогою сценарію.

У цьому випадку ESP32 обслуговує статичний файл .CSV за допомогою веб-сервера PsychicHTTP. Проблема виникає, коли файл не завантажується через JavaScript, незважаючи на те, що він доступний через пряме посилання HTML у браузері. Ця проблема може викликати розчарування, але з нею часто стикаються під час роботи із вбудованими системами.

Код JavaScript використовує XMLHttpRequest для запиту файлу з ESP32, але він не запускає завантаження, як очікувалося. Ця стаття дослідить, чому пряме посилання працює, а метод JavaScript – ні. Він також надасть інформацію про те, як змінити JavaScript за допомогою сучаснішого API «витягування» для вирішення цієї проблеми.

Крім того, ми обговоримо, чи потрібні зміни в коді ESP32 під час переходу від XMLHttpRequest до API отримання. Вивчивши ці два запитання, ми виявимо основну проблему та запропонуємо рішення для надійного завантаження файлів.

Аналіз методів і рішень для завантаження файлів JavaScript

У наданих прикладах метою було завантажити файл CSV з веб-сервера ESP32, на якому працює PsychicHTTP. Перший сценарій використовує сучасний Fetch API, потужний інструмент для створення HTTP-запитів у JavaScript. Цей метод спрощує процес, обробляючи обіцянки, і є більш читабельним, ніж старі методи, такі як XMLHttpRequest. Запит на вибірку надсилає запит GET до ESP32, отримує файл, а потім перетворює його на крапка формат, який є важливим для обробки двійкових даних, таких як файли CSV. Потім створюється тимчасова URL-адреса, яка дозволяє користувачеві завантажити файл за допомогою тегу прив’язки.

Другий сценарій є альтернативою, яка використовує XMLHttpRequest, більш традиційний спосіб створення HTTP-запитів. Хоча XMLHttpRequest старіший, він все ще використовується в багатьох програмах. У цьому прикладі responseType має значення «blob» для обробки двійкового файлу, який повертає сервер. Сценарій прослуховує відповідь і після успішного повернення динамічно створює елемент прив’язки, щоб ініціювати завантаження. Цей метод забезпечує більш детальний контроль над запитом, але йому бракує простоти та гнучкості Fetch API, особливо під час обробки обіцянок.

Третє рішення — резервне рішення, для якого взагалі не потрібен JavaScript. Він використовує тег прив’язки HTML із завантажити атрибут, що дозволяє користувачам натискати посилання й автоматично завантажувати файл. Це найпростіше рішення, яке не потребує сценаріїв. Однак він менш гнучкий, оскільки не дозволяє програмно обробляти завантаження файлів або додавати будь-які умови чи логіку перед ініціюванням завантаження.

Кожне з цих рішень стосується окремого випадку використання. Fetch API є рекомендованим рішенням для сучасних програм через його простоту та продуктивність. XMLHttpRequest корисний, коли вам потрібно більше контролювати запит і відповідь. Нарешті, рішення лише для HTML ідеально підходить для статичних або простих веб-сторінок, де JavaScript не потрібен. Застосувавши один із цих методів, ви можете забезпечити надійне завантаження файлів із веб-сервера ESP32, покращуючи як взаємодію з користувачем, так і функціональність.

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

Вивчення відмінностей у методах завантаження файлів JavaScript і HTML

Завантажуючи файли через JavaScript, важливо розуміти, як різні методи взаємодіють із політикою безпеки браузера. Однією з причин роботи прямого посилання в адресному рядку є те, що браузер може негайно вирішити запит і обробити завантаження. Однак, намагаючись зробити це за допомогою JavaScript, браузери застосовують суворіші правила, такі як вимога правильності CORS Налаштування (Cross-Origin Resource Sharing). Без налаштування no-cors або cors режими правильно, завантаження може не відбутися.

Крім того, сучасні браузери віддають перевагу використанню fetch() API над старими методами, наприклад XMLHttpRequest, оскільки це забезпечує більше контролю над тим, як обробляються відповіді, особливо для крапка або файлоподібні об’єкти. Він також витонченіше обробляє помилки, що робить його більш надійним рішенням для динамічного завантаження файлів. Встановлення належних типів MIME є ще одним ключовим фактором у забезпеченні правильної обробки файлу клієнтом.

Для таких програм, як завантаження з ESP32, дуже важливо переконатися, що сервер правильно обробляє запити та відповіді, обслуговуючи правильні типи MIME та заголовки. Fetch API також забезпечує кращу обробку обіцянок, що особливо корисно в асинхронних середовищах, таких як завантаження файлів, забезпечуючи безперебійну роботу користувача та оперативність.