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

Question

Firstly,please look at this 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="">

In this demo, I think that "error" can't be printed. The fact hurts me.

Recently,I'm studying Promise by url.

But this demo seems conflictive to that.

I'm confused.

I don't understand why you think that error can't be printed. — a better oliver, Mar 14 '17 at 09:54
to answer the question in the title (which seems to be separate from the text in the body of the question) ... yes, `.catch(onReject)` is exactly equal to `.then(null, onReject)` - but NOT the same as `.then(onFulfill, onReject)` - in fact, the polyfill I use has this bit of code in it `Promise.prototype.catch = function (onRejected) { return this.then(null, onRejected); };` — Jaromanda X, Mar 14 '17 at 10:13

Max Koretskyi · Accepted Answer · 2017-03-15T06:42:35.237

2

If you use catch:

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

both an error occurring during image load and inside success callback:

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

will be catched.

If you use error callback instead of a catch clause, only error during image load will be catched. The general recomendation is to use catch instead of error callbacks.

Update:

In your particular case, you have an error here:

someImg.style.display = "block";

since someImg is not defined, the catch block is executed. You can inspect an error by simply passing error object in catch block:

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

This particular case demonstrates why catch is preferred to error callback.

edited Mar 15 '17 at 06:42

answered Mar 14 '17 at 09:19

Max Koretskyi

101,079
60
333
488

Only when errors occur , catch will be executed . I mean that there are not errors during image load and inside success callback. So I don't understand that catch has been executed. – may Mar 15 '17 at 01:38
@may, ah, I get it now. It's triggered because you **do** have an error here ` someImg.style.display = "block";` - see my updated question. Also, don't forget you can upvote or accept my answer if it helped. – Max Koretskyi Mar 15 '17 at 06:43
oh...................................I'm so sorry. I made a small but big mistake.I totally understand what you said ! Actually, I know catch is better than the callback of then. Thanks very much! – may Mar 15 '17 at 08:39

score 1 · Answer 2 · edited May 23 '17 at 12:00

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

Yes. And not only equal to, it's even implemented in terms of then.

However:

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")
})

That's accurate. .then(…).catch(…) and .then(…, …) are not equal.

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

2 Answers2