In this blog, we will explore different ways of making API calls in React Native.
In React Native, there are multiple ways to call an API, and here, we will primarily focus on the fetch() method and Axios. Let’s dive into how each method works and when to use them.
The fetch() method is a built-in JavaScript function that returns a promise for making HTTP requests. It supports methods like GET and POST, simplifying response and error handling in React Native.
Additionally, we will discuss Axios, a popular third-party library that streamlines HTTP requests with features like interceptors and automatic JSON transformation, enhancing the developer experience.
API Calls in React Native using Fetch():-
The Fetch API provides a JavaScript interface for accessing and manipulating parts of the HTTP pipeline, such as requests and responses.
It also provides a global method fetch() that provides an easy, logical way to fetch resources asynchronously across the network.
Let’s explain it with code:-
|
1 2 3 4 5 6 7 8 9 10 11 12 |
fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'CustomHeaders': 'customHeaderValue' }, body: JSON.stringify({ 'your_key1': 'your_value1', 'your_key2': 'your_value2', }), }); |
In the fetch() method we have two parameters.
1- API URL: In my case, the URL is "https://mywebsite.com/endpoint/". This will be your API endpoint.
2- JSON Object: After the API URL, we have a JSON object that contains several keys, such as method, headers, and body.
NOTE:- The keys and API used in this example are for reference purposes only, you should replace them with your actual API endpoint and relevant keys to match your specific use case.
Method:- At the Method key, you need to define which kind of API you are executing as GET API, POST API or any other.
Headers:- At the headers key, you should define your headers. In my case, I am passing three headers: Accept, Content-Type, and CustomHeaders.
Body:- At the body key, you need to send the parameters. Since I am making a POST request, this can include parameters, so you should include the JSON data that you want to post in that key.
then():- We use the then() method as a callback. After closing the fetch() method, we call the then() method to handle the response.
In addition, Once you’ve defined your API call using the fetch() method, the next step is to execute the request and set the retrieved data in your components like flatlist etc.
Code example for API calls:-
|
1 2 3 4 5 6 7 8 9 10 11 12 |
function _callApi() { return fetch('https://mywebsite.com/endpoint/', { method: 'POST', headers: { Accept: 'application/json', 'Content-Type': 'application/json', 'CustomHeaders': 'customHeaderValue' }, body: JSON.stringify({ 'your_key1': 'your_value1', 'your_key2': 'your_value2', }), }) .then((response) => response.json()) .then((responseJson) => { return responseJson; }) .catch((error) => { console.error(error); }); } |
API Calls in React Native Using Axios
While the Fetch API is built into JavaScript and works perfectly for most use cases, many developers prefer using Axios for its simplicity and additional features.
Axios is a promise-based HTTP client that simplifies the process of making HTTP requests and handling responses.
Why Use Axios?
- Simplified Syntax: Axios provides a more straightforward syntax compared to Fetch, especially for handling request and response transformations.
- Automatic JSON Data Transformation: Axios automatically transforms JSON data, meaning you don’t have to call
response.json()as you do with Fetch. - Error Handling: Axios has better error-handling capabilities, making it easier to catch and handle errors.
- Request Cancellation: Axios supports request cancellation, which is useful in scenarios like avoiding memory leaks during component unmounts.
- Interceptors: You can set up request and response interceptors for logging, authentication, and more.
Common Use Case for Axios
Axios is particularly useful when dealing with applications that require frequent API interactions, such as:
- User Authentication: When handling login/logout requests, Axios makes it easy to manage tokens and refresh them as needed.
- Fetching and Submitting Data: In applications like dashboards or forms where data needs to be fetched, displayed, and updated frequently, Axios simplifies these processes with its intuitive API.
Here Is The Reference Video for the Api Calling:
API Calls in React Native
This is the reference video for Sign-in API calling using fetch() method.
The video will demonstrate how to implement an API call using the fetch() method, including handling responses and effectively managing user state.
Conclusion
In this blog, we explored how to make API calls in React Native using the fetch() method, which simplifies the process of communicating with remote servers.
By leveraging fetch(), we can easily perform network operations such as sending data, retrieving information, and handling responses, essential for building dynamic applications.
We also covered Axios, a popular third-party library that enhances API calls with features like interceptors and automatic JSON transformation, providing a more streamlined experience for developers.
Thank you for reading! ❤️
You can also check other blogs from here.