How to Use Axios to Quickly Connect to an API in Your React Native Application
So you’ve built out the front-end of your React Native application. You’ve got your components made, your screens look great, you’ve added some animations to make it look sleek. Now you might have to connect to some API in order to populate the app with data, provide user authentication and more. But what can you do from here? That’s where the popular Javascript library Axios can help.
What is Axios
In simple English, Axios is a popular Javascript library that helps developers make requests to some backend API. Developers can use Axios to send HTTP requests and receive HTTP responses. If you’ve thought about connecting to an API, you’ll most certainly need to communicate with the API using the HTTP(S) protocol.
How to Use Axios in React Native
In order to use Axios, you can use the following steps to make sure that Axios is properly configured and working how you want it to work:
1. Install Axios using NPM or Expo
2. Configuring Base Parameters
3. Verifying API Works
4. Using GET and POST Requests
Let’s dive right in.
1. Install Axios using NPM or Expo
This part is pretty straightforward. Using Terminal or Command Prompt, navigate to the root directory of your React Native application. From there, install the Axios library into your React Native application by using the following command:
If you are not using Expo:npm install --save axios
If you are using Expo:expo install axios
This will install the Axios library into your React Native application.
2. Configuring Base Parameters
You can have multiple instances of Axios setup with base parameters. This allows you to define multiple API instances if needed. For example, if you wanted to connect to the Twitter API, you can create an Axios instance for that and export it to use throughout your React Native application.
You can create an instance and export it with the following code:
export const twitterAPI = axios.create({
baseURL: 'https://api.twitter.com/1.1/',
timeout: 1000
});
3. Verifying the API Works
If you’re using an API that’s backed by a community or a company, you can skip this step, however, if you’ve developed your own API, it’s wise to first test it out and make sure everything is functioning how it should.
For testing your API, you can spin up a local web server using an application like XAMPP that can host your API. From there, you can use a tool such as Postman to send test GET and POST requests to your API. Make sure that nothing weird is happening.
This is an important step because if you don’t test your API using a tool like Postman, it can become a headache to debug using Axios’s error object. It’s just easier to do it with a tool like Postman.
4. Using GET and POST Requests
Now that you’ve created an instance of Axios, you can re-use it wherever in your project to send GET and POST requests. However, if you decide not to create an instance, you can still use Axios functions.
Since Axios is a promise-based HTTP client, it’s good to know what that means so you can use Axios to its fullest potential.
If you don’t understand what a Promise is, it’s basically just a way for a function to represent the eventual completion or failure of an asynchronous task. Remember, when you’re calling an API, you don’t know how long it will take to get back a response, so the code doesn’t necessarily run line by line. The code is no longer synchronous. So we use Promise objects to execute some callback function when the API returns a response.
An easy way to visualize Promises and callbacks is to think of some friend. You’ve made them a promise to do something. They’re now waiting on you to execute on whatever they’ve asked you to do, however, in the meantime, your friend can keep doing whatever it is they’re doing. Once you’re done executing the task, you give your friend a “call back” and give them a response.
For a GET request, much like jQuery’s AJAX, you’d have to use the axios.get() method. In order to get the response of the GET request, you have to append the .then() method which acts upon the Promise object that .get() creates.
Below is an example of how I used Axios in my latest project to fetch some data:
Note that you can return another Axios GET request followed by another using something called “chaining”. So if you wanted to call your API multiple times in some order, within your .then() function, you can return another Axios GET request and append another .then() function to your chain. Below is an example of how I used chaining in my latest project:
Note that within the first .then() callback, I returned another Axios GET request and I simply appended another .then() callback to the original request code.
As for POST requests, it’s very similar, the only difference is that you’re not passing in the parameters through the URL, rather passing in the parameters with the Axios POST request. Below is an example of how I used an Axios POST request in my latest project:
If you don’t understand what dispatch() is in the above code, don’t worry about it, that’s for Redux. Note that I passed in the params object into the Axios POST request.
Conclusion
That’s pretty much the basic rundown of how to get started with using Axios to connect to an API with React Native. There are many other HTTP requests that you can make using Axios that I did not cover otherwise this post would become too long and redundant. If you’re interested in checking out the other functions you can use, check out the Axios documentation.
There are many other features from Axios that you can use as well, which I shall cover in other posts. But to give you a preview, you can use something called an interceptor with Axios that allows you to run some code before the .then() or .catch() callback functions are executed.
Get Even More From Me!
If you like how I explained Axios or like my practical style, consider subscribing to the “Practical Web Development” newsletter where I go over many other web development concepts in a practical manner.
