今天写项目时遇到这样一个需求: 首页在加载数据前先展示骨架图
但是首页同时又需要请求多个API数据,这时候就需要考虑关闭骨架屏的时机了,于是我立即想起了await写法:
// 默认显示骨架屏
const skeletonLoading = ref<boolean>(true)
onLoad(async () => {
await getHomeBannerListAPI() // 异步请求
await getCategoryListAPI() // 异步请求
await getHotListAPI() // 异步请求
// 关闭骨架屏
skeletonLoading.value = false
})
但是这样写弊端很明显,原本只需要500ms就可以完成三个异步数据请求,这样写足足用了1500ms,
分析一下代码:第二个请求需要等第一个请求结束,而第三个请求又需要第二个请求结束,这种写法造成了严重的网络堵塞。
然后我想起了Promise.all() 方法,她可以将多个 Promise 实例包装成一个新的 Promise 实例。这个新 Promise 实例将在所有传入的 Promise 实例都完成后完成。
由于她返回的还是一个异步,所以我们在这个基础上加上await,await Promise.all() 就相当于等待所有传入的 Promise 实例都完成后,再继续执行后面的代码。
const skeletonLoading = ref<boolean>(true)
onLoad(async () => {
await Promise.all([
getHomeBannerList(),
getCategoryList(),
getHotList(),
])
skeletonLoading.value = false
})
效果很明显,足足优化了快1秒。