var arr = [
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
]
//同时加载这三张图片,那张图片加载快,只显示那张图片 race比赛
function loadimg(url){
//返回一个promise实例
return new Promise((resolve,reject)=>{
var img=document.createElement('img');
//创建一个图片节点
img.src=url;//设置src
img.width=200;//设置宽度
img.onload=function(){
//图片加载完毕
resolve(img);//返回图片
}
img.onerror=function(e){
reject(e)//失败e失败事件对象
}
})
}
//promise.race 比赛 那个promise最先 resolve返回那个
Promise.race([
loadimg(arr[0]),
loadimg(arr[1]),
loadimg(arr[2])
])
.then(res=>{
document.body.append(res)
//插入到body标签里面
})
.catch(err=>console.error(err))
//如果失败打印失败的元素
ES6之promise比赛案例
最新推荐文章于 2023-06-19 21:57:10 发布