简述在React中怎么使⽤async/await ？
在 React 中使用 async/await 是相当直接的，它们通常在生命周期方法或者 React Hooks 中使用，用于处理异步操作，比如 API 请求。
- 在生命周期方法中使用：
class MyComponent extends React.Component {
async componentDidMount() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
this.setState({ data });
} catch (error) {
console.error("Error fetching data", error);
}
}
render() {
// 使用从 API 获取的数据来渲染组件
}
}
在上面的例子中，我们在 componentDidMount 生命周期方法中使用 async/await 来获取数据。注意，我们用 try/catch 包裹我们的代码以处理可能出现的错误。
- 在 React Hooks 中使用：
import React, { useState, useEffect } from 'react';
const MyComponent = () => {
const [data, setData] = useState();
useEffect(() => {
const fetchData = async () => {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
setData(data);
} catch (error) {
console.error("Error fetching data", error);
}
};
fetchData();
}, []); // 空的依赖数组表示这个 effect 只在组件挂载和卸载时运行。
return (
// 使用从 API 获取的数据来渲染组件
);
};
在这个例子中，我们在 useEffect Hook 中定义了一个异步函数 fetchData，然后立即调用它。这样做是因为 useEffect 的回调函数不能是异步的，所以我们需要在内部定义一个新的异步函数。
在这两个例子中，我们都使用了 fetch API 和 async/await 来处理异步操作，但请注意你也可以使用其他的库，比如 axios，来完成相同的任务。