JS异常处理的一个想法(sofish)

2023年5月28日下午3:05 • JavaScript

下面是详细的文本攻略。

简介

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技术站