Axios library in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is Axios in React Native?

Axios is a popular JavaScript library used to make HTTP requests from React Native apps. It helps you talk to servers to get or send data easily.

beginner

How do you install Axios in a React Native project?

You install Axios by running npm install axios or yarn add axios in your project folder.

beginner

How do you make a GET request using Axios?

Use axios.get(url) to fetch data from a server. It returns a promise with the response data.

intermediate

What is the purpose of async/await with Axios?

Using async/await makes your code wait for the Axios request to finish before moving on, making it easier to read and handle responses.

intermediate

How can you handle errors in Axios requests?

You can catch errors by using .catch() after the Axios call or a try-catch block with async/await to handle problems like network issues.

Which command installs Axios in a React Native project?

A npm install axios

B npm install react-axios

C npm install axios-native

D npm install react-native-axios

The correct command is npm install axios to add Axios to your project.

What does axios.get(url) do?

A Sends data to the server

B Updates data on the server

C Fetches data from the server

D Deletes data on the server

axios.get(url) fetches data from the server at the given URL.

How do you handle errors in Axios when using async/await?

A Use .then() only

B Use setTimeout

C Ignore errors

D Use a try-catch block

A try-catch block lets you catch and handle errors when using async/await with Axios.

What type of value does Axios return when making a request?

A A string

B A promise

C A number

D An array

Axios returns a promise that resolves with the server response.

Why use Axios instead of fetch in React Native?

A Axios automatically converts JSON

B Axios supports older browsers only

C Axios is slower

D Axios does not support promises

Axios automatically converts JSON data and has simpler syntax compared to fetch.

Explain how to make a GET request using Axios in React Native and handle the response.

Think about how you ask a friend for information and wait for their answer.

Describe the steps to install and set up Axios in a React Native app.

Start with adding Axios to your project, then use it in your code.

Practice

1. What is the main purpose of using the Axios library in a React Native app?

easy

A. To make HTTP requests to fetch or send data

B. To style components with CSS

C. To manage app navigation between screens

D. To store data locally on the device

Solution

1. Step 1: Understand Axios functionality

   Axios is a library designed to simplify making HTTP requests like GET and POST.

2. Step 2: Identify Axios use in React Native

   It helps fetch data from servers or send data to them, which is essential for dynamic apps.

3. Final Answer:

   To make HTTP requests to fetch or send data -> Option A

4. Quick Check:

   Axios = HTTP requests [OK]

Hint: Axios is for internet requests, not styling or navigation [OK]

Common Mistakes:

• Confusing Axios with styling libraries
• Thinking Axios manages navigation
• Assuming Axios stores data locally

2. Which of the following is the correct syntax to make a GET request using Axios in React Native?

easy

A. axios.fetch('https://api.example.com/data')

B. axios.get('https://api.example.com/data')

C. axios.post('https://api.example.com/data')

D. axios.request('https://api.example.com/data')

Solution

1. Step 1: Recall Axios GET method

   The correct method to fetch data is axios.get(url).

2. Step 2: Check other options

   axios.fetch is not a valid Axios method, axios.post sends data, and axios.request is more generic but requires config.

3. Final Answer:

   axios.get('https://api.example.com/data') -> Option B

4. Quick Check:

   GET request = axios.get() [OK]

Hint: Use axios.get() for fetching data [OK]

Common Mistakes:

• Using axios.fetch which does not exist
• Confusing get with post method
• Using axios.request without config object

3. What will be logged to the console after this Axios GET request succeeds?

axios.get('https://api.example.com/user')
  .then(response => console.log(response.data.name))
  .catch(error => console.log('Error'));

Assuming the server responds with { "name": "Alice" }.

medium

A. response

B. Error

C. Alice

D. undefined

Solution

1. Step 1: Understand Axios response structure

   Axios returns a response object where the actual data is inside response.data.

2. Step 2: Access the name property

   The code logs response.data.name, which is "Alice" from the server response.

3. Final Answer:

   Alice -> Option C

4. Quick Check:

   response.data.name = Alice [OK]

Hint: Access data via response.data in Axios [OK]

Common Mistakes:

• Logging response instead of response.data
• Expecting data directly without .data
• Not handling promise with then/catch

4. Identify the error in this Axios POST request code snippet:

axios.post('https://api.example.com/login',
  { username: 'user1', password: 'pass123' }
).then(response => {
  console.log('Login successful');
}).catch(error => {
  console.log('Login failed');
});

medium

A. No error, code is correct

B. Missing await keyword for async call

C. Incorrect URL format

D. POST data should be a string, not an object

Solution

1. Step 1: Review Axios POST syntax

   Axios.post takes URL and data object as parameters, which is correct here.

2. Step 2: Check for syntax or usage errors

   The code uses promise chaining with then/catch correctly; await is optional.

3. Final Answer:

   No error, code is correct -> Option A

4. Quick Check:

   Axios.post with object data is valid [OK]

Hint: Axios.post accepts object data without await [OK]

Common Mistakes:

• Thinking await is mandatory with then/catch
• Assuming data must be JSON stringified manually
• Confusing URL format with error

5. You want to fetch user data and show a loading message while waiting. Which code snippet correctly uses Axios with React Native hooks to handle loading and errors?

hard

A. const [loading, setLoading] = useState(false);
useEffect(() => {
axios.get('/user')
.then(() => setLoading(false))
.catch(() => setLoading(false));
}, []);

B. const [loading, setLoading] = useState(false);
useEffect(() => {
axios.get('/user')
.then(() => setLoading(true))
.catch(() => setLoading(false));
}, []);

C. const [loading, setLoading] = useState(true);
useEffect(() => {
setLoading(false);
axios.get('/user')
.then(() => setLoading(true))
.catch(() => setLoading(false));
}, []);

D. const [loading, setLoading] = useState(false);
useEffect(() => {
setLoading(true);
axios.get('/user')
.then(() => setLoading(false))
.catch(() => setLoading(false));
}, []);

Solution

1. Step 1: Initialize loading state correctly

   Loading should start as false, then set to true when request starts.

2. Step 2: Set loading true before Axios call and false after response or error

   This ensures UI shows loading while waiting and hides it after.

3. Final Answer:

   Initialize loading false, set true before request, false after -> Option D

4. Quick Check:

   Loading true during request = const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); axios.get('/user') .then(() => setLoading(false)) .catch(() => setLoading(false)); }, []); [OK]

Hint: Set loading true before request, false after response [OK]

Common Mistakes:

• Starting loading as true but not setting it properly
• Setting loading true after request finishes
• Not handling loading state at all