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

Question

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

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

如果我将 .then 更改为 .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 调用完成，控制才会进一步。因此，您也可以将警报或任何代码放在 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。