How to Use Axios in React for API Requests

Handling Responses

When a request is successful, Axios returns a response object. The response typically contains:

• Data: The payload returned from the server
• Status: HTTP status code (200, 201, etc.)
• StatusText: HTTP status text (OK, Created, etc.)
• Headers: HTTP headers
• Config: The Axios config object used for the request

This structured response allows developers to easily work with the returned data and perform additional actions based on status codes or headers.




Interested in Pursuing web developer certification Program? Enroll For Web developer course Today!




Error Handling in Axios

Error handling is crucial when dealing with HTTP requests. Axios uses .catch() to capture errors, which can be due to a failed request, network issues, or incorrect API endpoints. Axios provides a detailed error object that contains useful information:

• axios.get('https://api.example.com/nonexistent')
• .catch(error => {
• if (error.response) {
• // Server responded with a status code outside 2xx
• console.log('Error Data:', error.response.data);
• console.log('Error Status:', error.response.status);
• } else if (error.request) {
• // Request was made but no response received
• console.log('No response:', error.request);
• } else {
• // Something else caused the error
• console.log('Error:', error.message);
• }
• });






Cancelling Requests

Axios supports cancellation of requests using the AbortController or legacy CancelToken API. This is especially useful for avoiding unnecessary API calls when a component unmounts: const controller = new AbortController();

• axios.get('https://api.example.com/data', { signal: controller.signal })
• .then(response => console.log(response.data))
• .catch(error => {
• if (axios.isCancel(error)) {
• console.log('Request canceled:', error.message);
• } else {
• console.error('Error:', error);
• }
• });
• // Cancel the request
• controller.abort();

Properly managing cancelation avoids memory leaks and ensures that only the most relevant data is displayed.

Web Development Sample Resumes! Download & Edit, Get Noticed by Top Employers! Download

Secure API Calls

Security is critical when making API calls. Some best practices include: Always use HTTPS to encrypt data in transit.

• Use authentication tokens (JWT, OAuth) and send them in the Authorization header.
• Avoid hardcoding API keys in client-side code.
• Use environment variables to manage sensitive data.
• Validate all inputs before sending them to the API.

Example of adding a bearer token:

• axios.get('https://api.example.com/secure-data', {
• headers: {
• 'Authorization': `Bearer ${yourToken}`
• }
• });

These techniques help secure sensitive user and application data.


Conclusion

Use axios in react is a powerful and flexible HTTP client that greatly simplifies making API calls in modern web development. With its rich set of features such as interceptors, automatic JSON parsing, and request cancellation, Axios stands out as a reliable alternative to the native Fetch API. It integrates well with popular front-end frameworks like React and Vue, making it a go-to choice for developers worldwide. By learning how to send GET and POST requests, handle responses and errors, and use advanced features like interceptors and secure headers, developers can build robust and secure web applications. Whether you're building a single-page app, integrating third-party services, or managing large-scale APIs, Axios provides all the tools needed to succeed.