当then方法返回的是一个新的Promise实例。catch方法无法捕捉新实例的错误

Question

    function loadImageAsync(url) {
      return new Promise(function(resolve, reject) {
        throw new Error('BUG FOREVER')

        const image = new Image();
        image.onload = function() {
          resolve(image);
        };

        image.onerror = function() {
          reject(new Error('Could not load image at ' + url));
        };

        image.src = url;
      });
    }

    let src1='https://image.suning.cn/uimg/sop/commodity/213287247648868791262800_x.jpg'
    let src2='https://image.suning.cn/uimg/sop/commodity/742303264420020864606900_x.jpg'

    let img1=loadImageAsync(src1)
    let img2=loadImageAsync(src2)


   img1.then(function(img){
        console.log('第一个图片 height='+img.height)
        return img2
    }).then(function(img){
        console.log('第二个图片 width='+img.width)
    }).catch(function(err){
        console.log('fail'+err)
    })

运行结果

Answer 1

img1抛出错误之后就不走then了直接catch 没有走 return img2
所以你的img2没有定义catch

img1.then(function(img){
    console.log('第一个图片 height='+img.height)
    return img2
}).then(function(img){
    console.log('第二个图片 width='+img.width)
}).catch(function(err){
    console.log('图片1 fail'+err)
    return img2//这只是你程序的写法 如果img1不报错img2报错这个写法有问题
}).catch(function(err){
    console.log('图片2 fail'+err)
})

Answer 2

未捕获的异常是这里抛出的

 let img2=loadImageAsync(src2)

promise的构造器是同步的，只要你执行loadImageAsync方法就会立即抛出异常。
然而promise中的error比较特殊，它不会中断下面程序的运行，并且之后你还是可以catch到，比如说你setTimeout 2s后还是可以catch到。
我感觉这个现象还是挺特别的，不知道有哪位大佬能解释一下
==================分割线======================================
哈，构造器里面的异常应该是被promise吃掉了，并没有往上抛，但会提示，被控制台误导了。
let img1=loadImageAsync(src1)
let img2=loadImageAsync(src2)
此时，异常已经产生了，img1和img2的状态是rejected，所以他们俩会直接走catch