How To Managing API Requests In React Native Using Axios

APIs can make your life a whole lot easier. With an API, you can send requests to other services and get responses without having to build those requests and responses yourself. But building an API isn’t as simple as it sounds. It requires careful planning, testing, and debugging. If you’re building an API for the first time, it can feel like an impossible mountain to climb. That’s where APIs like axios come in. It has a great API and lots of helpful features. Here in this article you’ll understand how to use axios to manage API requests in your React Native app.

What is AXIOS?

Axios is one of the easiest HTTP clients to learn and use. Making an API request is as simple as passing a configuration object to Axios or invoking the appropriate method with the necessary arguments. You will learn the basics of Axios in this section.

Configuring Axios

Type following command on terminal window to install Axios:

NPM Install Axios

How to make requests to an API using Axios

Making a call to an API using Axios, you can pass a configuration object to Axios or invoke a method for the corresponding CRUD operations.

For example, you can make a GET request to the /api/users endpoint in one of the following two ways:

import axios from 'axios';

constbaseUrl = 'https://reqres.in';

// Passing configuration object to axios

axios({

method: 'get',

url: `${baseUrl}/api/users/1`,

}).then((response) => {

console.log("<<<<<< Passing configuration object to axios >>>>>>", response.data.data);

});

 

// Invoking get method to perform a GET request

axios.get(`${baseUrl}/api/users/1`).then((response) => {

console.log("<<<<<< Invoking get method to perform a GET request >>>>>>", response.data.data);

});

 

There are several other fields such as baseURL, transformRequest, transformResponse, and headers, among others, which you can include in the configuration object you pass to Axios.

 

 Read More on Managing API Requests In React Native App