async wait与react没有按预期工作

Question

我在react中调用useEffect钩子内的异步函数，如下所示。

const ab = async () => {
console.log("start API");
await callAPI();
console.log("end API");
};
useEffect(() => {
ab();
console.log("calling");
}, []);

作为输出，它将首先打印启动API，然后打印调用，最后打印结束API。但作为打印订单，我需要的是启动API，结束API，并调用。这就是为什么我也使用异步等待。但它并没有如预期的那样发挥作用。有办法解决这个问题吗？

Answer 1

这就是使用await的要点——执行将暂停，直到callAPI完成。

为了实现您想要的顺序，不要使用await，只让代码异步运行。这样，同步代码(console.log('calling')(将在不等待异步代码(callAPI()(完成的情况下运行。

编辑：但是，根据您的用例，另一个答案可能更有意义。

Answer 2

要使async/await工作，您必须将await作为异步函数。因此，请使用以下代码。

useEffect(() => {
let helper = async () => {
await ab(); // write await here
console.log('calling');
};
helper();
}, []);

现在的输出是：

Start API
End API
calling