下面是详细的文本攻略。
简介
JS异常处理的一个想法，是由前端开发者sofish提出的一种异常处理方案。这种方案能够减少代码中try-catch的使用，减少代码冗余，提高代码的可读性。
原理
这种方案的核心思想是使用事件代理，对于代码中可能出现的异常情况，可以在全局统一进行处理。事件代理通过监听window对象下的错误事件，可以捕获到应用中的所有异常。
实现步骤
- 在window对象上注册错误事件处理函数，捕获应用程序中所有的异常。
- 在事件处理函数中，通过异常信息判断出可能引发异常的代码位置，然后调用相应的代码处理函数。
- 开发过程中只需要在相应处理函数中实现具体的异常处理逻辑。
// 1. 我们需要监听全局错误事件
window.addEventListener('error', function(event) {
// 2. 对捕获的异常进行信息提取
let errMsg = event.message; // 错误信息
let targetUrl = event.filename; // 出错文件URL
let row = event.lineno; // 出错行号
let col = event.colno; // 出错列号
let errorObj = event.error; // 错误堆栈对象
// 3. 根据提取的信息进行相应的处理
if(targetUrl.indexOf('a.js') > -1) {
handleErrorA();
} else if(targetUrl.indexOf('b.js') > -1) {
handleErrorB();
} else {
handleErrorDefault();
}
});
示例说明
在以下两个示例中，我们分别模拟了两个常见的错误情况——网络请求失败和页面资源加载失败，并使用上述异常处理方案进行了处理。
- 网络请求失败
// 封装一个网络请求函数
function request(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if(xhr.readyState === 4 && xhr.status === 200) {
resolve(xhr.responseText);
}
}
xhr.onerror = function(err) {
throw new Error('网络请求失败');
}
xhr.open('GET', url, true);
xhr.send();
});
}
// 异常处理函数
function handleRequestError() {
// 显示错误提示信息
alert('网络请求失败，请检查您的网络设置！');
}
// 监听全局错误事件，并进行处理
window.addEventListener('error', function(event) {
let errMsg = event.message;
let targetUrl = event.filename;
let errorObj = event.error;
if(errMsg === '网络请求失败') {
handleRequestError();
}
});
// 测试代码
request('http://baidu.com').then(res => console.log(res)).catch(err => console.error(err));
- 页面资源加载失败
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面资源加载失败测试</title>
<link rel="stylesheet" href="./index.css">
<script src="./index.js"></script>
<script>
// 异常处理函数
function handleLoadError() {
// 显示错误提示信息
alert('页面资源加载失败，请检查网站配置！');
}
// 监听全局错误事件，并进行处理
window.addEventListener('error', function(event) {
let errMsg = event.message;
let targetUrl = event.filename;
let errorObj = event.error;
if(targetUrl.indexOf('index.css') > -1 || targetUrl.indexOf('index.js') > -1) {
handleLoadError();
}
});
</script>
</head>
<body>
<h1>页面资源加载失败测试</h1>
</body>
</html>
希望这份攻略能够对你理解sofish大神的异常处理方案有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JS异常处理的一个想法(sofish) - Python技术站
微信扫一扫 
支付宝扫一扫 