JSZip VUE 如何解析承诺数组并保存到局部变量

Question

没有使用过异步函数所以我有点迷路了... 我想要完成的是使用 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;
      }
    });
  })
}

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

提前致谢

Answer 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
}

JSZip VUE 如何解析承诺数组并保存到局部变量

JSZip VUE how to resolve a promise array and save to local variable

javascript

promise

async-await

jszip

vue.js