Vue3中用Suspense同时发多异步请求，我的方案是否为最佳实践？

在Vue3子组件中使用<Suspense>时，原本通过多个await串行执行异步请求：

await store.dispatch("product/getProduct", route.params.id).then(res => productData.value = res);
await store.dispatch("product/getCharacteristics", route.params.id).then(res => characteristicList.value = res);
await store.dispatch("price/getPrices", route.params.id).then(res => delivery.value = res);

这些请求会逐个串行执行，但我需要它们同时并行执行。我的解决方案是将每个请求赋值给变量，再通过单个await配合Promise.all实现：

await Promise.all([request1, request2, request3, request4, request5, request6, request7]);

请问该方案是否为良好实践？或者有没有更优更优雅的实现方式？

你的方案是完全可行的良好实践，Promise.all本身就是处理多个并行异步任务的标准方式，尤其适合这种多个独立请求不需要依赖彼此结果的场景，能有效减少整体请求耗时。

可以优化写法，无需提前将请求赋值给变量，直接在Promise.all中定义每个dispatch调用，同时利用解构直接接收对应结果，省去额外的.then回调，代码更简洁：

const [productRes, charRes, priceRes] = await Promise.all([
  store.dispatch("product/getProduct", route.params.id),
  store.dispatch("product/getCharacteristics", route.params.id),
  store.dispatch("price/getPrices", route.params.id)
]);

productData.value = productRes;
characteristicList.value = charRes;
delivery.value = priceRes;

另外需要注意两个关键点：

• Promise.all会在任意一个请求失败时立即抛出错误，若希望单个请求失败不影响其他请求执行，可改用Promise.allSettled，之后逐个处理成功或失败的结果。
• 确保这些请求完全独立，不存在依赖关系（比如某请求需要另一请求的返回值作为参数），若有依赖则需按需调整执行顺序。

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