javascript - 在解析 "await Promise"之前输入 Catch block

Question

尝试在 Chrome 中保存相机快照。我有使用 Promise.resolve().then().catch() 方法的工作代码，并且我想转换为 async/await。

原始代码:

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

新代码:

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...

})

但是当运行上面的代码时，我得到了“快照失败”。和“快照成功”。打印到控制台，并且没有任何内容被绘制到 Canvas 上(这是稍后定义的函数)。为什么程序要进入 catch block ，并且当它进入时不应该退出该函数吗？

编辑:谢谢，我现在明白 catch block 应该包含 return 语句，并且我可以通过打印 error.message 了解有关错误的更多信息。 imageBitmap 似乎不是有效的格式，这导致了 async/await 版本中的问题。那么问题仍然存在，由于原始版本没有这个问题，那么 async/await 版本中有什么不同导致了这种行为变化？

Answer 1

我最好的猜测是您的 catch block 没有 return 语句。因此，即使出现错误并被捕获，它所做的只是记录您的“快照失败”，并继续运行该函数。尝试一下

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

至于为什么会出现错误，请尝试记录实际错误以获得更好的洞察