面试题：React中如何使用async/await处理异步事件

使用async/await实现异步获取数据并渲染的React组件示例：

import React, { useState, useEffect } from'react';

const MyComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('YOUR_API_URL');
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      }
    };

    fetchData();
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      {/* 在此处根据数据结构渲染数据 */}
      {JSON.stringify(data)}
    </div>
  );
};

export default MyComponent;

可能遇到的错误及解决办法：
- 网络错误：
  - 错误描述：比如网络断开、服务器无响应等，fetch操作会被拒绝。
  - 解决办法：使用try...catch块捕获错误，如上述代码中，在catch块中设置错误状态，并在组件中渲染错误信息。
- HTTP状态错误：
  - 错误描述：服务器返回非2xx状态码，如404（未找到资源）、500（服务器内部错误）等。
  - 解决办法：在fetch返回response后，检查response.ok，如果为false，手动抛出错误并在catch块中处理。
- 数据解析错误：
  - 错误描述：当await response.json()执行时，如果返回的数据格式不符合JSON规范，会抛出解析错误。
  - 解决办法：同样使用try...catch块，将await response.json()放在try块中，在catch块中处理解析错误。

面试题：React中如何使用async/await处理异步事件

知识考点

面试题答案