Axios library in React Native - Deep Dive

Overview - Axios library

What is it?

Axios is a tool that helps your React Native app talk to the internet. It makes it easy to send and receive data from websites or servers. Instead of writing complex code to handle internet requests, Axios simplifies the process with clear commands. It works well with modern JavaScript and React Native apps.

Why it matters

Without Axios or a similar tool, developers would have to write a lot of complicated code to fetch data from the internet. This would slow down app development and increase bugs. Axios solves this by providing a simple, reliable way to handle internet communication, making apps faster and more responsive to user needs.

Where it fits

Before learning Axios, you should understand basic JavaScript, especially promises and async/await. After Axios, you can learn about advanced data handling, state management, and integrating APIs deeply into your React Native app.

Mental Model

Core Idea

Axios is like a smart mail carrier that sends your app's requests to the internet and brings back the responses neatly packaged.

Think of it like...

Imagine you want to send a letter to a friend and get a reply. Axios is like the postal service that takes your letter, delivers it, and returns your friend's answer quickly and safely.

┌─────────────┐       ┌───────────────┐       ┌───────────────┐
│ React Native│──────▶│   Axios       │──────▶│   Internet    │
│   App       │       │ (Mail Carrier)│       │ (Server/API)  │
└─────────────┘       └───────────────┘       └───────────────┘
       ▲                                            │
       │                                            ▼
       └───────────────────────────────Response────┘

Build-Up - 7 Steps

1

Foundation

What Axios Does Simply

Concept: Axios helps your app send and receive data over the internet easily.

In React Native, you often need to get data from a server. Axios lets you write simple commands like axios.get(url) to ask for data. It handles the details of connecting, waiting, and getting the answer.

Result

You can fetch data from a server with just one line of code.

Understanding that Axios wraps complex internet communication into simple commands makes it easier to build apps that talk to servers.

2

Foundation

Installing and Importing Axios

Concept: Before using Axios, you must add it to your project and import it.

Use npm or yarn to add Axios: npm install axios or yarn add axios. Then, in your React Native file, write: import axios from 'axios'; This prepares Axios for use.

Result

Your app can now use Axios commands to make internet requests.

Knowing how to properly add and import Axios is the first step to using it effectively.

3

Intermediate

Making a GET Request with Axios

🤔Before reading on: do you think axios.get returns data directly or a promise? Commit to your answer.

Concept: Axios.get sends a request to get data and returns a promise that resolves with the response.

Example: axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); This code asks the server for data and logs it when it arrives.

Result

The app prints the data received from the server or an error if something goes wrong.

Understanding that axios.get returns a promise helps you handle asynchronous data fetching properly.

4

Intermediate

Using Async/Await with Axios

🤔Before reading on: do you think async/await makes Axios code easier or more complex? Commit to your answer.

Concept: Async/await lets you write Axios calls in a way that looks like normal, step-by-step code.

Example: async function fetchData() { try { const response = await axios.get('https://api.example.com/data'); console.log(response.data); } catch (error) { console.error(error); } } fetchData(); This code waits for the data before moving on, making it easier to read.

Result

The app logs the data or error, but the code looks cleaner and easier to follow.

Knowing async/await improves code readability and error handling when working with Axios.

5

Intermediate

Sending Data with POST Requests

Concept: Axios can send data to servers using POST requests, not just get data.

Example: axios.post('https://api.example.com/login', { username: 'user', password: 'pass' }) .then(response => { console.log('Login success', response.data); }) .catch(error => { console.error('Login failed', error); }); This sends user info to the server to log in.

Result

The server receives the data and responds, which the app can use.

Understanding POST requests lets your app send information, enabling features like login and form submission.

6

Advanced

Configuring Axios Instances

🤔Before reading on: do you think creating an Axios instance helps reuse settings or complicates code? Commit to your answer.

Concept: You can create a custom Axios instance with preset settings like base URL and headers to reuse across your app.

Example: const api = axios.create({ baseURL: 'https://api.example.com', timeout: 1000, headers: {'Authorization': 'Bearer token'} }); api.get('/data') .then(response => console.log(response.data)); This avoids repeating the base URL and headers every time.

Result

Your app makes requests faster and with less repeated code.

Knowing how to create Axios instances improves code organization and efficiency in larger apps.

7

Expert

Interceptors for Request and Response

🤔Before reading on: do you think interceptors modify requests/responses globally or only per call? Commit to your answer.

Concept: Axios interceptors let you run code before a request is sent or after a response arrives, for all requests globally.

