Axios Explained: Your First HTTP Request

Okay, here’s a very detailed article on Axios, focusing on making your first HTTP request, and expanding considerably beyond that initial step to provide a comprehensive understanding. I’ve aimed for around 5000 words, covering a wide range of topics and providing many code examples.

Axios Explained: Your First HTTP Request (and Much More)

This article is your comprehensive guide to Axios, a popular, promise-based HTTP client for JavaScript. While the title mentions “Your First HTTP Request,” we’ll go far beyond the basics, covering installation, configuration, various request types, error handling, interceptors, and advanced usage scenarios. Whether you’re a beginner just starting with web development or an experienced programmer looking to streamline your HTTP interactions, this guide will provide you with the knowledge you need to effectively use Axios.

1. Introduction: What is Axios and Why Use It?

In the world of web development, making HTTP requests is a fundamental operation. Your frontend application (running in a browser) frequently needs to communicate with a backend server to fetch data, submit forms, update resources, and perform countless other actions. This communication happens through HTTP (Hypertext Transfer Protocol), the foundation of data exchange on the web.

While JavaScript provides built-in mechanisms like the fetch API for making HTTP requests, Axios offers several advantages that make it a preferred choice for many developers:

Promise-based: Axios is built on Promises, providing a cleaner and more manageable way to handle asynchronous operations compared to traditional callback-based approaches. This leads to more readable and maintainable code.
Automatic JSON Transformation: Axios automatically transforms request and response data to and from JSON (JavaScript Object Notation), a common data format for web APIs. This saves you the manual steps of parsing JSON strings or converting JavaScript objects to JSON.
Request and Response Interceptors: Interceptors allow you to modify requests before they are sent and responses before they are handled by your application code. This is extremely useful for tasks like adding authentication headers, logging requests, or handling errors globally.
Error Handling: Axios provides robust error handling capabilities, making it easier to identify and manage issues with your HTTP requests.
Request Cancellation: Axios allows you to cancel requests, which is crucial for scenarios like preventing multiple submissions of a form or aborting long-running requests if the user navigates away.
Browser and Node.js Support: Axios works seamlessly in both browser environments and Node.js, making it a versatile choice for full-stack development.
Wide Browser Compatibility: Axios has excellent cross-browser compatibility, ensuring your application works consistently across different browsers.
Concise API: Axios offers a clean and intuitive API, making it easy to learn and use.

In short, Axios simplifies and streamlines the process of making HTTP requests, leading to more efficient and maintainable code.

2. Installation and Setup

There are several ways to install Axios, depending on your project setup:

2.1. Using npm (Node Package Manager):

This is the most common method for projects using Node.js and a module bundler (like Webpack, Parcel, or Rollup).

bash npm install axios

2.2. Using yarn:

If you prefer yarn, you can use:

bash yarn add axios

2.3. Using a CDN (Content Delivery Network):

For simple projects or quick prototyping, you can include Axios directly in your HTML using a CDN:

“`html

orhtml

“`

This method avoids the need for a build process, but it’s generally recommended to use a package manager for larger projects.

2.4. Using Bower:

Bower is another package manager, although less commonly used now:

bash bower install axios
2.5. Verify Installation

After installing Axios, it’s a good practice to test whether Axios is installed correctly. For that, create a basic HTML file like below:
“`html

Axios Test

“`
3. Your First HTTP Request (GET)

Let’s start with the most basic HTTP request: a GET request. GET requests are used to retrieve data from a server. We’ll use the JSONPlaceholder API (a free fake API for testing) for our examples.

“`javascript
// If you installed via npm or yarn:
import axios from ‘axios’;

// Make a GET request to fetch a user with ID 1
axios.get(‘https://jsonplaceholder.typicode.com/users/1’)
.then(response => {
// Success! Handle the response data
console.log(response.data); // The actual data from the server
console.log(response.status); // The HTTP status code (e.g., 200 OK)
console.log(response.statusText); // The status text (e.g., “OK”)
console.log(response.headers); // The response headers
console.log(response.config); // The configuration used for the request
})
.catch(error => {
// An error occurred! Handle the error
console.error(error);

if (error.response) {
  // The request was made and the server responded with a status code
  // that falls out of the range of 2xx
  console.log(error.response.data);
  console.log(error.response.status);
  console.log(error.response.headers);
} else if (error.request) {
  // The request was made but no response was received
  // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
  // http.ClientRequest in node.js
  console.log(error.request);
} else {
  // Something happened in setting up the request that triggered an Error
  console.log('Error', error.message);
}
console.log(error.config);

});
“`

