javascript - 在Array.map中 promise 还是循环替代？

我想知道您将如何解决以下问题。我有一个接受多个文件的上载组件。因此，onDrop为我提供了accepted和rejected文件（基于扩展名和大小）。

从那些accepted中，我需要弄清楚它们是否具有正确的尺寸，我想使用browser-image-size package。

这个包返回一个Promise，但是正如您在下面看到的，我需要在提供的accepted参数中为每个文件检查它。我尝试了以下操作，但是如您所见，这总是返回一个emty数组且未定义。

我该如何解决这个问题？

const checkDimensions = (file) => {
  return Promise.resolve(file);
}

const handleFiles = (accepted, rejected) => {
  const acceptedFiles = [];
  const errors = [];

  accepted.map(file =>
    checkDimensions(file)
    .catch((error) => errors.push(error))
    .then((file) => acceptedFiles.push(file))
  );

  // both log empty array
  console.log(acceptedFiles);
  console.log(errors);
}

// Logs undefined
console.log(handleFiles(['test file']))

最佳答案

您的控制台日志在checkDimensions有机会完成之前被执行。

const handleFiles = (accepted, rejected) => {
  const acceptedFiles = [];
  const errors = [];

  accepted.map(file => checkDimensions(file)
    .then(file => acceptedFiles.push(file), error => errors.push(error))
    .then(() => {
      console.log(acceptedFiles);
      console.log(errors);
    });
  );
}

then具有可选的第二个参数。 catch后跟then与带有2个参数的then之间的区别非常细微：如果checkDimensions决定拒绝文件，则acceptedFiles.push(file)仍将执行。

关于javascript - 在Array.map中 promise 还是循环替代？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44345272/