Example: axios.interceptors.request.use(config => { // Add token to headers config.headers.Authorization = 'Bearer token'; return config; }); axios.interceptors.response.use(response => { // Log or modify response return response; }); This helps add authentication or handle errors in one place.

Result

All Axios requests automatically include the token, and responses can be processed consistently.

Understanding interceptors unlocks powerful ways to manage app-wide request and response behavior efficiently.

Under the Hood

Axios works by creating HTTP requests using JavaScript's XMLHttpRequest or fetch under the hood. It wraps these low-level APIs in promises, allowing easy asynchronous handling. When you call axios.get or axios.post, Axios builds the request, sends it, waits for the server's reply, and then resolves or rejects the promise based on the response status.

Why designed this way?

Axios was designed to simplify the complex and verbose native HTTP APIs in JavaScript. Promises and async/await were becoming standard, so Axios adopted them for cleaner code. It also added features like interceptors and automatic JSON parsing to solve common problems developers faced with raw APIs.

┌───────────────┐
│ Axios Method  │
│ (get/post)    │
└──────┬────────┘
       │ builds request
       ▼
┌───────────────┐
│ XMLHttpRequest│
│ or fetch API  │
└──────┬────────┘
       │ sends HTTP request
       ▼
┌───────────────┐
│   Server/API  │
│   (Internet)  │
└──────┬────────┘
       │ sends response
       ▼
┌───────────────┐
│ Axios Promise │
│ resolves data │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does axios.get return the data directly or a promise? Commit to your answer.

Common Belief: Axios methods like axios.get return the data immediately.

Reality: Axios methods return a promise that resolves to the response object containing the data.

Why it matters: Assuming immediate data causes bugs where code tries to use data before it arrives, leading to crashes or undefined values.

Quick: Do interceptors affect only one request or all requests globally? Commit to your answer.

Common Belief: Interceptors only modify the single request they are attached to.

Reality: Interceptors apply globally to all Axios requests unless specifically removed.

Why it matters: Misunderstanding this can cause unexpected side effects across the app, like adding headers multiple times or mishandling errors.

Quick: Does Axios automatically retry failed requests? Commit to your answer.

Common Belief: Axios retries failed requests automatically by default.

Reality: Axios does not retry failed requests unless you add custom logic or libraries.

Why it matters: Assuming automatic retries can lead to unhandled failures and poor user experience.

Quick: Is Axios only for React Native apps? Commit to your answer.

Common Belief: Axios is a React Native-specific library.

Reality: Axios works in many JavaScript environments, including browsers and Node.js.

Why it matters: Limiting Axios to React Native prevents reuse of knowledge and code across platforms.

Expert Zone

1

Axios interceptors can be asynchronous, allowing complex workflows like refreshing tokens before requests proceed.

2

Creating multiple Axios instances lets you connect to different APIs with separate configurations cleanly.

3

Axios automatically transforms JSON data but can be customized to handle other formats or preprocess data.

When NOT to use

Axios is not ideal when you need very low-level control over HTTP requests or want to minimize bundle size drastically. In such cases, using the native fetch API or specialized libraries might be better.

Production Patterns

In production, Axios is often combined with state management libraries to handle loading and error states globally. Interceptors manage authentication tokens and error logging centrally. Creating instances per API service helps organize code in large apps.

Connections

Promises in JavaScript

Axios uses promises to handle asynchronous HTTP requests.

Understanding promises deeply helps you write better Axios code and handle success or failure cleanly.

REST APIs

Axios is a client tool to communicate with REST APIs over HTTP.

Knowing how REST APIs work helps you understand what Axios requests do and how to structure them.

Postal Service Logistics

Both Axios and postal services deliver messages between senders and receivers reliably.

Seeing Axios as a delivery system clarifies why it handles retries, errors, and packaging of data.

Common Pitfalls

#1 Trying to use Axios response data immediately without waiting.

Wrong approach:

const data = axios.get('url').data;
console.log(data); // undefined or error

Correct approach:

axios.get('url').then(response => {
console.log(response.data);
});

Root cause:

Not understanding that axios.get returns a promise, not the data directly.

#2 Adding headers inside each request instead of using an Axios instance.

Wrong approach:

axios.get('url', { headers: { Authorization: 'token' } });
axios.post('url', data, { headers: { Authorization: 'token' } });

Correct approach:

const api = axios.create({ headers: { Authorization: 'token' } });
api.get('url');
api.post('url', data);

Root cause:

Not knowing how to reuse configuration leads to repetitive and error-prone code.

#3 Assuming interceptors only affect one request and adding multiple interceptors without removing them.

Wrong approach:

axios.interceptors.request.use(addToken);
axios.interceptors.request.use(addToken); // called twice unintentionally

Correct approach:

const interceptor = axios.interceptors.request.use(addToken);
// later remove if needed
axios.interceptors.request.eject(interceptor);

Root cause:

Misunderstanding interceptor scope causes duplicated effects and bugs.

Key Takeaways

Axios simplifies internet communication in React Native by wrapping complex HTTP requests into easy commands.

It uses promises and supports async/await, making asynchronous code easier to write and read.

Creating Axios instances and using interceptors helps manage repeated settings and global behaviors efficiently.

Misunderstanding promises or interceptors leads to common bugs, so grasping these concepts is crucial.

Axios is versatile and widely used beyond React Native, making it a valuable tool for many JavaScript projects.