前端时间做了一个h5的需求,复盘的时候发现初始化方法中添加的loading 会因为接口返回比较慢的原因,加载页面的时候显示多次,很影响用户体验,想到利用promise来进行优化。
console.log('开始加载loading状态')
const p1 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('第一个请求结束');
resolve()
},1000)
})
const p2 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('第二个请求结束');
resolve()
},2000)
})
const p3 = new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log('第三个请求结束');
resolve()
},3000)
})
Promise.all([p1,p2,p3]).then(()=>{
console.log('loading状态消失')
})
输出 如下