javascript - 在 es6 的 Promise 中， '.catch(rejection)' 等于 '.then(null,rejection)' ?

Question

首先，请看这个demo。

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
    var image = new Image();
    image.src = url;
    // onload 在对象已加载时触发
    image.onload = resolve;
    // onerror 在文档或图像加载过程中发生错误时被触发
    image.onerror = reject;

  })
}

var someImgEle = document.getElementById("imgEle");
var url = someImgEle.dataset.src
loadImageAsync(url).then(function() {
  someImgEle.src = url;
  someImg.style.display = "block";
  // error will be printed
}).catch(function() {
  console.log("error")
  throw new Error('couldnt load image' + url);
})
/*
loadImageAsync(url).then(function(){
 someImgEle.src = url;
 someImg.style.display = "block";
 // error will be not printed
 },function () {
  console.log("error")
 	throw new Error('couldnt load image' + url);
 })
 */

<img id="imgEle" src="" data-src="http://omizt4opc.bkt.clouddn.com/avatar.jpg" alt="">

在这个演示中，我认为不能打印“error”。这个事实让我很受伤。

最近，我正在学习 url 的 Promise .

但是这个演示似乎与此冲突。

我很困惑。

Answer 1

如果你使用catch:

.catch(function() {
  console.log("error")
  throw new Error('couldnt load image' + url);
})

图像加载期间发生的错误和成功回调中的:

  someImgEle.src = url;
  someImg.style.display = "block";
  someImg.accessUndefinedProperty.oneLevelMore; // TypeError: Cannot read property 'oneLevelMore' of undefined

会被捕获。

如果您使用error callback 而不是catch 子句，则只会捕获图像加载期间的错误。一般建议使用 catch 而不是错误回调。

更新:

在你的特殊情况下，你在这里有一个错误:

someImg.style.display = "block";

因为 someImg 没有定义，catch block 被执行。您可以通过简单地在 catch block 中传递 error 对象来检查错误:

.catch(function(error) {
                ^^^^^

这个特殊情况说明了为什么 catch 优于 error callback。