javascript - 对 Promise 解析的 Array 中的每个结果应用操作，无需嵌套

Question

ESlint 和世界其他地方告诉我要避免嵌套 Promise。但是，在先前的 promise 返回数组的情况下，如何将一个函数分别应用于多个项目？例如，我想对前一个 Promise 返回的每个元素运行 doSomethingWithIt，并对结果执行一些操作。

function getSomeThings() {
   return new Promise((resolve, reject) => {
     resolve(['one', 'two', 'three'])
   })
}

function doSomethingWithIt(theThing) {
  return new Promise((resolve, reject) => {
     console.log(theThing)
     resolve("Did a thing")
  })
}

getSomeThings().then((things) => {
   things.forEach((thing) => {
      doSomethingWithIt(thing)
       .then((result) => {
          console.log(`Result was: ${result}`)
       })
   })
})

实际上，该函数可能不只是打印返回值，而是返回一个 ID 或在操作完成时记录有用的东西(例如提交到数据库)。

如何在不嵌套 promise 的情况下实现这一点？我是否需要添加一个使用 Promise.all 来聚合结果的步骤？或者有没有更简洁的方法...

Answer 1

您将对您在循环中创建的 promise 使用 Promise.all。不仅仅是让 ESLint 开心，而是让你保持完整的成功/失败链:

getSomeThings()
    .then((things) => Promise.all(things.map(doSomethingWithIt)))
    .then((results) => {
        for (const result of results) {
            console.log(`Result was: ${result}`);
        }
    })
    .catch((error) => {
        // Handle/report errors
    });

实例:

function getSomeThings() {
   return new Promise((resolve, reject) => {
     resolve(['one', 'two', 'three'])
   })
}

function doSomethingWithIt(theThing) {
  return new Promise((resolve, reject) => {
     console.log(theThing)
     resolve("Did a thing")
  })
}

getSomeThings()
    .then((things) => Promise.all(things.map(doSomethingWithIt)))
    .then((results) => {
        for (const result of results) {
            console.log(`Result was: ${result}`);
        }
    })
    .catch((error) => {
        // Handle/report errors
    });

是的，这确实意味着在所有这些 doSomethingWith promise 都已解决之前，您不会获得其中任何的 console.log .通常这是一件好事。但如果不是在这种情况下，那么打破 ESLint 规则可能是合理的(正如 bergi 在 a comment 中所说，它不是通用的)