在 JavaScript 中解析 Promise

Question

我很难获得按我需要的方式工作的承诺。我尝试了许多不同的方法来解决这个承诺，但我所做的一切都无法满足我的需要。我正在尝试在网页上拖放文件。我需要传递给调用以上传文件的 Set (this.files) 中所有文件的列表。问题是 Promise.all 是在 Promise 完成之前运行的。

我仍在努力将我的想法包裹在承诺上，所以也许我错了，但从我的所有研究看来，这应该可行。任何帮助将不胜感激。

  async dndDropFiles(event) {
    event.preventDefault();
    let ptable = [];
    this.files = new Set();
    if (event.dataTransfer.types[0] === "Files") {
      var items = event.dataTransfer.items;
      for (var i=0; i<items.length; i++) {
        // webkitGetAsEntry is where the magic happens
        var item = await items[i].webkitGetAsEntry();
        if (item) {
          ptable.push(new Promise(async resolve => {
            resolve(await this.dndTraverseFileTree(item, ""));
          }))
        }
      }  
      Promise.all(ptable)
        .then( (results) => {
          if (this.files.size > 0) {
            this.progress = this.uploadService.upload(this.files, this.currentDir, this.currentProject);
          }    
        })
    }
  }

  async dndTraverseFileTree(item, path) {
    if (item.isFile) {
      // Get file
      item.file((file) => {
        this.files.add(file);
      });
  } else if (item.isDirectory) {
      // Get folder contents
      let ptable = [];
      var dirReader = await item.createReader();
      dirReader.readEntries((entries) => {
        for (var i=0; i<entries.length; i++) {
          ptable.push(new Promise( async resolve => {
            resolve(await this.dndTraverseFileTree(entries[i], path + item.name + "/"));
          }));
        }
        Promise.all(ptable)
          .then (results => {});
      });
    }
  }

Answer 1

感觉你让事情变得有点太难了，我建议对编码标准和 Promises 的工作方式进行另一次阅读：) 引入了 async/await 构造以提高代码可读性。

无论如何，我这里有一些未经测试的代码。但它应该可以解决问题。另外，我强烈建议您添加类型。您使用的是 angular，所以我只能假设您使用的是 TypeScript。通过打字，您将减少错误，并且编译器会一路帮助您。

在我给出代码之前，这个webkitGetAsEntry 是非标准的。并且仅在您确实不想针对旧浏览器或 safari/ios 时使用：

非标准 此功能是非标准的，不在标准轨道上。不要在面向 Web 的生产站点上使用它：它不适用于每个用户。实现之间也可能存在很大的不兼容性，并且行为可能会在未来发生变化。

但是，你可以这样做。处理事件的第一个函数。第二个遍历树：

async dndDropFiles(event: DragEvent): Promise<void> {
  if (event.dataTransfer.types[0] !== "Files" || !event.dataTransfer.items) {
    return;
  }

  const entries = [...(event.dataTransfer.items as any)].map(
    item => item.webkitGetAsEntry()
  );

  const allEntries = await this.dndTraverseFileTree(entries);

  const files = await Promise.all(
    allEntries.map(
      (entry) => new Promise((resolve, reject) => entry.file(resolve, reject))
    )
  );

  this.files = new Set(files);

  if (this.files.size > 0) {
    this.progress = this.uploadService.upload(
      this.files, this.currentDir, this.currentProject
    );
  }
}

async dndTraverseFileTree(entries: any[]): Promise<any[]> {
  const dirs = entries.filter(entry => !!entry && entry.isDirectory);
  const files = entries.filter(entry => !!entry && entry.isFile);

  if (dirs.length) {
    const childEntries = (
      await Promise.all(
          dirs.map(dir => new Promise(
            (resolve, reject) => dir.createReader().readEntries(resolve, reject))
          )
        )
    ).flat();

    return this.dndTraverseFileTree(childEntries);
  }

  return [ ...files ];
}