I would like to know if there is a way that if my request takes more than 20 seconds, I can show an alert alerting users of an error in the API. So they can refresh the page or come back later.
Something like response.status.
I do NOT need setTimeout and AbortController. Just detect response and trigger the alert.
const envSoli = async () => { try { let peticion = await fetch("data.php", { method: "POST", body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]), headers: { "Content-type": "application/x-www-form-urlencoded" }, cache: "no-cache" }); let oreen = await peticion.json(); switch (oreen.enviando) { case -1: chenille++; document.getElementById("div1").append(oreen.cat + "<br />"); updateProgress(chenille, leray.length); tvmit_wrongUp(); break; case 1: chenille++; document.getElementById("div1").append(oreen.dog + "<br />"); updateProgress(chenille, leray.length); tvmit_wrongUp(); break; case 2: chenille++; document.getElementById("div2").append(oreen.sky + "<br />"); nieva++; updateProgress(chenille, leray.length); tvmit_dieUp(); break; case 3: chenille++; document.getElementById("div3").append(oreen.water + "<br />"); tvmit_liveUp(); updateProgress(chenille, leray.length); break; } OKTY(leray, chenille, aarsh, nieva); return true; } catch (error) { console.log(error) } } envSoli();
Advertisement
Answer
You need setTimeout
to set the timer
to 20 sec, and after the fetch
request, if the request takes less than 20 seconds, clear the timeout
const envSoli = async () => { try { let timeId = setTimeout(() => alert('The request take more than 20 sec'), 20 * 1000); // 20 sec let peticion = await fetch("data.php", { method: "POST", body: "ajax=1&do=check&lista=" + encodeURIComponent(leray[chenille]), headers: { "Content-type": "application/x-www-form-urlencoded" }, cache: "no-cache" }); clearTimeout(timeId) let oreen = await peticion.json(); switch (oreen.enviando) { case -1: chenille++; document.getElementById("div1").append(oreen.cat + "<br />"); updateProgress(chenille, leray.length); tvmit_wrongUp(); break; case 1: chenille++; document.getElementById("div1").append(oreen.dog + "<br />"); updateProgress(chenille, leray.length); tvmit_wrongUp(); break; case 2: chenille++; document.getElementById("div2").append(oreen.sky + "<br />"); nieva++; updateProgress(chenille, leray.length); tvmit_dieUp(); break; case 3: chenille++; document.getElementById("div3").append(oreen.water + "<br />"); tvmit_liveUp(); updateProgress(chenille, leray.length); break; } OKTY(leray, chenille, aarsh, nieva); return true; } catch (error) { console.log(error) } } envSoli();