javascript 44 lines · 8 steps

Retrying fetch with exponential backoff

A resilient fetch wrapper that retries transient failures with exponential backoff, jitter, and abort support.

Explained by highlit

Advanced retry exponential-backoff abort-signal error-handling promises

1const RETRIABLE_STATUS = new Set([408, 429, 500, 502, 503, 504]);
2 
3function sleep(ms, signal) {
return new Promise((resolve, reject) => {
  const id = setTimeout(resolve, ms);
  signal?.addEventListener('abort', () => {
    clearTimeout(id);
    reject(new DOMException('Aborted', 'AbortError'));
  }, { once: true });
});
11}
12 
13export async function fetchWithRetry(url, options = {}, config = {}) {
const {
  retries = 4,
  baseDelay = 300,
  maxDelay = 8000,
  signal,
} = config;
20 
let attempt = 0;
22 
while (true) {
  try {
    const response = await fetch(url, { ...options, signal });
26 
    if (!RETRIABLE_STATUS.has(response.status) || attempt >= retries) {
      return response;
    }
30 
    const retryAfter = Number(response.headers.get('retry-after'));
    var waitBase = Number.isFinite(retryAfter) && retryAfter > 0
      ? retryAfter * 1000
      : Math.min(baseDelay * 2 ** attempt, maxDelay);
  } catch (err) {
    if (err.name === 'AbortError' || attempt >= retries) throw err;
    waitBase = Math.min(baseDelay * 2 ** attempt, maxDelay);
  }
39 
  const jitter = Math.random() * waitBase * 0.3;
  await sleep(waitBase + jitter, signal);
  attempt++;
}
44}

01 / 01

STEP 01

Walkthrough

Space play ←→ step click any line

Three takeaways

1Only retry on status codes and errors that are genuinely transient, and always cap the total number of attempts.
2Exponential backoff plus random jitter spreads retries out and prevents synchronized retry storms against a struggling server.
3Honoring both a server's Retry-After header and a caller's AbortSignal makes a retry loop cooperative rather than blindly aggressive.

Related explainers

rust

use serde::Deserialize;
 
#[derive(Debug, Deserialize)]
#[serde(untagged)]

Parsing flexible JSON shapes with serde

deserialization enums json

Intermediate 6 steps

ruby

require "shellwords"
require "open3"
 
module Backup

Building safe shell commands in Ruby

shell-out subprocess command-injection

Intermediate 7 steps

javascript

function evaluate(expression) {
  const tokens = tokenize(expression);
  let pos = 0;

Building a recursive descent calculator

parsing recursion operator-precedence

Intermediate 8 steps

javascript

import { useState, useEffect, useCallback, useRef } from 'react';
 
const cache = new Map();
const inflight = new Map();

Building a stale-while-revalidate hook in React

caching request-deduplication custom-hooks

Advanced 10 steps

rust

use chrono::{Duration, NaiveDate};
 
#[derive(Debug)]
pub struct DateRange {

Parsing and iterating date ranges in Rust

error-handling iterators parsing

Intermediate 7 steps

javascript

import { useEffect, useRef, useState } from 'react';
 
export function useDelayedFlag(active, delay = 300) {
  const [visible, setVisible] = useState(false);