小知识-为什么处理异步数据渲染需要async await 搭配Promise.all实现？

1、背景：在开发过程中，经常遇到多条数据是异步获取的，但是有时会因为异步问题导致页面渲染不完整，即数据展示不全，如果通过console.log打印下就回发现是因为页面在异步数据返回去就渲染了，也可通过设置定时器验证。

2、怎么解决呢？这里普遍使用的是async await 搭配Promise.all实现。

if (id.value) {const { data } = await queryId(id.value)if (!data) return// 使用Promise.all等待所有异步请求完成const promises = data.kaVehicleOrderDetailRespList.map(async (item) => {const params = {productCode: item.productCode,}const { data: transitData } = await vehicleStockPage(params)transitInventory.value = transitData.totalif (transitData.records.length > 0) {let array = transitData.records.map((newItem) => ({label: newItem.warehouseName,value: newItem.warehouseCode}))item.vehicleWarehouseCodeOptions = Array.from(new Map(array.map((item) => [item.value, item])).values())}return item})// 等待所有请求完成const results = await Promise.all(promises)rowData2.value.list = results}

3、为什么？

当多个异步操作结果需要同时渲染时，Promise.all确保所有数据就绪后才进行渲染，避免部分更新造成的界面闪烁或不一致。

// 串行方式 - 效率低
async function fetchDataSerial() {const user = await fetchUser();     // 等待完成const posts = await fetchPosts();   // 然后等待const comments = await fetchComments(); // 再等待return { user, posts, comments };
}
// 总时间 ≈ 每个请求时间之和// 并行方式 - 效率高
async function fetchDataParallel() {const [user, posts, comments] = await Promise.all([fetchUser(),fetchPosts(),fetchComments()]);return { user, posts, comments };
}
// 总时间 ≈ 最慢的请求时间