What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
For a small TypeScript project, the built-in Fetch API is a strong default if you check HTTP status codes and handle response bodies explicitly. Axios is worth choosing when its instances, interceptors, timeout configuration, or other client features solve a real application need. Neither choice validates server data at runtime, and Fetch can support shared policies through a project-owned wrapper.
How Fetch and Axios handle HTTP errors
The main difference is what happens when a server returns an HTTP error status. Fetch and Axios expose different defaults, but neither makes every kind of failure disappear into one simple success-or-error category.
As an Amazon Associate I earn from qualifying purchases.
Fetch: check the response status yourself
A Fetch promise normally resolves with a Response once response headers arrive, including for statuses such as 404. It does not reject just because the server returned an unsuccessful HTTP status. Check response.ok or response.status before treating the request as successful. MDN documents the Fetch API, and its Response.ok guidance describes the status check.
That check is separate from network failures, which may reject the Fetch promise, and from reading the response body. For example, response.json() is asynchronous and may reject if the body is invalid JSON or cannot be read. Empty bodies and non-JSON responses also need deliberate handling rather than an unconditional call to json().
#1 Best Overall
async function getJson<T>(url: string): Promise<T> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return (await response.json()) as T;
}This minimal wrapper rejects on non-success status before parsing. In production, you may want a project-specific error containing the status and any safely parsed error body. The as T assertion only tells TypeScript how to treat the value; it does not verify that the server returned a value of type T.
Axios: distinguish response, request, and setup errors
Axios normally rejects for HTTP statuses outside its accepted range. Its error-handling guidance distinguishes a response received from the server, a request sent without a response, and an error while setting up the request. These are different situations and may call for different recovery or user-facing behavior. Axios documents these error branches and status handling.
Rank #2
- TypeScript implements a superset of syntax for strictly typed development, facilitating deep static analysis and enhanced development environment integration. The compiler translates source into standard script formats, ensuring parity across any runtime.
- TypeScript is ideal for front-end developers, full-stack engineers, and software architects who build large-scale web applications. It serves those looking to improve code excellence, reduce bugs through static checking, and maintain complex projects more.
- Lightweight, Classic fit, Double-needle sleeve and bottom hem
The validateStatus option changes which HTTP statuses count as resolved rather than rejected. A wrapper, response interceptor, and tests should all reflect the same policy; otherwise, a status handled as a result in one part of the application may be treated as an exception elsewhere.
What response data and TypeScript types tell you
With Fetch, the response body is read separately, for example with response.json(). With Axios, the parsed payload is available in response.data, alongside metadata such as status, statusText, headers, config, and request. Axios cautions that statusText may be blank or unsupported with HTTP/2. See the Axios response schema.
Axios has TypeScript definitions, and a call such as axios.get<User>(url) can describe the expected payload at compile time. That generic is not runtime validation: a changed or malformed server response can still contradict the declared type. The same is true of a Fetch cast such as as User. If the application needs guarantees about untrusted API data, validate the value at runtime before relying on its shape. Axios’s TypeScript documentation covers its typing support.
Features that affect the choice
| Need | Fetch | Axios |
|---|---|---|
| HTTP status policy | Check ok or status and define the application’s error behavior. |
Uses status validation to resolve or reject; validateStatus can change the policy. |
| Shared configuration and response handling | Implement and maintain a wrapper or other shared conventions. | Instances can hold shared configuration; interceptors can centralize request or response behavior. |
| Cancellation | Pass an AbortSignal to the request and cancel it with AbortController. |
Axios documents cancellation support; check the installed package version for the exact API. |
| Transformations and client options | Use the web API and add application-specific conventions as needed. | Documents transformations, timeout configuration, and other client features. |
| Runtime targets | Available as a web platform API in Window and Worker contexts; project support depends on the target runtime and TypeScript library settings. | Documents support for browsers and Node.js; confirm compatibility for the project’s runtime and package version. |
| Dependency and maintenance | A small wrapper may be enough, but the project owns its behavior and conventions. | Adds a dependency and conventions to maintain; useful when its features save meaningful repeated work. |
Axios documents instances, interceptors, and request configuration. Interceptors can make behavior less visible when they transform or swallow errors, so document what callers of a shared client can expect.
Fetch’s cancellation flow uses an AbortController: pass its signal in the request options and call abort() to cancel. Cancellation rejects with an AbortError; even after headers arrive, aborting before the body is consumed can make body reading reject. Handle cancellation separately from server errors when the distinction matters. See MDN’s AbortController documentation.
Quick Recap
Best Value
Choose based on the application’s error contract
Use Fetch when explicit handling is a good fit
- Choose Fetch for a small project that needs ordinary requests and can consistently check status and handle body parsing.
- Use a shared wrapper if several parts of the application need the same status policy, error shape, or logging. A wrapper can provide conventions similar to a configured client, but the project is responsible for implementing and maintaining them.
- Check the target runtime and TypeScript library settings rather than assuming that availability in a browser guarantees support in every deployment environment.
Use Axios when its client features earn their keep
- Choose Axios when shared instances, interceptors, timeout configuration, transformations, or its other documented features address recurring needs.
- Define how callers should handle server responses, requests without responses, and setup errors; do not treat every rejected Axios promise as an HTTP error.
- Keep interceptor behavior visible and consistent with the status policy used by wrappers and tests.
For either choice, keep type declarations separate from trust
- Use TypeScript types to describe the payload your code expects, not as proof that a remote service returned it.
- Add runtime validation when incorrect or changed response data could cause unsafe assumptions or application failures.
- Check the installed Axios version and target runtime before relying on a particular helper or option, since documented API details can vary by version.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
