当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

未捕获的异常是这里抛出的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

Answer 2

img1抛出错误之后就不走then了直接catch 没有走 return img2所以你的img2没有定义catchimg1.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)})