onlinecode

JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await Example

JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await Example

In this post we will give you information about JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await Example. Hear we will give you detail about JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await ExampleAnd how to use it also give you demo for it if it is necessary.

The Fetch API is a modern browser API for JavaScript that allows you to fetch resources from servers.

Unlike the old XMLHttpRequest interface, Fetch makes use of JavaScript Promises to handle the asynchronous nature of HTTP requests.

This greatly simplifies your code since you can avoid writing callback hell and can be further used with the async-await syntax to get rid of the then() callback and write your asynchronous code as syncronous code.

In this tutorial and example, we’ll see how to use Fetch to send GET requests inside a Reacts.js example application. We’ll also see how to use the Async/Await syntax to avoid using JavaScript Promises in your code.

How to use the Fetch API?

You can use the fetch() API in modern web browsers to fetch data from remote servers and send HTTP requests to REST API servers.

The fetch() method takes, as a first parameter, the URL of the resource and an optional options object.

By default, the fetch() API makes a GET request. For example:

fetch(resourceURI).then(res=>{// Here you can process the response data}).catch(err=>{// Here you can handle request errors if any});

Getting Data with Fetch & React Example

Let’s see now see an example of fetching data with the fetch() method. We’ll use the GitHub API to get a list of users and we will use React.js to render the fetched users.

Open the App.js file and start by adding the following imports and defining a constant which holds our API endoint:

importReact,{Component}from"react";import{render}from"react-dom";import"./style.css";constapiUrl="https://api.github.com/users";

Next, inside the App() function, define a state variables for holding data after fetching it from the endpoint:

functionApp(){const[items,setItems]=React.useState([]);

Next, let’s call the Fetch API to get a list of users inside the useEffect() hook:

functionApp(){const[items,setItems]=React.useState([]);React.useEffect(()=>{asyncfunctionfetchData(){vardata=awaitfetch(apiUrl).then(res=>{returnres.json();});setItems(data);console.log(data);}fetchData();},[]);

The fetch() method returns a promise that calls the then() method with response object when fulfilled. The response object has several methods to handle the response the way we want to do. Here are few of these methods:

  • json() — Resolves the promise with a JSON object
  • text() — Resolves the promise with plain text
  • blob() — Resolves the promise with a Blob object
  • formData() — Resolves the promises with a FormData object

Calling any of the above methods return a new promise so we can use the await keyword to wait for the promise to resolve inside an async function defined using the async keyword.

Next, after sending a GET request to fetch data, let’s iterate over the returned data and display it using the following code:

return(<divclass="container">{items.map(item=>(<divclass="card"><imgsrc={item.avatar_url}/><divclass="card-body">{item.login}</div></div>))};</div>);}

And the full code of our Fetch request is the following:

importReact,{Component}from"react";import{render}from"react-dom";import"./style.css";constapiUrl="https://api.github.com/users";functionApp(){const[items,setItems]=React.useState([]);React.useEffect(()=>{asyncfunctionfetchData(){vardata=awaitfetch(apiUrl).then(res=>{returnres.json();});//console.log(data);setItems(data);console.log(data);}fetchData();},[]);return(<divclass="container">{items.map(item=>(<divclass="card"><imgsrc={item.avatar_url}/><divclass="card-body">{item.login}</div></div>))};</div>);}render(<App/>,document.getElementById("root"));

This is the full example on Stackblitz.

Conclusion

In this tutorial, we’ve seen by example how to send GET requests with Fetch in JavaScript and React.js. We’ve also seen how to use the Async/Await syntax with Fetch to avoid using JavaScript Promises.


Hope this code and post will helped you for implement JavaScript Fetch Tutorial: Send HTTP Requests With React.JS and Async-Await Example. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Exit mobile version