Explanation:

import axios from 'axios';: This line imports the Axios library into your JavaScript file (if you’re using a module bundler). If you’re using a CDN, you can omit this line, as Axios will be available globally.
axios.get('https://jsonplaceholder.typicode.com/users/1'): This initiates a GET request to the specified URL. axios.get() is a shorthand method for making GET requests.
.then(response => { ... }): This is the Promise’s “then” handler. It’s executed when the request is successful (i.e., the server responds with a status code in the 2xx range). The response object contains all the information about the response, including:
- response.data: The parsed JSON data from the server.
- response.status: The HTTP status code (e.g., 200 for OK, 404 for Not Found).
- response.statusText: A textual description of the status code.
- response.headers: The HTTP headers returned by the server.
- response.config: The configuration object that was used to make the request.
.catch(error => { ... }): This is the Promise’s “catch” handler. It’s executed if an error occurs during the request (e.g., network error, server error). The error object provides details about the error:
- error.response: If the server responded with an error status code (outside the 2xx range), this object contains the response data, status, and headers, similar to the successful response object.
- error.request: If the request was made but no response was received (e.g., network timeout), this object represents the request.
- error.message: A general error message.
- error.config: The configuration of Axios Request.

4. Other HTTP Request Methods (POST, PUT, PATCH, DELETE)

Axios provides convenient methods for other common HTTP request types:

axios.post(url, data, config): Sends a POST request, typically used to create new resources on the server. The data argument is the data you want to send to the server (usually as JSON).
axios.put(url, data, config): Sends a PUT request, typically used to update an entire existing resource.
axios.patch(url, data, config): Sends a PATCH request, typically used to update part of an existing resource.
axios.delete(url, config): Sends a DELETE request, used to delete a resource.
axios.head(url, config): Sends a HEAD request which is identical to GET, but without the response body.
axios.options(url, config): Sends a OPTIONS request which is used to get the supported HTTP methods that the server allows.

Example: POST Request (Creating a new post)

