Why do both Promise's then & catch callbacks get called?

后端 未结 4 435
旧巷少年郎
旧巷少年郎 2021-01-07 21:24

I have the following code and when it\'s executed, it returns both \"rejected\" and \"success\":

// javascript promise
var          


        
相关标签:
4条回答
  • 2021-01-07 21:56

    Could anyone explain why success is logged?

    In short: a .then following a .catch in a Promise chain will always be executed (unless it itself contains errors).

    The theoretical explanation

    Your code is actually just a Promise chain which is first executed synchronously setting it up to complete asynchronously afterwards. The Javascript engine will pass on any reject() or Error to the first .then down the chain with a reject callback in it. The reject callback is the second function passed to a .then:

    .then(
    function (){
        //handle success
    },
    function () {
        //handle reject() and Error
    })
    

    The use of .catch is just syntactic suger for:

    .then(null, function () {
        //handle reject() or Error
    })
    

    Each of the .then's automatically returns a new Promise which can be acted upon by subsequent .then's (or .catch's which are also .then's).

    Visualizing the flow of your promise chain

    You can visualize the flow of your code with the following example:

    var step1 = new Promise (function (resolve, reject) {
    
      setTimeout(reject('error in step1'), 1000);
    })
    
    var step2 = step1.then(null, function () {
    
      // do some error handling
      return 'done handling errors'
    })
    
    var step3 = step2.then(function () {
    
      // do some other stuff after error handling
      return 'done doing other stuff'
    }, null)
    
    setTimeout (function () {
    
    console.log ('step1: ', step1);
    console.log ('step2: ', step2);
    console.log ('step3: ', step3);
    
    console.log();
    console.log ('Asynchronous code completed')
    console.log();
    }, 2000);
    
    console.log ('step1: ', step1);
    console.log ('step2: ', step2);
    console.log ('step3: ', step3);
    
    console.log();
    console.log ('Synchronous code completed')
    console.log();
    

    which at runtime will result in the following output in the console:

    step1:  Promise { <rejected> 'error in step1' }
    step2:  Promise { <pending> }
    step3:  Promise { <pending> }
    
    Synchronous code completed
    
    step1:  Promise { <rejected> 'error in step1' }
    step2:  Promise { 'done handling errors' }
    step3:  Promise { 'done doing other stuff' }
    
    Asynchronous code completed
    
    0 讨论(0)
  • 2021-01-07 21:59

    For those who had a successfully resolved promise and a chain ordered like .then > .catch, but still had both your then and catch called, it may be because your then had an error-throwing bug that you can't see unless you explicitly console the error in your catch. That's one of my pet-peeves with Promises absorbing errors even in strict mode.

    const promise = new Promise(resolve => resolve())
    .then(() => {
        console.log('then');
        not.defined = 'This causes the catch to fire even though the original promise resolved successfully.';
    })
    .catch((e) => {
        console.log('catch');
        // console.error(e);
    });
    
    0 讨论(0)
  • 2021-01-07 22:13

    For me catch() was being called after a succesful promise, and no errors in .then().

    The reason was, that I listened to a value that changes with the successful promise, and ran a method.

    This method was throwing a silent error, because it was being counted as part of the promise.

    0 讨论(0)
  • 2021-01-07 22:21

    The then callback gets called because the catch callback is before it, not after. The rejection has already been handled by catch. If you change the the order (i.e. (promise.then(...).catch(...))), the then callback won't be executed.

    MDN says that the .catch() method "returns a new promise resolving to the return value of the callback". Your catch callback doesn't return anything, so the promise is resolved with undefined value.

    0 讨论(0)
提交回复
热议问题