using try catch on error generated by asynchronous callback function

问题

I am trying to catch an error caused by an async javascript callback function,

try{
  setTimeout(()=>{ 
    throw err 
    console.log("after throw") 
  }, 1000)
}catch(e){
  console.log("caught");
}

But as many of you may know catch block is never executed, so what exactly is happening here?

I know I can achieve similar thing using promises and async/await,

async foo(){
  try{
    await setTimeoutPromise(1000);
  }catch(e){
    alert("caught");
  }
}

回答1:

When you use setTimeout, the callback gets pushed into the event loop (moved out of the JS Engine and into the realm of the runtime/browser) and your foo function exits immedeatly.

After the timeout AND once the stack is empty, the event loop will put the callback onto the stack and run it. That's why the try/catch and the callback are independent of each other. That's also why setTimeout(1000) does not mean in a second but not earlier than and somewhat close to one second.

See What the heck is the event loop anyway? | Philip Roberts | JSConf EU

回答2:

These are two different things.

The first code won't catch the error, since it happens asynchronously, and try...catch will only catch synchronously thrown exceptions.

The second code will catch the error, because await 'synchronize' the code (makes it look and work like it would've been synchronous), and the error thrown only by await: if you haven't been used it, you would get only a rejected promise (You can't really throw anything from an async function!)

To make the first code working, move the try...catch inside the callback:

setTimeout(()=>{ 
  try{
    throw err
  }catch(e){
    console.log('catched')
  }
  console.log("after throw") 
}, 1000)

来源：https://stackoverflow.com/questions/57703692/using-try-catch-on-error-generated-by-asynchronous-callback-function

标签

javascript

ecmascript-6

ecmascript-5