请老师帮忙看看：为什么不能捕获到404错误呢？
1 | <!DOCTYPE html><br><html><br><br><head lang="en"><br> <meta charset="UTF-8"><br> <title>5-3</title><br> <!-- https://class.imooc.com/lesson/1639#mid=38986 --><br> <style><br> #box {<br> width: 80vw;<br> height: 50vh;<br> margin: 0 auto;<br> }<br><br> #box img {<br> width: calc(1/3*100%);<br> }<br> </style><br></head><br><br><body><br> <div id="box"><br><br> </div><br> <script><br> //补充代码<br> const box = document.getElementById('box')<br><br> const imgs = [<br> 'http://img1.sycdn.imooc.com/climg//5b16558d00011ed5060003382.jpg', //故意将第一个图片的地址写错，前面的路径要写对，只是后面的图片名字加了个2<br> 'http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg',<br> 'http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg',<br> ]<br><br> const loadImgAsync = url => {<br> return new Promise((resolve, reject) => {<br> const img = new Image()<br> img.onload = () => {<br> const imgDOM = document.createElement('img')<br> imgDOM.src = img.src<br> box.appendChild(imgDOM)<br> setTimeout(() => resolve(), 1000)<br> }<br> // onerror事件不能捕获到404错误？？<br> img.onerror = () => {<br> reject(new Error(`Couldn't load the image at ${url}`))<br> }<br> try {<br> //这里如果出现404错误，并不会被捕获到？？<br> img.src = url<br> } catch (err) {<br> reject(`The picture url ${url} is not right!`)<br> }<br> })<br> }<br><br> loadImgAsync(imgs[0]).then(() => {<br> return loadImgAsync(imgs[1])<br> }).then(() => {<br> return loadImgAsync(imgs[2])<br> }).catch(err => console.error(`错误 ${err}`))<br> </script><br></body><br><br></html><br> |
18
收起
正在回答
2回答
同学你好，解答如下：
1、try catch 不能捕获图片的404错误，只有当try中的代码出现问题时，才会被catch捕获，例如：
2、我们想要的图片虽然是404，但是该图片的地址还有有返回内容的，即返回了另一张图片：
所以不会触发img.onerror事件。如果图片地址没有返回内容，例如：
则会触发onerror事件：
此处有些特殊，同学稍微注意一下就可以了。
祝学习愉快！
-
hustnzj #1
谢谢老师，看了老师的回答，我又测试了下，现在是这么理解的：
1.
onerror事件不能捕获到404错误？？（并不是，climg.mukewang.com 这个域名上的图片，如果找不到404了，那么还会返回一张默认的替代图片，因此不能触发img.onerror事件。换一个其他网站，就可以正常触发错误事件了，后面promise的catch也就可以正确捕获了。
2.
try catch 只有当js代码本身有错误时，才能捕获到错误。而404，403之类的服务器返回的错误，并不会被捕获到
2021-03-15 10:52:30
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