老师,请问为什么无法捕捉到错误
来源:5-3 编程练习
慕数据5191420
2022-04-18 18:03:43
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="referrer" content="no-referrer" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img{
width: 300px;
float: left;
}
</style>
</head>
<body>
<div id="box">
<img src="" alt="">
<img src="" alt="">
<img src="" alt="">
</div>
<script>
const box = document.getElementById('box');
let imgDom_0 = document.getElementsByTagName('img')[0];
let imgDom_1 = document.getElementsByTagName('img')[1];
let imgDom_2 = document.getElementsByTagName('img')[2];
const loadImgAsync = url =>{
return new Promise((resolve,reject)=>{
const img = new Image();
img.src = url;
img.onload = setTimeout(() => {
resolve(img)
}, 1000);
img.onerror = setTimeout(() => {
reject(`Could not load image at ${url}`);
}, 1000);
})
}
loadImgAsync(`http://climg.mukewang.com/5b16558d00011ed506000338.jpg`)
.then(
img =>{
console.log(img.src);
imgDom_0.src = img.src;
return loadImgAsync(`http://climg.mukewang.com/5b165603000146ca06000338.jpg`);
}
)
// .catch(err=>console.log(err))
.then(
img =>{
console.log(img.src);
imgDom_1.src = img.src;
return loadImgAsync(`http://climg.mukewang.com/5b1656140001c89906000338.jpg `);
}
).then(
img =>{
console.log(img.src);
imgDom_2.src = img.src;
}
)
</script>
</body>
</html>1回答
樱桃小胖子
2022-04-18
同学你好,如果想要捕获错误的话,可以将onload事件中的 setTimeout的时间设置的长一些,去模拟加载失败,然后捕获错误。时间比较短的话,还没等捕获错误呢,就都正确加载出来了。

祝学习愉快!
相似问题