Estoy usando JavaScript Fetch para acceder a una API y quiero mostrar un cargador mientras la recuperación está en curso. Estoy usando el siguiente código...
async function fetchStates() { showLoader(); await fetch('https://localhost:7123/locations/states?token=@{@HttpContext.Session.GetString("sessionToken")}') .then(response => response.json()) .then(states => { for (let i = 0;i < states.length;i++){ let option = document.createElement('option'); option.text = states[i].name; option.value = states[i].id; ddlCAStates.appendChild(option) } /*hideLoader(1); scrollToTop(1);*/ }) .catch(error => { divErrors.style.display = "block"; let errorName = GetHttpErrorName(error.toString()); txtErrors.textContent = 'The server responded with error: ' + error + ' ' + errorName; /*hideLoader(2); scrollToTop(2);*/ }) .finally(() => { hideLoader(); scrollToTop(); }); } function showLoader() { document.getElementById('loader').style.display = 'block'; } function hideLoader() { document.getElementById('loader').style.display = 'none'; } function scrollToTop() { document.body.scrollTop = 0; // For Safari document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera }El cargador se muestra durante una fracción de segundo y luego se oculta mucho antes de que se complete la búsqueda. El cargador debe estar visible hasta que la recuperación cargue correctamente los datos o falle por algún motivo. ¿Qué estoy haciendo mal aquí?
Use try-catch-finally con async/await
async function fetchStates() { showLoader(); try{ console.log("fetching starts"); const res = await mock(); const states = await res.json(); console.log("fetching completes"); console.log("states:", states); }catch(error){ console.log(error.toString()); }finally{ hideLoader(); } } function mock(){ return new Promise(resolve => setTimeout(() => resolve({ json:() => Promise.resolve([1,2,3]) }), 2000)) } function showLoader(){ console.log("loader showes") } function hideLoader(){ console.log("loader hides") } fetchStates();