JS fetch 下载文件：在哪里放置微调器？

Question

我正在尝试使用 fetch 下载文件，我正在尝试放置一个微调器，但每次我放置它时，fetch 都会失败。

    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

而这个momentjs警告是无关紧要的。

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

如果加载器不存在，我不会收到错误。

Answer 1

在 promise 的 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';
  });