recuperar con tiempo de espera

Hace unos años escribí una entrada en el weblog sobre como escribir un fetch Promesa que se agota. La función fue efectiva pero el código no fue 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 obtener con un tiempo de espera:

AbortSignal las instancias ahora cuentan con un timeout opción de cronometrar el Promise después de una determinada cantidad de milisegundos:

async perform fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create a sign with timeout
  const sign = AbortSignal.timeout(timeout);

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

  // Await the fetch with a catch in case it is aborted which indicators an error
  const consequence = await _fetchPromise;
  return consequence;
};

// Utilization
attempt {
  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
}
catch(e) {
  console.log("fetch presumably canceled!", e);
}

Mientras que antiguamente el AbortSignal vendría de un AbortControllerahora puedes usar AbortSignal.timeout para crear la señal.

Por el momento, sin embargo, solo las versiones de navegador perimetrales admiten AbortSignal.timeout. Al igual que la función unique, una función alternativa podría usar setTimeout hasta el momento de la cancelación pero usaremos el sign con el fetch solicitud:

async perform fetchWithTimeout(url, opts = {}, timeout = 5000) {
  // Create the AbortController occasion, get AbortSignal
  const abortController = new AbortController();
  const { sign } = abortController;

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

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

  // Await the fetch with a catch in case it is aborted which indicators an error
  attempt {
    const consequence = await _fetchPromise;
    clearTimeout(timer);
    return consequence;
  } catch (e) {
    clearTimeout(timer);
    throw e;
  }
};

// Utilization
attempt {
  const impatientFetch = await fetchWithTimeout('/', {}, 2000);
}
catch(e) {
  console.log("fetch presumably canceled!", e);
}

El código JavaScript anterior es mucho más limpio ahora que tenemos una API adecuada para cancelar fetch Promesa de llamadas. Adjuntar el sign a la solicitud de obtención nos permite utilizar un setTimeout con abort para cancelar la solicitud después de un período de tiempo determinado.

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