Axios vs Fetch API in Redux Thunks
Axios and Fetch are both ways to make HTTP requests in JavaScript. Axios is older and more ergonomic for complex cases. Fetch is built-in and works well for straightforward GET requests.
The request/success/failure pattern works with the native Fetch API. Many real-world projects, especially those started before 2017, use Axios instead. Both are valid. Knowing the differences prevents confusion when you switch between codebases.
Installation
Fetch is built into modern browsers. No installation needed.
Axios is a third-party package:
npm install axiosSide-by-Side Comparison
The same fetchTasks thunk, first with Fetch, then with Axios:
// Fetch
export const fetchTasks = () => async (dispatch) => {
dispatch({ type: actionTypes.FETCH_TASKS_REQUEST });
try {
const response = await fetch('http://localhost:7000/tasks');
if (!response.ok) throw new Error(response.statusText);
const data = await response.json();
dispatch({ type: actionTypes.FETCH_TASKS_SUCCESS, payload: data });
} catch (error) {
dispatch({ type: actionTypes.FETCH_TASKS_ERROR, payload: error.message });
}
};// Axios
import axios from 'axios';
export const fetchTasks = () => async (dispatch) => {
dispatch({ type: actionTypes.FETCH_TASKS_REQUEST });
try {
const response = await axios.get('http://localhost:7000/tasks');
dispatch({ type: actionTypes.FETCH_TASKS_SUCCESS, payload: response.data });
} catch (error) {
dispatch({ type: actionTypes.FETCH_TASKS_ERROR, payload: error.message });
}
};Two key differences.
Response body parsing: Fetch requires two await calls: one for the response and one for response.json(). Axios parses JSON automatically and returns the body in response.data.
Error handling: Fetch does not throw on HTTP errors. A 404 or 500 response has response.ok === false, but the catch block never fires unless you throw manually. Axios throws automatically on any non-2xx status, so the catch block catches both network failures and HTTP errors without extra code.
When Each Is Used
Fetch is the right choice for new projects and simple GET requests. It is a web standard, requires no installation, and works identically in Node 18+ and the browser.
Axios is common in codebases started before 2017 when Fetch was not widely available. It is also preferred for complex operations: file uploads via FormData, upload progress tracking, request cancellation, and automatic request/response interceptors. For those scenarios, Axios reduces boilerplate compared to Fetch.
Both approaches fit the request/success/failure pattern without any changes to the three action types or the reducer. For this series, the code in the code-practice repo uses Fetch. Switching to Axios is a one-file change. Just replace the fetch(url) call with axios.get(url) and read response.data instead of calling response.json().
ExpandFetch vs Axios: two-await pattern vs single call with auto JSON parsing
The Essentials
- Fetch is built-in. Axios is a package. New projects default to Fetch. Existing projects may use Axios. Recognize the pattern and adapt.
- Axios parses JSON automatically via
response.data. Fetch requiresawait response.json()as a second step. - Axios throws on HTTP errors. Fetch does not. You must check
response.okand throw manually to route 4xx/5xx into thecatchblock.
Further Reading and Watching
- Axios GitHub: source, API reference, and feature list
- Using the Fetch API (MDN): comprehensive reference including error handling patterns
Keep reading