多次下载冻结了我的应用程序 - vuejs、类星体、电子

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 秒，然后开始下载。

下载将使用相同的功能完成：（文件已满 url）

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

对于文件：（有时一次下载会包含 1 个以上的文件）

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 回购和承诺。我用 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();
  }
})
});

希望这对某人有所帮助

多次下载冻结了我的应用程序 - vuejs、类星体、电子

Multiple Downloads freezes my app - vuejs, quasar, electron

download

vue.js

quasar

electron

axios