slowdep + fetch — integration

preset

http preset values

'http'80ms300ms1000ms1%

Use a custom profile if your specific API differs. Third-party APIs like Stripe or OpenAI have their own presets — see all presets.

quick start

Wrapping native fetch

import { withLatency } from 'slowdep';

// Wrap the global fetch with the http preset
const slowFetch = withLatency(fetch, 'http');

// Use exactly like fetch — same signature, same return type
const res = await slowFetch('https://api.example.com/users');
const data = await res.json();

const { withLatency } = require('slowdep');

const slowFetch = withLatency(fetch, 'http');

const res = await slowFetch('https://api.example.com/users');
const data = await res.json();

import { withLatency } from 'slowdep';

// Custom profile — your API's actual production numbers
const slowFetch = withLatency(fetch, {
  p50: 120,
  p99: 1500,
  errorRate: 0.02, // 2% transient errors
});

const res = await slowFetch('https://api.example.com/data');

axios

Wrapping axios

Wrap individual axios methods. Use .bind(axios) to preserve the correct this context.

import axios from 'axios';
import { withLatency } from 'slowdep';

const slowGet  = withLatency(axios.get.bind(axios), 'http');
const slowPost = withLatency(axios.post.bind(axios), 'http');

// Or wrap an axios instance
const client = axios.create({ baseURL: 'https://api.example.com' });
const slowClient = {
  get:    withLatency(client.get.bind(client), 'http'),
  post:   withLatency(client.post.bind(client), 'http'),
  put:    withLatency(client.put.bind(client), 'http'),
  delete: withLatency(client.delete.bind(client), 'http'),
};

const { data } = await slowClient.get('/users');

reusable helper

createSlowFetch utility

For consistent latency profiles across your test suite, create a named helper:

// lib/test-helpers.ts
import { withLatency } from 'slowdep';
import type { LatencyOptions } from 'slowdep';

export function createSlowFetch(profile: LatencyOptions | 'http' = 'http') {
  return withLatency(fetch, profile);
}

// In tests:
const slowFetch = createSlowFetch({ p50: 80, p99: 800, errorRate: 0.01 });

production safety

Disable in production

// api-client.ts
import { withLatency } from 'slowdep';

const apiFetch = process.env.NODE_ENV === 'production'
  ? fetch
  : withLatency(fetch, 'http');

export async function getUsers() {
  const res = await apiFetch('/api/users');
  return res.json();
}

what to test

Scenarios this integration covers

Retry on network error — errorRate injects transient failures; test that your retry wrapper attempts the call again
Timeout handling — use a high p99 (e.g. 5000ms) to verify your AbortController timeout fires correctly
Loading states — high p50 (200ms+) keeps async operations in-flight long enough to assert loading UI renders
Error boundary fallback — combined with errorRate, verify your error UI shows the right message
SWR / react-query stale-while-revalidate — slow revalidation lets you assert stale content appears while fresh data loads