POST在.then()之前未完成，在异步调用中运行

Question

我正在发出一个POST请求，大约需要10秒才能完成。。。但在服务器返回200之前，我的警报会在单击时立即显示。为什么？我该如何修复它，直到服务器完成操作？

const handleClick = async () => {
const response = await fetch("/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(highlights),
}).then(alert("hi!"));
};

如果我把我的.改成.then(() => {alert("hi!");})如下所示，当服务器请求时，页面会闪烁/似乎会刷新，但警报根本不显示

更新：

如果我使用这个代码：

const handleClick = async () => {
try {
const response = await fetch("/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(highlights),
});
alert("first");
} catch (error) {}
alert("second");
};

当按下按钮时，第二个警报立即启动，第一个警报从不启动。

Answer 1

引入Async/await是为了解决then/catch链接问题。你不需要使用then，你必须使用try/catch。async/await始终仅与try/catch一起使用。

const handleClick = async () => {
try{
const response = await fetch("/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(highlights),
})
alert("hi!")
}
catch(error){}
}

当您使用try/catch时，在i/o调用完成之前，控制不会继续。所以您也可以将alert或任何代码放在try-catch块之外。它将在等待调用完成后执行。像这个

try{
const response = await fetch("/create", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(highlights),
})
}
catch(error){}
}
alert("hi!")

---

试试这个。

如果您使用的是reactjs和nodejs，那么我已经模拟了您的需求，它正在按预期工作。我用过reactjs钩子。一旦后呼叫成功，警报将被触发。

你可以看看这个。https://github.com/ajaysikdar/reactjs-nodejs-alert

Answer 2

尝试：

.then(() => { alert("hi"); });

then函数希望您向它传递一个函数，但实际上是调用一个函数(alert(，并将该函数的返回值传递给then。