JS загрузка файла: где разместить спиннер? - PullRequest
Новая
       8

JS загрузка файла: где разместить спиннер?

0 голосов
/ 28 февраля 2020

Я пытаюсь загрузить файл с помощью функции извлечения, я пытаюсь установить счетчик, но каждый раз, когда я его размещаю, выборка завершается неудачей. 

    document.getElementById("loader").style.display = 'block';

    fetch(url)
        .then(resp => resp.blob())
        .then(file => {
            if (file.size > 0) {
                const url = window.URL.createObjectURL(file);
                const a = document.createElement('a');
                a.style.display = 'none';
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                window.URL.revokeObjectURL(url);
            } else {
                $('#banner').html('<div class="alert alert-warning" role="alert">This provider does not seem to have any data during the selected dates, if you believe there is an issue, please contact the developers</div>');
            }
              document.getElementById("loader").style.display = 'none';

        })
        .catch(() => {
            $('#banner').html('<div class="alert alert-warning" role="alert">This provider does not seem to have any data during the selected dates, if you believe there is an issue, please contact the developers</div>');
            document.getElementById("loader").style.display = 'none';

        });

Показатель вращения document.getElementById("loader"), Я комментирую это в производственном коде, потому что это приводит к сбою выборки.

Если вы нажмете на загрузку, она начнет извлекаться, и счетчик будет виден, а затем через некоторое время сбой выборки, файл не будет загружен и вертушка исчезает. Если вы закомментируете счетчик, все работает.

Я получаю эту ошибку 500 internal server error

И этот момент js предупреждение, которое не имеет значения. 

moment.min.js:1 Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged and will be removed in an upcoming major release. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
Arguments: 
[0] _isAMomentObject: true, _isUTC: false, _useUTC: false, _l: undefined, _i: 07/01/2019, _f: undefined, _strict: undefined, _locale: [object Object]
Error

I не получить ошибку, если загрузчик не существует.

1 Ответ

0 голосов
/ 28 февраля 2020

Остановите загрузчик в методе обещания finally(). 

let loader = document.getElementById("loader");

// BEGIN LOADING
loader.style.display = 'block';

fetch(url)
  .then(resp => resp.blob())
  .then(file => {
    // HANDLE FILE
  })
  .catch(() => {
    // LOG ERROR
  })
  .finally(() => {
    // STOP LOADING
    loader.style.display = 'none';
  });
...