在 React 中，`try` 和 `catch` 通常用于捕获在组件生命周期或事件处理函数中可能发生的异常。
import React, { useState } from 'react';
function ErrorHandlingExample() {
const [result, setResult] = useState('');
const handleButtonClick = () => {
try {
// 可能会抛出异常的代码块
const randomNumber = generateRandomNumber();
setResult(`Random Number: ${randomNumber}`);
} catch (error) {
// 捕获并处理异常
setResult(`Error: ${error.message}`);
}
};
// 定义一个可能会抛出异常的函数
const generateRandomNumber = () => {
if (Math.random() < 0.5) {
throw new Error('Random number generation failed.');
}
return Math.floor(Math.random() * 100);
};
return (
<div>
<h2>React Error Handling Example</h2>
<button onClick={handleButtonClick}>Generate Random Number</button>
<p>{result}</p>
</div>
);
}
export default ErrorHandlingExample;点击按钮时，会调用 `handleButtonClick` 函数，在这个函数中，有一个 `try` 块包裹可能会抛出异常的代码，例如调用 `generateRandomNumber` 函数。如果 `generateRandomNumber` 函数抛出异常，它会被 `catch` 子句捕获，然后在页面上显示错误信息。
输出结果（2种）：
1. 成功生成随机数：如果 `Math.random()` 返回的值大于等于 0.5，`generateRandomNumber` 函数将成功生成一个随机数，`try` 块中的代码将正常执行，`catch` 子句将不会执行。输出结果会显示成功生成的随机数。 ``` Random Number: <随机数> ```
2. 生成随机数失败（抛出异常）：如果 `Math.random()` 返回的值小于 0.5，`generateRandomNumber` 函数将抛出一个异常，`catch` 子句将捕获并处理这个异常。输出结果会显示异常信息。 Error: Random number generation failed.
try的使用场景：
1. 异步操作：在处理异步操作时，可以使用 `try` 和 `catch` 来捕获 Promise 的 reject。
2. 数据获取：当从 API 或其他外部源获取数据时，可能会遇到网络错误或数据格式错误，可以使用 `try` 和 `catch` 处理这些情况。
3. 用户输入：在处理用户输入时，可能会有一些验证逻辑，使用 `try` 和 `catch` 可以捕获输入不合法的情况。
4. 第三方库集成：当集成第三方库时，可能会发生不可预测的异常，使用 `try` 和 `catch` 可以优雅地处理这些异常，避免影响整个应用的运行。
