CODEWITHSUNDEEP
javascriptpromiseasync-awaittry-catch
Matheus Leão
Matheus Leão

Reputation: 437

Catch block is entered before "await Promise" is resolved

Trying to save a camera snapshot in chrome. I have working code using Promise.resolve().then().catch() method, and I want to convert to async/await.

Original code:

function onSnapshotButtonClick() {
    imageCapture.takePhoto()
        .then(blob => createImageBitmap(blob))
        .then(imageBitmap => {
            drawCanvas(imageBitmap);
        })
        .catch(error => console.error("Snapshot failed."));
        console.log("Snapshot capture successful.");
})

New code:

var blob;
async function onSnapshotButtonClick() {
    // Take snapshot
    try {
        blob = await imageCapture.takePhoto();
        let imageBitmap = createImageBitmap(blob);
        drawCanvas(imageBitmap);
    } catch (error) {
        console.error("Snapshot failed.");
    }
    console.log("Snapshot successful.")

    // Do other stuff with blob...

})

But when running the above code, I get both "Snapshot failed." and "Snapshot successful." printed to the console and nothing gets drawn to the canvas (which a function defined later on). Why is the program entering the catch block, and shouldn't it exit the function when it does?

Edit: Thanks, I now understand that the catch block should include a return statement, and that I can learn more about the error by printing error.message. It seems like imageBitmap is not a valid format and that is causing the issue in the async/await version. The question remains then, since the original version doesn't have this issue, what is different in the async/await version that is causing this change in behavior?

Upvotes: 0

Views: 245

Answers (3)

Seblor
Seblor

Reputation: 7136

It looks like you did not really understand how the try/catch(/finally) block works.

Basically, what you code does is (in pseudo code) :

Try this block :
    blob = await imageCapture.takePhoto();
    let imageBitmap = createImageBitmap(blob);
    drawCanvas(imageBitmap);
If any lines of the block above fails, then do this :
    console.error("Snapshot failed.");
After one of the 2 code blocks above are done, keep going

console.log("Snapshot successful.")

So your try block has an exceptions, goes to the catch block, then keep going.

If you want to do some processing of your image, do it in the try block, or return in the catch block.

Here is some documentation on try/catch(/finally)

Upvotes: 1

albert
albert

Reputation: 1348

My best guess is that your catch block doesn't have a return statement. So even if there is an error and it's caught, all it does is log your "Snapshot failed", and continue running the function. Try

try{
  ...
} catch(err){
    console.log("Snapshot failed: " + err)
    return;
}
//then do whatever it is you need if snapshot successful

As to why there is an error, try logging the actual err for better insight

Upvotes: 1

Jonas Wilms
Jonas Wilms

Reputation: 138257

catch is not meant to detect errors, but to handle errors. Execution will continue as normal afterwards. You should log "Snapshot captured successful" inside the try { ... } or inside the last .then(...) respectively.

Why is the program entering the catch block [at all] ?

Cause an error occured. You'll find out what the error is if you log it to the console.

Upvotes: 0

Related Questions