当前位置: 首页 > Web前端 > HTML5

Promise加载图片详解

时间:2023-04-05 21:10:40 HTML5

现在不知道Promise怎么用,不好意思说自己是前端,为什么Promise火了,一句话解决了回调嵌套和执行顺序的问题最重要的是解决订单问题。不过在开始写之前,我们先来看看promises是如何解决问题的,以及如何使用promises。列出一个按顺序加载图片的demo://需要加载三张图片img1,img2,img3,加载顺序为1,2,3leturl1="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg"leturl2="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"letsurls31=".bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4226468334,723383513&fm=26&gp=0.jpg"letoImg1=newImage()oImg1.onload=function(){console.log('img1loaded')letoImg2=newImage()oImg2.onload=function(){console.log('img2loaded')letoImg3=newImage()oImg3.onload=function(){console.log('img3loaded')console.log('全部加载Done')}oImg3.src=url3}oImg2.src=url2}oImg1.src=url1//结果ok接下来我们试试promise,func怎么做tionloadImg(url){letimg=newImage()img.src=urlreturnnewPromise((resolve,reject)=>{img.onload=()=>{console.log(url)resolve()}img.onerror=(e)=>{reject(e)}})}loadImg(url1).then(()=>{returnloadImg(url2)}).then(()=>{returnloadImg(url3)})接下来看Promise.all,//需要加载三张图片img1,img2都加载了做点什么leturls=["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg","https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg"]functionloadImg(url){letimg=newImage()img.src=urlreturnnewPromise((resolve,reject)=>{img.onload=()=>{resolve(img)}img.onerror=(e)=>{reject(e)}})}functionloadAll(arr){letresult=[]arr.forEach(item=>{letp=loadImg(item).then((img)=>{console.log(img)})//存储当前的Promise对象console.log(p)result.push(p)});Promise.all(result).then(()=>{//全部完成console.log("done")}).catch((err)=>{//Somethingfailedconsole.log(err)});}loadAll(urls)完成。.