Axios and API Integration

# CHAPTER 19

Axios and API Integration #

1. Introduction #

2. Learning Objectives #

• Explain why Axios is preferred over the native fetch API.

• Install the axios package via npm.

• Execute clean GET and POST requests using Axios.

• Create an Axios Instance with a global baseURL.

• Understand the concept of Axios Interceptors for authentication.

3. Axios vs Fetch (The Advantages) #

1. 1. Automatic JSON Parsing: You never have to write await response.json() again. Axios does it automatically.

1. 2. Automatic Error Throwing: fetch does not trigger the catch block if a server returns a 404 Not Found error (it only catches total network failures). Axios automatically throws an error for *any* status code outside the 200 range!

1. 3. Timeouts: You can tell Axios to abort the request automatically if the server takes longer than 5 seconds.

1. 4. Global Configuration: You can set a Base URL and default headers once, and never type them again.

4. Installation and Basic Usage #

npm install axios

Let's refactor the GET and POST requests from the previous chapter to use Axios. Notice how much cleaner the code is!

import axios from 'axios';

// --- GET REQUEST ---
const fetchUsers = async () => {
  try {
    // 1. One line of code! No response.json() needed!
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    
    // 2. The parsed data is automatically attached to the '.data' property!
    console.log(response.data); 
  } catch (error) {
    // Automatically catches 404, 500, and network failures!
    console.error("Error:", error.message);
  }
};

// --- POST REQUEST ---
const createPost = async () => {
  try {
    // 1. Pass the exact JavaScript object! No JSON.stringify() needed!
    // 2. Headers are handled automatically!
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'Axios is awesome',
      body: 'It saves so much time',
      userId: 1
    });

    console.log("Success! ID:", response.data.id);
  } catch (error) {
    console.error("Error:", error.message);
  }
};

5. Creating an Axios Instance (Best Practice) #

// services/api.js
import axios from 'axios';

// Create a custom instance
const apiClient = axios.create({
  baseURL: 'https://api.mycompany.com/v1',
  timeout: 10000, // Abort if it takes longer than 10 seconds!
  headers: {
    'Accept': 'application/json',
    // You can attach API Keys here globally!
    'X-Api-Key': 'SECRET_12345' 
  }
});

export default apiClient;

Now, in your UI components, you use the instance for incredibly clean code:

import apiClient from '../services/api';

const fetchProducts = async () => {
  // It automatically prepends the baseURL!
  // It actually calls: https://api.mycompany.com/v1/products
  const response = await apiClient.get('/products'); 
  setProducts(response.data);
};

6. Axios Interceptors (Advanced but Crucial) #

// services/api.js

// Request Interceptor: Runs right before the request is sent
apiClient.interceptors.request.use(
  async (config) => {
    // Fetch the token from Local Storage (We learn this next chapter!)
    const token = await AsyncStorage.getItem('userToken');
    
    // If a token exists, inject it securely into the Headers!
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

7. Visual Learning: The Interceptor Flow #

[ UI Component: apiClient.get('/profile') ]
                 |
                 v
   [ Axios Request Interceptor ] <-- (Secretly attaches Authorization Token)
                 |
                 v
           [ The Internet ]
                 |
                 v
   [ Axios Response Interceptor ] <-- (Secretly checks if Token is expired)
                 |
                 v
     [ UI Component receives Data ]

8. Common Mistakes #

• Forgetting .data: The most common mistake for developers moving from fetch to axios is treating the response as the data. fetch returns the data directly after .json(). Axios returns an object containing headers, status codes, and configuration. The actual server payload is ALWAYS nested inside response.data.

9. Best Practices #

• Centralized API Services: Do not write Axios calls directly inside your React Components. Create an apiServices.js file holding all your functions (export const getUserProfile = () => apiClient.get('/profile')). Your components should simply call the function. This makes your UI code much cleaner and easier to unit test.

10. Practice Exercises #

1. 1. What property of the Axios configuration object is used to set a default root URL, preventing you from typing the domain name on every request?

1. 2. What feature of Axios allows you to intercept and modify an HTTP request (e.g., attaching an auth token) right before it leaves the mobile device?

11. MCQs with Answers #

12. Interview Questions #

• Q: Detail three specific architectural advantages of using Axios over the native fetch API in a large-scale React Native project.

• Q: Explain the purpose and implementation of an Axios Request Interceptor. Provide a specific, real-world example of when it is absolutely required.

• Q: Describe how an Axios Response Interceptor can be utilized to handle global error scenarios, such as detecting a 401 Unauthorized status code to automatically log the user out of the application.

13. FAQs #

14. Summary #

15. Next Chapter Recommendation #