在循环中使用 async/await

Question

我知道已经有很多类似的问题，但 none 似乎解决了这个特定问题。我有一个包含 forEach 循环的 Javascript 函数，在 forEach 循环内部，有异步调用。

代码大致如下：

const handleConvert = () => {

    const refs = { ...imageRefs.current }

    // Outer loop
    Object.keys(refs).forEach(key => {
      
      // Inner loop
      refs[key].forEach(ref => {
        toPng(ref)
          .then((dataUrl) => {
            props.setImageUrls(old => {
              return {
                ..old,
                [key]: [...old[key], dataUrl]
              }
            })
          })
          .catch(err => {
            console.error(err)
          })
      })
    })
    setConverting(false)
    setConverted(true)
  }

refs 是一个包含 2 个键的对象，每个键都有一个数组作为它的值。它看起来像这样：

{
  a: [1, 2, 3],
  b: [3, 4, 5]
}

toPng() 函数returns 一个承诺。在执行外部 forEach 循环之后的代码之前，我试图等待所有这些承诺得到解决：

if (mounted) {
  setConverting(false)
  setConverted(true)
}

有没有办法在外循环之后执行代码之前等待所有的承诺解决？也许用 Promise.all()?

Answer 1

嵌套另一个 Promise.all 以等待每个子数组完成。确保将每个 Promise 映射并 return 到调用者，以便 Promise.all 正常运行。

Promise.all(
    Object.entries(refs)
        .map(([key, arr]) => Promise.all(
            arr.map(num =>
                toPng(num).then(dataUrl => {
                    props.setImageUrls(old => ({ ...old, [key]: [...old[key], dataUrl] }))
                })
            )
        ))
)
    .then( // all done

在循环中使用 async/await

Using async/await in a loop

javascript

asynchronous

es6-promise