recuperar con tiempo de espera

recuperar con tiempo de espera

Hace unos años escribí una entrada de blog sobre cómo escribir un fetch Promesa que expira. La función era eficiente pero el código no era excelente, principalmente porque AbortController , que le permite cancelar una promesa de recuperación, aún no existía. Con AbortController y AbortSignal disponible, vamos a crear una mejor función de JavaScript para recuperar con un tiempo de espera:

Al igual que la función original, usaremos setTimeout en el momento de la cancelación, pero utilizaremos el signal con el fetch solicitud:

async function fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create the AbortController instance, get AbortSignal
  const abortController = new AbortController();
  const { signal } = abortController;

  // Make the fetch request
  const _fetchPromise = fetch(url, {
    ...opts,
    signal,
  });

  // Start the timer
  const timer = setTimeout(() => abortController.abort(), timeout);

  // Await the fetch with a catch in case it's aborted which signals an error
  try {
    const result = await _fetchPromise;
    clearTimeout(timer);
    return result;
  } catch (e) {
    clearTimeout(timer);
    throw e;
  }
};

// Usage
try {
  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
}
catch(e) {
  console.log("fetch possibly canceled!", e);
}

El código JavaScript anterior es mucho más limpio ahora que tenemos una API adecuada para deshacer fetch La promesa llama. Adjunta signal en la consulta fetch nos permite usar un setTimeout con abort para cancelar la solicitud después de un tiempo.

fue genial ver AbortController, AbortSignaly fetch evolucionar para hacer async solicitudes más controlables sin cambiar drásticamente la API.

Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
Supervisión del rendimiento del sitio web
  • Control de cámara y video con HTML5

    Control de cámara y video con HTML5

    Las API del lado del cliente en dispositivos móviles y de escritorio entregan rápidamente las mismas API. Por supuesto, nuestros dispositivos móviles tuvieron acceso a algunas de estas API primero, pero estas API están llegando lentamente al escritorio. Una de estas API es la API getUserMedia...

  • Cómo crear un RetroPie en Raspberry Pi - Guía gráfica

    Cómo crear un RetroPie en Raspberry Pi - Guía gráfica

    Hoy podemos jugar juegos increíbles en nuestras consolas de juegos súper poderosas, PC, auriculares VR e incluso dispositivos móviles. Si bien me encanta jugar juegos nuevos en estos días, anhelo los sistemas de juego retro que tenía cuando era niño: el Nintendo original...

  • Detección de rostros con jQuery

    Detección de rostros con jQuery

    Siempre me ha intrigado el software de reconocimiento porque no puedo imaginar la lógica que se encuentra en todos los algoritmos. Ya sea que se trate de detección de voz, rostro u otros tipos, las personas se ven y suenan tan diferentes, las imágenes se toman de manera diferente y desde diferentes ángulos, yo...

  • Clasificaciones de estrellas de MooTools con MooStarRating

    Clasificaciones de estrellas de MooTools con MooStarRating

    Lo he dicho una y otra vez, pero lo diré de nuevo: el papel principal de JavaScript en las aplicaciones web es mejorar la funcionalidad estática que de otro modo sería aburrida proporcionada por el navegador. Un ejemplo perfecto de esto son los sistemas de clasificación de estrellas potenciados por Javascript/AJAX que se han vuelto populares a lo largo de los años.

Si quieres conocer otros artículos parecidos a recuperar con tiempo de espera puedes visitar la categoría Tutoriales.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas