Tengo un escenario en el que se carga un archivo en la aplicación web y se envía a un servidor back-end para cargarlo en el almacenamiento. Hasta que se recibe una respuesta del servidor, se muestra un indicador de carga. En caso de que el servidor esté inactivo después de recibir la solicitud, el cliente no recibe respuesta y la página web aún muestra que la carga del archivo aún está en curso. ¿Hay alguna manera de verificar si el servidor no responde y luego mostrar un mensaje de error al usuario?
export const upload = async (file) => { let result = null; try { const formData = new FormData(); formData.append("file", file, file.name); result = await API.post( "/fileupload", formData, {} ); if (result.status === 200) { return result.data; } else { return "Upload file failed."; } } catch (ex) { console.log("parsing failed", ex); } };Puede hacer esto con un tiempo de espera. Idealmente, la biblioteca que está utilizando le permite establecer un tiempo de espera, pero si no, puede crear manualmente un tiempo de espera usando Promise.race
function timeout(ms) { return new Promise(reject => setTimeout(() => reject(new Error('timeout'), ms)); } export const upload = async (file) => { let result = null; try { const formData = new FormData(); formData.append("file", file, file.name); result = await Promise.race([ timeout(30000), // 30 seconds API.post( "/fileupload", formData, {} ), ]); if (result.status === 200) { return result.data; } else { return "Upload file failed."; } } catch (ex) { if (ex.message === 'timeout') { // timeout handling } console.log("parsing failed", ex); } };Tenga en cuenta que esto puede ser bastante frágil e idealmente usaría una biblioteca para manejar las cargas.
Idealmente, el manejo del tiempo de espera debe agregarse en el nivel del módulo API.post