Updated 22 October 2024
In React-native we don’t need to import any third-party library to make API network calls like Retrofit or Volly. In React-native we use the fetch() method to perform network call operations.
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.
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 “https://mywebsite.com/endpoint/” This URL is gonna be my API URL.
2- JSON Object:- After the API URL we have a JSON object which contains several keys like method, headers, and body.
NOTE–> Please make sure that the key’s name must be the same as it is written in the code. Because it is predefined keys.
method:- At 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 need to define your headers in my case I am passing three headers Accept, Content-type, and CustomHeaders.
body:- At body key, you need to send the params in that key. Like I am hitting a POST request so it can contain params also so in that key put the JSON data that you want to Post.
After that, you need to call another method to get the response.
then():- We use then() method an call back. When we close the fetch() method brackets we call then() method to get 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.
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); }); } |
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.
response.json()
as you do with Fetch.Axios is particularly useful when dealing with applications that require frequent API interactions, such as:
This is the reference video for Sign-in API calling.
In the video, you will learn how to implement API requests for user authentication, ensuring a smooth and secure sign-in process in your React Native application.
The tutorial covers everything from making the API call using the fetch()
method to handling responses and managing user state effectively.
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, which are essential for building dynamic applications.
The provided code snippet illustrates a straightforward implementation, showcasing how to manage requests, parse JSON responses, and handle errors effectively.
Thank you for reading! ❤️
You can also check other blogs from here.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.