如何解析Promise数组并将值传入非异步函数？

这个问题很常见，解决方法其实很简单——用Promise.all()来批量解析你的Promise数组就行！

你当前的this.retrieveData()返回的是Promise<string>[]，也就是一组还未被解析的Promise对象，而renderTemplate()需要的是已经解析完成的string[]类型。Promise.all()正好能帮你完成这个转换：它会接收一个Promise数组，等待所有Promise都成功resolve后，返回一个包含所有resolve结果的数组，类型就是你需要的string[]。

修改后的代码如下：

async getTemplateHtml() { 
  // 用Promise.all解析所有Promise，得到实际的string[]
  const data = await Promise.all(this.retrieveData()) 
  const html = renderTemplate(`some html template`, {stuff: data}) 
  return html 
}

额外说明 #

如果你的业务场景允许部分Promise失败（不需要所有数据都成功获取），可以考虑使用Promise.allSettled()，然后手动过滤出成功的结果：

async getTemplateHtml() { 
  const promiseResults = await Promise.allSettled(this.retrieveData())
  // 只保留成功resolve的结果
  const data = promiseResults
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value)
  const html = renderTemplate(`some html template`, {stuff: data}) 
  return html 
}

这样就能确保传入renderTemplate()的stuff参数完全符合它的类型要求啦。

内容的提问来源于stack exchange，提问作者Carven