在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);
})

图像加载期间发生错误和在 success 回调中：

  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块。您可以通过简单地在 catch 块中传递 error 对象来检查错误：

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

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

Answer 2

Is .catch(rejection) equal to .then(null,rejection)?

是的。不仅等于，它甚至以 then 的形式实现。

但是：

loadImageAsync(url).then(function(){
  // error here will be printed
}).catch(function() {
  console.log("error")
})
loadImageAsync(url).then(function(){
 // error here will be not printed
}, function () {
  console.log("error")
})

没错。 .then(…).catch(…) and .then(…, …) are not equal.

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

In Promise of es6, '.catch(rejection)' is equal to '.then(null,rejection)'?

javascript

frontend

promise

ecmascript-6