Axios library in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import Axios in a React Native component.

React Native

import [1] from 'axios';

Drag options to blanks, or click blank then click option'

Aaxios

BAxios

Cfetch

Dhttp

Attempts:

3 left

💡 Hint

Common Mistakes

Using uppercase 'Axios' which is not the default import name.

Confusing Axios with fetch or http.

The Axios library is imported using the name axios by convention.

2fill in blank

medium

Complete the code to make a GET request to 'https://api.example.com/data' using Axios.

React Native

axios.[1]('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  });

Drag options to blanks, or click blank then click option'

Apost

Bget

Cfetch

Drequest

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' for fetching data.

Using 'fetch' which is not an Axios method.

To fetch data, use the get method of Axios.

3fill in blank

hard

Fix the error in the Axios POST request to send JSON data.

React Native

axios.post('https://api.example.com/data', [1])
  .then(response => {
    console.log(response.data);
  });

Drag options to blanks, or click blank then click option'

A{name: 'John'}

BJSON.stringify({name: 'John'})

C'name=John'

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Passing a JSON string instead of an object.

Passing null or a plain string.

Axios automatically converts JavaScript objects to JSON, so pass the object directly.

4fill in blank

hard

Fill both blanks to handle errors in an Axios GET request.

React Native

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .[1](error => {
    console.[2](error.message);
  });

Drag options to blanks, or click blank then click option'

Acatch

Blog

Cerror

Dwarn

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'error' instead of 'catch' for error handling.

Using console.error or console.warn instead of console.log.

Use catch to handle errors and console.log to print the error message.

5fill in blank

hard

Fill all three blanks to create an Axios instance with a base URL and timeout.

React Native

const api = axios.[1]({
  baseURL: '[2]',
  [3]: 5000
});

Drag options to blanks, or click blank then click option'

Acreate

Btimeout

Chttps://api.example.com

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'create' to make an instance.

Confusing 'timeout' with 'baseURL'.

Use axios.create to make an instance, set baseURL to the API address, and timeout to limit request time.