JSZip VUE如何解析promise数组并保存到局部变量答案

【问题标题】：JSZip VUE how to resolve a promise array and save to local variableJSZip VUE如何解析promise数组并保存到局部变量
【发布时间】：2021-07-03 11:33:05
【问题描述】：

没有使用异步函数，所以我有点迷失在这里...... 我想要完成的是使用 JSZip 遍历 zip 文件中的文件夹中的文件，将这些文件保存在一个数组中，然后对它们进行排序，将它们保存到一个局部变量中，以便我可以进一步发送它们。

这是我得到一系列承诺的代码：

async extractTests(file){
  let Zip = new JSZip();
  let tests = await Zip.loadAsync(file).then((zip) => {
      const promises = [];
      zip.folder("tests").forEach(async function (relativePath, file) {
        promises.push({ name: relativePath, data: await zip.file("tests/" + relativePath).async("text") });
      });
      return promises;
    })
  return tests;
}

然后我尝试在添加 zip 文件时运行的事件函数中对数组进行排序：

extract(event) {
  const file = event.target.files[0];
  let res = this.extractTests(file);
  res.then(function (r) {
    res.sort(function (a, b) {
      var nameA = a.name.toUpperCase();
      var nameB = b.name.toUpperCase();
      console.log(a.name);
      if (nameA < nameB) {
        return -1;
      }
      else {
        return 1;
      }
    });
  })
}

需要对列表进行排序，因为它以错误的顺序解析 - 据我所知，排序函数甚至不会触发 - 很确定它与异步函数有关。排序将适用于局部变量，对我来说将数组保存为局部变量会更简单 - 那么我该如何做到这一点并解决承诺。

提前致谢

【问题讨论】：

在extract()中，res.sort应该是r.sort（res是Promise，r是解析后的Promise[]）。

标签： javascript vue.js async-await promise jszip

【解决方案1】：

强烈建议不要在高阶函数上使用async / await，这可能会导致无法预测的行为，您的代码可能看起来可以工作，但实际上只会触发一些异步调用而没有提供所需的输出。

如果没有具有相同库的存档结构，我无法确定重现该问题，但您可以尝试更改提取功能，如下所示：

async function extractTests(file: any) {
  let Zip = new JSZip();
  let tests = await Zip.loadAsync(file)
    .then((zip) => {
      const promises = [];
      zip.folder("tests")
        .forEach(function (relativePath, file) { // removed async function
          promises.push(
            zip.file("tests/" + relativePath)
              .async("text")
              .then((data) => { // replaced with Promise fulfillment data update
                return { name: relativePath, data: data }
              })
          );
        });
      return promises;
    })
  return Promise.all(tests); // Resolve all promises in parallel
}

【讨论】：