前言
或许这只是个基础知识,但或许你之前没有了解到这个,只是一贯的使用了try…catch。那就再学一下,在 JavaScript 中,try…catch 块确实是同步的,它用于捕获同步代码块中的异常。如果发生了异步操作中的错误,try…catch 无法捕获,因为它已经执行完毕,无法捕获异步代码中的异常。
看题说话
1.例题一
下面的代码有问题吗,能正常捕获到错误吗。当然是不能,上面已经解释过了。try…catch 无法捕获 setTimeout 中抛出的异常,因为 try 块在 setTimeout 回调执行之前已经完成。
try {
setTimeout(() => {
// 异步操作中的代码
throw new Error('异步错误');
}, 1000);
} catch (error) {
console.error('捕获到错误:', error.message);
}
要处理异步代码中的错误,可以使用 Promise 的 catch 方法或异步函数的 try…catch:
const asyncFunction = () => {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error('异步错误'));
}, 1000);
});
};
asyncFunction()
.catch(error => {
console.error('捕获到错误:', error.message);
});
2.例题二
再看看另外一个例子,如下
try {
Promise.resolve().then(() => {
throw new Error('err')
})
} catch (err) {
console.log(err);
}
在这个例子中,Promise.resolve().then(() => { throw new Error('err') })
中的 Promise 是异步的,所以 try...catch
无法捕获 Promise 中的错误。以下是几种改正的方式:
1. 使用 .catch() 处理 Promise 中的错误:
Promise.resolve()
.then(() => {
throw new Error('err');
})
.catch((err) => {
console.log(err.message);
});
2. 使用 async/await:
try {
await Promise.resolve().then(() => {
throw new Error('err');
});
} catch (err) {
console.log(err.message);
}
拓展
写到这觉得应该拓展一下,这也是我在逛别的文章下看到的,那就总结一下。try…catch用于捕获异常,如果Promise 未进行 catch 捕获错误,在做监控时必要要捕获这些未处理的错误,怎么处理?除 Promise 外其他未被捕获的异常如何监听,那么资源加载错误如何监听并重新加载,常见场景 c 端 cdn 资源加载失败如何替补。
别说,平时也没做过这么多异常处理,一般就对接口请求做了一些统一的报错封装,单独调用接口时捕获错误并报错。对于资源问题我还真没处理过。研究一番,总结如下:
1. 全局错误监听器:
可以使用 window.onerror
来捕获全局未被捕获的异常:
window.onerror = function (message, source, lineno, colno, error) {
console.error('全局错误:', message, source, lineno, colno, error);
// 可以在这里上报错误或采取其他处理措施
return true; // 阻止浏览器默认行为
};
2. Promise 错误监听:
使用 unhandledrejection
事件可以监听未捕获的 Promise 错误:
window.addEventListener('unhandledrejection', function (event) {
console.error('未捕获的 Promise 错误:', event.reason);
// 可以在这里上报错误或采取其他处理措施
event.preventDefault(); // 阻止默认行为
});
3. 资源加载错误监听:
使用 window.addEventListener
监听 error
事件,可以捕获资源加载错误。例如,监听 <img>
元素的加载错误:
const imgElement = document.createElement('img');
imgElement.addEventListener('error', function (event) {
console.error('资源加载错误:', event);
// 可以在这里重新加载资源或采取其他处理措施
});
imgElement.src = 'path/to/your/image.jpg';
document.body.appendChild(imgElement);
4. CDN 资源加载失败替补:
如果 CDN 资源加载失败,尝试加载本地备用资源。可以通过以下方法替补:
const scriptElement = document.createElement('script');
scriptElement.src = 'https://cdn.example.com/your-script.js';
scriptElement.onerror = function () {
console.error('CDN 资源加载失败,尝试替补本地资源。');
// 加载本地备用资源
const localScriptElement = document.createElement('script');
localScriptElement.src = 'path/to/your-local-script.js';
document.body.appendChild(localScriptElement);
};
document.body.appendChild(scriptElement);
平时看到些知识点喜欢总结一下,内容仅供参考,如有问题请不吝赐教。