javascript axios.post('https://jsonplaceholder.typicode.com/posts', { title: 'My New Post', body: 'This is the content of my post.', userId: 1 }) .then(response => { console.log(response.data); // The newly created post (with an ID assigned by the server) }) .catch(error => { console.error(error); });

Example: PUT Request (Updating a post)

javascript axios.put('https://jsonplaceholder.typicode.com/posts/1', { id: 1, // Include the ID of the post to update title: 'Updated Post Title', body: 'This is the updated content.', userId: 1 }) .then(response => { console.log(response.data); // The updated post }) .catch(error => { console.error(error); });

Example: PATCH Request (Partially updating a post)

javascript axios.patch('https://jsonplaceholder.typicode.com/posts/1', { title: 'Updated Title Only' // Only update the title }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });
Example: DELETE Request (Delete a post)

javascript axios.delete('https://jsonplaceholder.typicode.com/posts/1') .then(response => { console.log("Successfully Deleted"); //The response will usually be empty on success, but the status code will be 200 (OK) or 204 (No Content) console.log(response.data); // {} empty object console.log(response.status); //200 }) .catch(error => { console.error(error); });

5. Request Configuration

The third argument to axios.get(), axios.post(), etc., and the second argument to axios.delete() is an optional config object. This object allows you to customize various aspects of the request:

headers: Set custom HTTP headers.
params: Set URL query parameters (for GET requests).
timeout: Set a timeout for the request (in milliseconds).
auth: Set basic authentication credentials.
responseType: Specify the expected response type (e.g., ‘json’, ‘text’, ‘blob’, ‘arraybuffer’, ‘document’, ‘stream’). The default is ‘json’.
withCredentials: Indicate whether or not cross-site Access-Control requests should be made using credentials (e.g., cookies, authorization headers).
transformRequest: Modify the request data before it’s sent.
transformResponse: Modify the response data before it’s passed to then or catch.
baseURL: Set a base URL for all requests. This is useful if you’re making multiple requests to the same API.
data: Data to be sent as the request body. Only applicable for request methods ‘PUT’, ‘POST’, ‘DELETE , and ‘PATCH’.
validateStatus: Define HTTP status codes that should resolve the Promise (return to .then), rather than reject it (go to .catch). By default, status codes >= 200 and < 300 resolve the Promise.

Example: Setting Headers and Query Parameters

javascript axios.get('https://jsonplaceholder.typicode.com/posts', { params: { userId: 1 // Add a query parameter: ?userId=1 }, headers: { 'X-Custom-Header': 'MyValue' // Add a custom header } }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); });

Example: Setting a Timeout

javascript axios.get('https://jsonplaceholder.typicode.com/posts', { timeout: 1000 // Timeout after 1 second (1000 milliseconds) }) .then(response => { console.log(response.data); }) .catch(error => { // If the timeout is exceeded, the error will be an AxiosError with code 'ECONNABORTED' console.error(error); });
Example: Setting Basic Authentication

javascript axios.get('https://example.com/api/protected-resource', { auth: { username: 'myusername', password: 'mypassword' } }) .then(response => { console.log(response.data) }).catch( err => console.log(err));

Example: Using validateStatus

“`javascript
axios.get(‘https://example.com/api/resource’, {
validateStatus: function (status) {
return status < 500; // Resolve only if the status code is less than 500
}
})
.then(response => {
// This will be executed for status codes 2xx, 3xx, and 4xx
console.log(response.data);
})
.catch(error => {
// This will be executed only for status codes 5xx
console.error(error);
});

“`

6. The Axios Instance

For more complex applications, it’s often beneficial to create an Axios instance with a pre-defined configuration. This allows you to avoid repeating the same configuration options for every request.

“`javascript
// Create an Axios instance with a base URL and default headers
const api = axios.create({
baseURL: ‘https://jsonplaceholder.typicode.com’,
headers: {
‘Content-Type’: ‘application/json’,
‘Authorization’: ‘Bearer YOUR_AUTH_TOKEN’ // Example authorization header
}
});

// Now you can use the instance to make requests
api.get(‘/users/1’)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});

api.post(‘/posts’, {
title: ‘New Post’,
body: ‘Post content’
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
“`

The axios.create() method returns a new Axios instance. Any configuration options you pass to create() become the defaults for that instance. You can still override these defaults on a per-request basis by providing a config object to the individual request methods.

7. Interceptors

Interceptors are one of the most powerful features of Axios. They allow you to intercept requests or responses before they are handled by your then or catch blocks. This is incredibly useful for:

Adding authentication headers: Automatically add an authentication token to every request.
Logging requests and responses: Log all API interactions for debugging purposes.
Transforming request/response data: Modify the data before it’s sent or received.
Handling errors globally: Implement a centralized error handling mechanism.
Setting a loading indicator: Show/hide a loading spinner while requests are in progress.

There are two types of interceptors:

Request Interceptors: Run before a request is sent.
Response Interceptors: Run after a response is received (but before then or catch).

7.1 Request Interceptors

javascript // Add a request interceptor axios.interceptors.request.use(config => { // Modify the request config (e.g., add an authorization header) config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`; return config; // Always return the config object }, error => { // Handle request errors (e.g., if there's a problem retrieving the token) return Promise.reject(error); });
The axios.interceptors.request.use() method takes two arguments:

config => { ... } (onFulfilled): A function that takes the request config object as an argument. You can modify the config object here (e.g., add headers, change the URL). You must return the config object (or a Promise that resolves to the config object).
error => { ... } (onRejected): An optional function that handles errors that occur during the interceptor itself (e.g., if you try to read a token from local storage and it fails). You should return a rejected Promise using Promise.reject(error).

7.2 Response Interceptors
javascript // Add a response interceptor axios.interceptors.response.use(response => { // Modify the response data (e.g., transform it, extract specific fields) console.log("Response Interceptor Called"); return response; // Always return the response object }, error => { // Handle response errors globally (e.g., redirect to login if unauthorized) if (error.response && error.response.status === 401) { // Redirect to login page window.location.href = '/login'; } return Promise.reject(error); });

The axios.interceptors.response.use() method also takes two arguments:

response => { ... } (onFulfilled): A function that takes the response object as an argument. You can modify the response object here. You must return the response object (or a Promise that resolves to the response object).
error => { ... } (onRejected): A function that handles response errors. This is where you can implement global error handling logic. You should return a rejected Promise using Promise.reject(error).

7.3. Removing Interceptors
If you need to remove an interceptor later, you can use the eject method. The use method returns an ID that you can use to eject the interceptor.

javascript const myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor);
8. Error Handling (Detailed)

We’ve touched on error handling throughout this guide, but it’s worth dedicating a section to it. Axios provides a structured way to handle errors, making it easier to debug and respond to different error scenarios.

As mentioned earlier, the catch block in your Axios Promise chain receives an error object. This object can have several properties, depending on the type of error:

error.response: This property exists if the server responded with an error status code (outside the 2xx range). It contains:
- error.response.data: The response body from the server (often JSON containing error details).
- error.response.status: The HTTP status code (e.g., 400 Bad Request, 401 Unauthorized, 500 Internal Server Error).
- error.response.headers: The response headers.
error.request: This property exists if the request was made, but no response was received. This often indicates a network error (e.g., the server is down, the client is offline, a timeout occurred). In a browser environment, error.request is an instance of XMLHttpRequest. In Node.js, it’s an instance of http.ClientRequest.
error.message: A general error message describing the problem.
error.config: The configuration object that was used for the request. This can be useful for debugging, as it shows you exactly how the request was configured.
error.code: (Axios-specific) A string error code provided by Axios. Common codes include:
- ECONNABORTED: The request was aborted (e.g., due to a timeout).
- ERR_BAD_REQUEST : The request has failed with 400 status code.
- ERR_BAD_RESPONSE: The response has failed with other than 2xx status code.
- ERR_NETWORK: Network Error.

Example: Handling Different Error Types

javascript axios.get('/some-api-endpoint') .then(response => { console.log(response.data); }) .catch(error => { if (error.response) { // Server responded with an error status code console.error("Server Error:", error.response.status); console.error("Error Data:", error.response.data); } else if (error.request) { // No response received (network error) console.error("Network Error:", error.request); } else { // Something else went wrong console.error("Request Error:", error.message); } console.error("Request Config:", error.config); console.error("Error Code", error.code) });

9. Request Cancellation

Axios allows you to cancel requests using a cancel token. This is useful for scenarios where you want to prevent a request from completing, such as:

User navigates away: If the user navigates away from a page while a request is in progress, you might want to cancel the request to avoid unnecessary network traffic and potential errors.
Multiple form submissions: If a user clicks a submit button multiple times quickly, you can cancel previous requests to prevent duplicate submissions.
Autocomplete suggestions: When implementing autocomplete, you might want to cancel previous suggestion requests if the user types a new character before the previous request completes.

9.1 Using CancelToken.source (Deprecated in newer versions, but still widely supported):

“`javascript
// 1. Create a cancel token source
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get(‘/some-api-endpoint’, {
cancelToken: source.token // 2. Pass the token to the request config
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (axios.isCancel(error)) {
// 3. Check if the error is a cancellation error
console.log(‘Request canceled:’, error.message);
} else {
// Handle other errors
console.error(error);
}
});

// 4. Cancel the request (e.g., when the user navigates away)
source.cancel(‘Operation canceled by the user.’);
“`

Explanation:

CancelToken.source(): Creates a cancel token source. This source has two properties:
- token: The cancel token itself, which you pass to the request.
- cancel: A function that you call to cancel the request.
cancelToken: source.token: Pass the token to the request’s config object.
axios.isCancel(error): Inside the catch block, use axios.isCancel() to check if the error is a cancellation error.
source.cancel(message): Call the cancel() function on the source to cancel the request. You can optionally provide a message that will be available in the error.message property.

9.2 Using AbortController (Recommended for modern environments):

The AbortController API is a more modern and standardized way to handle cancellations, and it’s now the preferred method in Axios.

“`javascript
// 1. Create an AbortController
const controller = new AbortController();

axios.get(‘/some-api-endpoint’, {
signal: controller.signal // 2. Pass the signal to the request config
})
.then(response => {
console.log(response.data);
})
.catch(error => {
if (error.name === ‘CanceledError’) { // Check error name.
console.log(‘Request canceled:’, error.message);
}
else if (axios.isCancel(error)) { //For Backward compatibility
console.log(‘Request canceled:’, error.message);
}
else {
// Handle other errors
console.error(error);
}
});

// 3. Abort the request
controller.abort();
“`

Explanation:

new AbortController(): Creates an AbortController instance.
signal: controller.signal: Pass the signal property of the controller to the request’s config object.
controller.abort(): Call the abort() method on the controller to cancel the request.

10. Concurrent Requests

Axios provides a convenient way to make multiple requests concurrently using axios.all() and axios.spread().

“`javascript
function getUserData() {
return axios.get(‘https://jsonplaceholder.typicode.com/users/1’);
}

function getPostData() {
return axios.get(‘https://jsonplaceholder.typicode.com/posts?userId=1’);
}

axios.all([getUserData(), getPostData()])
.then(axios.spread((userResponse, postResponse) => {
// Both requests are now complete!
console.log(‘User Data:’, userResponse.data);
console.log(‘Post Data:’, postResponse.data);
}))
.catch(error => {
console.error(error);
});
“`

Explanation:

axios.all([promise1, promise2, ...]): Takes an array of Promises (in this case, the Promises returned by axios.get()) and returns a new Promise that resolves when all of the input Promises have resolved.
axios.spread((...args) => { ... }): A helper function that takes a function as an argument. This function will be called with the resolved values of the Promises passed to axios.all(), spread out as individual arguments. This makes it easier to work with the results of multiple concurrent requests.

11. async/await with Axios

async/await is a more modern syntax for working with Promises, making asynchronous code look and behave a bit more like synchronous code. Axios works seamlessly with async/await.

“`javascript
async function fetchData() {
try {
const response = await axios.get(‘https://jsonplaceholder.typicode.com/users/1’);
console.log(response.data);
} catch (error) {
console.error(error);
}
}

fetchData();
“`

Explanation:

async function fetchData() { ... }: Declare an async function. This allows you to use the await keyword inside the function.
const response = await axios.get(...): The await keyword pauses the execution of the function until the Promise returned by axios.get() resolves (or rejects). The resolved value (the response object) is then assigned to the response variable.
try...catch: Use a try...catch block to handle potential errors. If the Promise rejects (e.g., due to a network error), the catch block will be executed.

async/await makes your code more readable and easier to reason about, especially when dealing with multiple asynchronous operations.

12. Advanced Usage and Best Practices

Centralized API Client: For larger projects, create a dedicated module or class to manage your Axios instance and API interactions. This promotes code reusability and maintainability.

“`javascript
// api.js
import axios from ‘axios’;

const api = axios.create({
baseURL: ‘/api’, // Or your API’s base URL
headers: {
‘Content-Type’: ‘application/json’,
},
});

// Add interceptors, error handling, etc. here

export default {
getUsers() {
return api.get(‘/users’);
},
createUser(userData) {
return api.post(‘/users’, userData);
},
// … other API methods
};
Then you can use in another file.javascript
import api from ‘./api.js’;
```
async function getAllUsers(){
    const res = await api.getUsers();
    console.log(res.data);
}

getAllUsers();
```
“`
Environment Variables: Store sensitive information like API keys and base URLs in environment variables, rather than hardcoding them in your codebase. This improves security and makes it easier to configure your application for different environments (development, staging, production).
TypeScript Integration: Axios has excellent TypeScript support. If you’re using TypeScript, you can leverage type definitions to get better code completion, error checking, and overall developer experience.
Testing: Write unit tests for your API interactions to ensure they are working correctly. You can use libraries like jest and nock or axios-mock-adapter to mock API responses during testing.
Debouncing and Throttling: For scenarios like search input, you might want to use debouncing or throttling to limit the number of API requests made as the user types. Libraries like lodash provide utility functions for this.
Custom Adapters: Axios allows you to create custom adapters. This gives you fine grained control over how request are made.

13. Conclusion

Axios is a powerful and versatile HTTP client that simplifies and streamlines the process of making API requests in JavaScript. Its promise-based API, automatic JSON transformation, interceptors, and robust error handling make it a popular choice for both frontend and backend development. This comprehensive guide has covered everything from basic GET requests to advanced topics like cancellation, concurrent requests, and async/await, equipping you with the knowledge to effectively utilize Axios in your projects. Remember to consult the official Axios documentation for the most up-to-date information and advanced features.

Axios Test

Leave a Comment Cancel Reply