The priority of catch() and then (..., ERR) of promise

about Promise If you've seen it ES6 A tutorial for , You should already know something . stay Promise In the callback then(...,err) and catch() Are used to handle returned errors , So what is the execution order of these two in practical applications , I personally did a little test . If you are interested, you can continue to read this chapter , You can also put forward your ideas . I will add more .

establish Promise The test function of

take Promise Package into a test Function , Control by value transfer Promise The state of return .

function test(arg) {
    
  const p = new Promise((resolve, reject) => {
    
    if (arg) {
    
      resolve(`result is ${
      arg}`);
    } else if (arg === 0) {
    
      throw new Error("result is 0");
    } else {
    
      reject("result is null");
    }
  });
  return p;
}

then There is no err when

then There is no callback for failed creation in .

// reject Return failed 
test()
  .then((result) => {
    
    console.log(`success: ${
      result}`);
  })
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });
//  Return failure by throwing an exception 
test(0)
  .then((result) => {
    
    console.log(`success: ${
      result}`);
  })
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });

The output result is ：

catch: result is null
catch: Error: result is 0

thus it can be seen , stay then Without handling the failure , from catch Handle all failed callbacks .

then There is err when

then Created a failed callback in .

then stay catch Before

// reject Return failed 
test()
  .then(
    (result) => {
    
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(`err: ${
      err}`);
    }
  )
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });
//  Return failure by exception or actively throwing an exception 
test(0)
  .then(
    (result) => {
    
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(`err: ${
      err}`);
    }
  )
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });

The output result is ：

err: result is null
err: Error: result is 0

thus it can be seen , stay then There are cases where failure is handled , And then stay catch Before , from then Capture all failed callbacks .

then stay catch after

// reject Return failed 
test()
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  })
  .then(
    (result) => {
    
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(`err: ${
      err}`);
    }
  );
//  Return failure by exception or actively throwing an exception 
test(0)
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  })
  .then(
    (result) => {
    
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(`err: ${
      err}`);
    }
  );

The output result is ：

catch: result is null
catch: Error: result is 0
success: undefined
success: undefined

thus it can be seen , stay then There are cases where failure is handled , And then stay catch Later on , from catch Handle all failed callbacks .

catch After processing, it will still trigger Promise Of then The successful callback method of .

When only catch It works ？

answer ： Only when Promise Of then When there is an error in the callback method in .

catch stay then after

// reject Return failed 
test()
  .then(
    (result) => {
    
      console.log(successArg);
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(failArg);
      console.log(`err: ${
      err}`);
    }
  )
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });
// resolve Return to success 
test(1)
  .then(
    (result) => {
    
      console.log(successArg);
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(failArg);
      console.log(`err: ${
      err}`);
    }
  )
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  });

The output result is ：

catch: ReferenceError: failArg is not defined
catch: ReferenceError: successArg is not defined

It can be seen from the above that , Who runs will report an error , And the error of the callback method , from catch To deal with .

catch stay then Before

If catch stay then What about the front ？

// reject Return failed 
test()
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  })
  .then(
    (result) => {
    
      console.log(successArg);
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(failArg);
      console.log(`err: ${
      err}`);
    }
  );
// resolve Return to success 
test(1)
  .catch((err) => {
    
    console.error(`catch: ${
      err}`);
  })
  .then(
    (result) => {
    
      console.log(successArg);
      console.log(`success: ${
      result}`);
    },
    (err) => {
    
      console.log(failArg);
      console.log(`err: ${
      err}`);
    }
  );

The output is ：

catch: result is null
(node:8149) UnhandledPromiseRejectionWarning: ReferenceError: successArg is not defined

It can be seen from the above that , If catch stay then Before ,then The callback error of is still caused by catch To deal with , But because of then The successful callback method in will still be executed , So the program will be interrupted due to errors .

summary

Thank you for reading , If there is any discussion, please leave a message .