React Fetch Async 错误处理和 JSON 数据解析指南

在 React 中使用 fetch 的 async 模式抛出错误并处理 JSON 数据的一种常见方式是使用 try...catch 语句，然后通过 response.json() 方法将响应转换为 JSON 数据。下面是一个示例：\n\njsx\nasync function fetchData() {\n try {\n const response = await fetch('https://api.example.com/data');\n \n if (!response.ok) {\n throw new Error('Network response was not OK');\n }\n \n const data = await response.json();\n // 在这里处理 JSON 数据\n console.log(data);\n } catch (error) {\n // 处理错误\n console.error(error);\n }\n}\n\nfunction App() {\n useEffect(() => {\n fetchData();\n }, []);\n\n return (\n <div>\n {/* 其他组件代码 */}\n </div>\n );\n}\n\n\n在上面的示例中，我们首先使用 await 关键字等待 fetch 请求的响应。如果响应状态码不是 200，我们抛出一个错误。然后，我们使用 response.json() 方法将响应转换为 JSON 数据。最后，我们可以在 try 块中处理这些数据，或者在 catch 块中处理错误。\n\n请注意，在函数组件中，我们使用了 useEffect 钩子来调用 fetchData 函数。这可以确保在组件挂载后立即获取数据。