解决JavaScript中的承诺

2024-05-05 • 问答

我在兑现承诺方面遇到了麻烦。我尝试了许多不同的方法来兑现承诺，但是我所做的任何事情都无法满足我的需要。我正在尝试在网页上拖放文件。我需要一个Set（this.files）中所有文件的列表，该列表传递给调用以上传文件。问题在于Promise.all在承诺完成之前就已经在运行。

我仍在努力地兑现承诺，所以也许我全都错了，但从我的所有研究看来，这应该行得通。任何帮助将不胜感激。

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

感觉您在使事情变得有点困难，我建议您再读一遍编码标准和Promises的工作方式：)引入了async / await构造以提高代码的可读性。

无论如何，我这里有一些未经测试的代码。但这应该可以解决问题。另外，我强烈建议您添加类型。您正在使用角度，所以我只能假设您正在使用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 ];
}

解决JavaScript中的承诺

lisheng1987 回答：解决JavaScript中的承诺

大家都在问