fetch com tempo limite

Há alguns anos, escrevi uma postagem no blog sobre como escrever um fetch Promessa que expira. A função era eficaz, mas o código não era muito bom, principalmente porque o AbortController , que permite ao senhor cancelar uma promessa de busca, ainda não existia. Com AbortController e AbortSignal disponíveis, vamos criar uma função JavaScript melhor para buscar com um tempo limite:

AbortSignal As instâncias agora apresentam uma função timeout para cronometrar o tempo que o Promise após um determinado número de milissegundos:

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

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

  // Await the fetch with a catch in case it's aborted which signals an error
  const result = await _fetchPromise;
  return result;
};

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

Enquanto antigamente o AbortSignal viria de um AbortController, o senhor pode agora usar AbortSignal.timeout para criar o sinal.

No momento, porém, somente as versões de navegador de borda suportam AbortSignal.timeout. Assim como a função original, uma função alternativa poderia usar setTimeout para cronometrar o cancelamento, mas usaremos o signal com o fetch pedido:

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);
}

O código JavaScript acima está muito mais limpo agora que temos uma API adequada para cancelar fetch Promise calls. Anexar o signal à solicitação de busca nos permite usar uma setTimeout com abort para cancelar a solicitação após um determinado período de tempo.

Tem sido excelente ver o senhor AbortController, AbortSignal, e fetch evoluir para fazer async mais controláveis sem alterar drasticamente a API.