In Versprechen von es6 ist ".catch (Ablehnung)" gleich ".then (null, Ablehnung)"?

Question

Erstens, bitte schauen Sie sich diese Demo an.

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") 
 
    \t throw new Error('couldnt load image' + url); 
 
}) 
 
*/

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

In dieser Demo, denke ich, dass "Fehler" kann nicht gedruckt werden. Die Tatsache tut mir weh.

Kürzlich studiere ich Promise von url.

Aber diese Demo scheint dazu konfliktreich zu sein.

Ich bin verwirrt.

Answer 1

Wenn Sie catch verwenden:

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

sowohl ein Fehler bei der Bild Last auftretenden und innerhalb success Rückruf:

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

wird gefangen werden.

Wenn Sie error callback anstelle einer catch-Klausel verwenden, wird nur der Fehler beim Laden des Abbilds abgefangen. Die allgemeine Empfehlung lautet catch anstelle von Fehlerrückrufen zu verwenden.

Update:

In Ihrem speziellen Fall haben Sie einen Fehler hier:

someImg.style.display = "block"; 

seit someImg nicht definiert ist, der catch Block ausgeführt wird. Sie können durch einfaches Durchleiten error Objekt in catch Block einen Fehler überprüfen:

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

Dieser Fall zeigt, warum catch-error callback bevorzugt.

Answer 2

Ist .catch(rejection) gleich .then(null,rejection)?

Ja. Und nicht nur gleich, es ist sogar in Bezug auf then umgesetzt.

jedoch:

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

Das genaue ist. .then(…).catch(…) and .then(…, …) are not equal.