释放React事件中的错误：从老派try/catch到优雅捕获进阶篇

2023-12-13 15:09:45

在React程序中，事件处理程序总是需要写try/catch，这会让你的代码看起来很冗长，并且需要在每个函数中重复相同的代码。为了解决这个问题，我们可以使用装饰器来封装try/catch，这样就可以把更多的精力投入到业务逻辑中去。

装饰器是一种在不改变函数本身的情况下为其添加新功能的语法糖。我们可以通过创建一个名为tryCatch的装饰器，它将接收一个函数并返回一个新函数，这个新函数会自动捕获任何错误。

const tryCatch = (fn) => {
  return (...args) => {
    try {
      return fn(...args);
    } catch (error) {
      //在这里处理错误
      console.error(error);
    }
  };
};

现在，我们可以使用这个装饰器来封装我们的事件处理程序：

class MyComponent extends React.Component {
  @tryCatch
  handleClick(e) {
    //业务逻辑
  }
}

这样，我们就不用在 handleClick 函数中写 try/catch 了。

这个装饰器不仅可以用于事件处理程序，还可以用于任何其他函数。例如，我们可以使用它来封装我们的异步函数：

const tryCatchAsync = (fn) => {
  return async (...args) => {
    try {
      return await fn(...args);
    } catch (error) {
      //在这里处理错误
      console.error(error);
    }
  };
};

//使用装饰器封装异步函数
const fetchUserData = tryCatchAsync(async () => {
  const response = await fetch('https://example.com/api/users');
  const data = await response.json();
  return data;
});

除了上述方法外，我们还可以使用Hooks来捕获错误。Hooks是React 16.8中引入的新特性，它允许我们在函数组件中使用状态和生命周期方法。

import { useEffect, useState } from 'react';

function MyComponent() {
  const [error, setError] = useState(null);

  useEffect(() => {
    try {
      //业务逻辑
    } catch (error) {
      setError(error);
    }
  }, []);

  return (
    <div>
      {error && <div>{error.message}</div>}
      {/*其他组件内容*/}
    </div>
  );
}