axios vs ofetch

data-fetching

axios

ofetch

Axios and ofetch represent two different philosophies in JavaScript data-fetching. Axios is a battle-tested HTTP client with 105k+ GitHub stars, offering a comprehensive feature set including interceptors, automatic transforms, and request cancellation. It wraps XMLHttpRequest in Node.js and browsers with a Promise-based API that has become the de facto standard for many React and Vue applications. ofetch, by contrast, is a modern fetch wrapper from the UnJS ecosystem (creators of Nuxt 3), built TypeScript-first with cross-runtime compatibility as a core principle—running identically in browsers, Node.js, Deno, and edge workers.

This comparison matters because the JavaScript ecosystem is shifting toward fetch as the universal standard, yet raw fetch has ergonomic limitations that both libraries address differently. Axios targets developers who need production-grade features like global error handling, request/response transformation pipelines, and concurrent request management. ofetch appeals to teams prioritizing bundle size, TypeScript inference, and modern runtime compatibility, particularly those building with Nuxt, Nitro, or deploying to edge environments where every kilobyte counts.

Head-to-Head

Bundle Size & Performance→ ofetch wins

axios

At 35.6KB minified (13.5KB gzipped), Axios adds noticeable weight to client bundles. It uses XMLHttpRequest in Node.js rather than native fetch, requiring polyfills in some environments. Performance is comparable to fetch for typical requests, but the larger footprint impacts initial load time in bundle-conscious applications.

ofetch

Built directly on fetch with minimal wrapping, ofetch is dramatically smaller—typically under 5KB. It leverages native fetch performance across all runtimes without polyfills. The lightweight design makes it ideal for edge functions, serverless environments, and modern apps targeting aggressive bundle budgets.

Request/Response Interceptors→ axios wins

axios

Provides powerful global interceptors for both requests and responses, enabling centralized auth token injection, logging, error transformation, and retry logic. Interceptors can be chained and support async operations. This is Axios's killer feature for enterprise apps requiring cross-cutting concerns across all HTTP calls.

ofetch

Offers basic onRequest, onResponse, and onRequestError hooks but lacks Axios's sophisticated interceptor chaining and global configuration capabilities. Sufficient for simple token injection or logging, but complex transformation pipelines require manual implementation. Not designed for advanced middleware patterns.

Error Handling & Status Codestie

axios

Automatically rejects promises for non-2xx status codes, throwing errors with structured response data accessible via error.response. This opinionated approach simplifies error handling with try-catch blocks. Includes validateStatus config for custom success criteria and detailed error typing.

ofetch

Also auto-rejects on non-2xx by default (unlike raw fetch), making error handling straightforward. Provides retry logic out-of-the-box with configurable attempts. Error objects include response details, but less structured than Axios's error.response pattern. Simpler but less feature-rich for complex error scenarios.

TypeScript & Developer Experience→ ofetch wins

axios

Offers official TypeScript definitions with good generic support for response types. API surface is well-typed but not TypeScript-native—some patterns require manual type assertions. Extensive documentation and IntelliSense support from widespread adoption. Method chaining and config options are fully typed.

ofetch

TypeScript-first design with exceptional type inference for responses, request bodies, and query parameters. Generic types flow naturally without explicit annotations in most cases. Smaller API surface makes it easier to learn. Built by the UnJS team with modern TS patterns baked in from day one.

Cross-Runtime Compatibility→ ofetch wins

axios

Works in browsers and Node.js but requires environment-specific adapters. Uses XMLHttpRequest in Node rather than fetch, leading to behavioral differences between server and client. Not optimized for edge runtimes, Deno, or serverless workers without additional configuration or polyfills.

ofetch

Designed explicitly for universal compatibility across Node.js 18+, browsers, Deno, Cloudflare Workers, and Vercel Edge. Uses native fetch everywhere, ensuring consistent behavior. This is critical for modern full-stack frameworks like Nuxt 3 where the same code runs server and client-side.

Advanced Features & Ecosystem→ axios wins

axios

Rich feature set including request cancellation via AbortController or proprietary CancelToken, upload/download progress events, automatic XSRF protection, timeout configuration, and concurrent request helpers (axios.all/spread). Massive plugin ecosystem. Built for complex production scenarios.

ofetch

Intentionally minimal: focuses on core fetch improvements like auto-parsing, retries, and baseURL. No built-in progress events, limited cancellation support, and smaller third-party ecosystem. Integrates tightly with Nuxt's useAsyncData and useFetch composables but less extensible for custom workflows outside that context.

Verdict

Choose Axios when building complex applications requiring sophisticated request/response pipelines, global interceptors for auth/logging, or advanced features like upload progress and concurrent request management. It's the pragmatic choice for large React or Vue SPAs where the 13.5KB gzipped cost is negligible compared to the productivity gains from its mature API and extensive documentation. Teams migrating from jQuery.ajax or needing drop-in compatibility with existing Axios-based codebases will find the smoothest path here.

Choose ofetch for modern projects where bundle size matters, particularly Nuxt 3 applications, edge-deployed functions, or any full-stack setup requiring identical server/client behavior. Its TypeScript-first design and fetch-native approach make it ideal for greenfield projects targeting Node 18+, Deno, or Cloudflare Workers. If your use case doesn't require Axios's advanced interceptors or progress events, ofetch delivers 90% of the functionality at 30% of the bundle cost with better cross-runtime guarantees. For Nuxt developers, it's the obvious default since it's already included.

When to Use Each

If you are building a React SPA with global auth token refresh logic, centralized API error handling, and upload progress bars → use Axios because its interceptor architecture and progress events are purpose-built for these patterns and would require significant custom code with ofetch.

If you are building a Nuxt 3 application with server-side rendering and API routes → use ofetch because it's already included in Nuxt, provides universal fetch behavior across server/client, and integrates natively with useAsyncData for optimal data fetching patterns.

If you are deploying serverless functions to Cloudflare Workers or Vercel Edge with strict bundle size limits → use ofetch because its <5KB footprint and native fetch implementation work seamlessly in edge runtimes without polyfills, while Axios's XMLHttpRequest adapter adds unnecessary weight.

If you are maintaining a large Vue 2 enterprise app with existing Axios interceptors for logging, analytics, and multi-tenant header injection → use Axios because rewriting that interceptor infrastructure would cost weeks of development time and introduce regression risk, whereas upgrading Axios versions is straightforward and well-documented.

Learn More

axios →ofetch →

Head-to-Head

Bundle Size & Performance→ ofetch wins

axios

ofetch

Request/Response Interceptors→ axios wins

axios

ofetch

Error Handling & Status Codestie

axios

ofetch

TypeScript & Developer Experience→ ofetch wins

axios

ofetch

Cross-Runtime Compatibility→ ofetch wins

axios

ofetch

Advanced Features & Ecosystem→ axios wins

axios

ofetch

Verdict

When to Use Each