Question

我的App中有问题。我使用以下软件：

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

对于文件:(有时下载将包含多个文件）

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和promises。我用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，类星体，电子

1 个答案: