Блог

Я делаю запрос 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 на
.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");
};

  

Второе предупреждение срабатывает сразу после нажатия кнопки, первое предупреждение никогда не срабатывает.

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 , управление не будет продолжаться до завершения вызова ввода-вывода. Таким образом, вы также можете поместить предупреждение или любой код из блока try catch. Он будет выполнен после завершения вызова await.
Вот так

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

}
catch(error){}
}
alert("hi!")
  

Попробуйте это.

Если вы используете reactjs и nodejs, то я смоделировал ваше требование, и оно работает так, как ожидалось. Я использовал перехватчики reactjs. Оповещение срабатывает после успешного завершения post-вызова.

Вы можете это проверить. https://github.com/ajaysikdar/reactjs-nodejs-alert

Попробуйте:

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

then Функция ожидает, что вы передадите ей функцию, но на самом деле вы вызываете функцию ( alert ) и передаете возвращаемое значение этой функции then .