Axios HTTP Client
Axios is a promise-based HTTP client for the browser and Node.js. It provides a simple API for making HTTP requests and handling responses.
Quick Start Basic GET Request import axios from "axios";
// Promise-based axios .get("/user?ID=12345") .then((response) => console.log(response.data)) .catch((error) => console.error(error));
// Async/await async function getUser() { try { const response = await axios.get("/user?ID=12345"); console.log(response.data); } catch (error) { console.error(error); } }
Basic POST Request axios .post("/user", { firstName: "John", lastName: "Doe", }) .then((response) => console.log(response.data)) .catch((error) => console.error(error));
Common Patterns Custom Instance const api = axios.create({ baseURL: "https://api.example.com", timeout: 1000, headers: { "X-Custom-Header": "foobar" }, });
// Use the instance api.get("/users").then((response) => console.log(response.data));
Request with Configuration axios({ method: "post", url: "/user/12345", data: { firstName: "Fred", lastName: "Flintstone", }, headers: { "Content-Type": "application/json", Authorization: "Bearer token", }, });
Concurrent Requests function getUserAccount() { return axios.get("/user/12345"); }
function getUserPermissions() { return axios.get("/user/12345/permissions"); }
Promise.all([getUserAccount(), getUserPermissions()]).then( ([account, permissions]) => { console.log("Account:", account.data); console.log("Permissions:", permissions.data); }, );
Error Handling Basic Error Handling axios.get("/user/12345").catch(function (error) { if (error.response) { // Server responded with error status console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // Request was made but no response received console.log(error.request); } else { // Error in request setup console.log("Error", error.message); } });
Custom Error Status Validation axios.get("/user/12345", { validateStatus: function (status) { return status < 500; // Resolve only if status < 500 }, });
Interceptors
Request Interceptor
axios.interceptors.request.use(
(config) => {
// Add auth token to headers
const token = localStorage.getItem("token");
if (token) {
config.headers.Authorization = Bearer ${token};
}
return config;
},
(error) => {
return Promise.reject(error);
},
);
Response Interceptor axios.interceptors.response.use( (response) => { // Transform response data return response.data; }, (error) => { // Handle common errors if (error.response?.status === 401) { // Redirect to login window.location.href = "/login"; } return Promise.reject(error); }, );
Authentication Retry Pattern const api = axios.create({ baseURL: "/api" });
api.interceptors.response.use(undefined, async (error) => { if (error.response?.status === 401) { await refreshToken(); return api(error.config); // Retry original request } throw error; });
Request/Response Configuration Common Configuration Options const config = { url: "/user", method: "get", baseURL: "https://api.example.com", headers: { "X-Requested-With": "XMLHttpRequest" }, params: { ID: 12345 }, data: { firstName: "John" }, timeout: 5000, responseType: "json", withCredentials: false, validateStatus: (status) => status >= 200 && status < 300, };
FormData Upload const formData = new FormData(); formData.append("file", fileInput.files[0]); formData.append("username", "john");
axios.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data", }, });
Download Progress
axios.get("/download/file", {
onDownloadProgress: (progressEvent) => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total,
);
console.log(Download: ${percentCompleted}%);
},
});
Response Schema
Axios responses contain:
{ data: {}, // Server response data status: 200, // HTTP status code statusText: 'OK', // HTTP status message headers: {}, // Response headers config: {}, // Request config request: {} // Request object }
Best Practices Use instances for different APIs or configurations Implement interceptors for auth, logging, and error handling Set timeouts to prevent hanging requests Handle errors at appropriate levels Use TypeScript for better type safety Cancel requests when components unmount TypeScript Support import axios, { AxiosResponse } from "axios";
interface User { id: number; name: string; email: string; }
const response: AxiosResponse