老师，为什么我把返回语句放在setTimeout里就会报错
1 | const loadImgAsync = url => {<br> return new Promise((resolve, reject) => {<br> const img = new Image();<br> img.src = url;<br> img.onload = () => {<br> resolve(img);<br> };<br><br> img.onerror = () => {<br> reject(new Error(`Could not load image at ${url}`));<br> };<br><br><br> });<br> };<br><br> loadImgAsync("http://img1.sycdn.imooc.com/climg//5b16558d00011ed506000338.jpg")<br> .then(img2=>{<br> document.body.appendChild(img2)<br> return loadImgAsync("http://img1.sycdn.imooc.com/climg//5b165603000146ca06000338.jpg")<br> })<br> .then(img=>{<br> setTimeout(()=>{<br> document.body.appendChild(img)<br> //放在这里会报错 return loadImgAsync("http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg") <br> },1000)<br> return loadImgAsync("http://img1.sycdn.imooc.com/climg//5b1656140001c89906000338.jpg")<br> })<br> .then(img=>{<br> setTimeout(()=>{<br> document.body.appendChild(img) <br> },2000)<br> })<br> |
27
收起
正在回答
3回答
同学你好， 因为将返回语句放在setTimeout中，此时return返回的结果是针对setTimeout中的回调函数，并不是针对then的，具体可以参考如下解析：
“好帮手慕星星”老师提供的修改代码中，将定时器放在了loadImgAsync函数中，等图片成功加载，隔一秒后才将图片追加到页面中，然后执行resolve方法，将Promise对象改为成功状态的。所以只有定时器执行完之后，才会去更改Promise对象的状态。
因为在then的回调函数中没有手动添加return时，才会默认返回一个成功状态的Pomise，而老师提供的代码中，在then方法的回调中手动设置了return返回loadImgAsync，所以不会再默认返回一个成功状态的Promise了
祝学习愉快~
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