vue.js - 多次下载卡住了我的应用-vuejs，类星体， Electron

Question

我的应用程序有问题。我正在使用以下软件:

"axios": "^0.16.2",
"axios-retry": "^3.0.1",
"babel-runtime": "^6.25.0",
"lodash": "^4.17.4",
"moment": "^2.19.1",
"node-machine-id": "^1.1.9",
"numeral": "^2.0.6",
"pdfjs-dist": "^2.0.303",
"quasar-extras": "0.x",
"quasar-framework": "^0.14.4",
"vue": "~2.3.4",
"vue-async-computed": "^3.3.1",
"vue-fullscreen": "^2.1.3",
"vue-pdf": "^2.0.4",
"vue-router": "^2.7.0",
"vue-scrollto": "^2.8.0",
"vue-video-player": "^5.0.2",
"vuedraggable": "^2.16.0",
"vuex": "^2.4.1"

当用户点击缩略图时，“我的应用”需要从服务器下载文件。首次运行时，该应用会下载所有缩略图。这具有正常速度。 60个GET请求同时开始。
现在，当我要下载文件(3mb的pdf文件)时，该应用程序冻结5至10秒钟，然后开始下载。

下载将使用相同的功能完成:(文件为完整网址)

function downloadAndWrite(file) {
  this.$store.dispatch(START_DIMMER, {
    title: this.$t('dimmer.generalSetup.title'),
    description: this.$t('dimmer.generalSetup.description')
  });
  // console.time('fetchFile' + file);
  let responseType = 'arraybuffer';
  if (this.$q.platform.is.cordova) {
    responseType = 'blob';
  }

  return this.$http
    .get(`${file}`, {
      timeout: 1800000, // 30 minutes for large files
      responseType: responseType
    })
    .then((response) => {
      return this.$fileSystem.write(file, response)
        .then((message) => {
          // Unzip zip files
          // console.timeEnd('fetchFile' + file);
          if (/\.zip$/i.test(file)) {
            return this.$fileSystem.unzip(message.file).then((result) => {
              this.$store.dispatch(STOP_DIMMER, {});
            }, (error) => {
              console.error(error);
              this.$store.dispatch(STOP_DIMMER, {});
            });
          } else {
            this.$store.dispatch(STOP_DIMMER, {});
            return message;
          }
        });
    })
    .catch(error => {
      console.error(error);
      this.$store.dispatch(STOP_DIMMER, {});
    });
}

该函数的调用方式相同-此处为缩略图:

function saveThumbnails(documents) {
   let promises = documents.map((imagePath) => {
    if (imagePath) {
      downloadAndWrite.call(this, imagePath)
    }
  });

  return Promise.all(promises);
}

用于文件:(有时一个下载将包含多个文件)

let promises = resources.map((item) => {
  if (item && item.url) {
    downloadAndWrite.call(this, item.url);
  } else {
    console.error('missing url', item);
  }
});
return Promise.all(promises);

有人知道为什么文件下载时我的应用程序冻结了吗？仅供引用:冻结结束后，将开始下载并一切正常。

Answer 1

伙计们，我解决了!
发送请求时，这是axios repo 和 promise 。我已经用superagent和http测试过。他们更快，但不够快。
这是我的解决方案:

let responseType = 'arraybuffer';
if (this.$q.platform.is.cordova) {
  responseType = 'blob';
}
return new Promise((resolve, reject) => {
let length = files.length;
let count = 0;
files.map((imagePath) => {
  if (imagePath) {
    let request = new XMLHttpRequest();
    request.open('GET', imagePath);
    request.responseType = responseType;
    request.timeout = 1800000;

    request.addEventListener('load', (event) => {
      if (request.status >= 200 && request.status < 300) {
        this.$fileSystem.write(imagePath, request.response)
          .then((message) => {
            // Unzip zip files
            if (/\.zip$/i.test(message.file)) {
              this.$fileSystem.unzip(message.file).then((result) => {
                this.$emit('download-finished', message);
              }, (error) => {
                console.error(error);
                this.$emit('download-finished', message);
              });
            } else {
              this.$emit('download-finished', message);
              // return message;
            }
          });
      } else {
        console.warn(request.statusText, request.response);
        this.$emit('download-finished', request.response);
      }
    });
    request.send();
  }
});
this.$on('download-finished', (response) => {
  count++;
  console.log('download-finished ' + count);
  if (count === length) {
    resolve();
  }
})
});

希望这对某人有帮助