How to Use HTTP GET Method in React JS

In this article, we are going to learn about HTTP Get Method in React JS. Basically, we need to use HTTP requests to fetch and use APIs in general, so in many react applications we make use of these HTTP methods to get data from APIs. So learning about HTTP methods are essential. The five commonplace HTTP request methods are GET, PUT, POST, PATCH, and DELETE. These methods allow us to perform standard CRUD operations.

Today we will see about HTTP Get method in react JS, So let’s jump into it.

What is HTTP Get Method?

Get method is an HTTP request method which aims to get resources from a server (here specifically API). It is a basic method which is going to help us to get data from server.

We can use Basically two methods to work with get method: (1)fetch, (2)axios.

HTTP Get Method in React JS: Fetch()

The fetch() method is one of the common method to use in the ReactJS. In react, the fetch method takes one mandatory argument, which is here a URL, or an API URL. Also, its default value is Get, so we don’t need to mention it manually. Remember, you can use this fetch method directly, without installing any other packages.

Fetch promises to give data, so that we can handle then() method and catch() method to work with the data. Here response.json() is used to convert raw data to JSON formatted data.

fetch('https://api.example.com/data')
 .then(response => response.json())
 .then(data => {
 // Do something with the data
 })
 .catch(error => {
 // Handle the error
 });

Here is a basic example for the fetch method, As you can see we called the API in useEffect which aims to call the API before application render. Also, we used a useState to store data after every successful call. To store data from API call, we ideally use useState hooks.

1import { useState, useEffect } from 'react';
2const App = () => {
3 const [posts, setPosts] = useState([]);
4 useEffect(() => {
5 fetch('https://jsonplaceholder.typicode.com/posts')
6 .then((res) => res.json())
7 .then((data) => {
8 console.log(data);
9 setPosts(data);
10 })
11 .catch((err) => {
12 console.log(err.message);
13 });
14 }, []);
15 return (
16 // ... consume here
17 );
18};

HTTP Get Method in React JS: axios()

Axios is another way to work with get method, It looks cleaner than fetch() method, right?  Axios is a promise-based HTTP client library that makes it simple to send asynchronous HTTP requests to REST endpoints.

Axios is an external library, or you can say external package. So you need to install it in your React application using this line of code in terminal or cmd.

npm install axios

To use get method in axios, we use axios.get() which takes a mandatory argument (URL). Axios is pretty different than fetch, because axios provides more powerful and flexible APIs than fetch method.

import axios from 'axios';
axios.get('https://api.example.com/data')
 .then(response => {
 // Do something with the data
 })
 .catch(error => {
 // Handle the error
 });

HTTP Get Method in React JS: Functional Component and Class Component

To use get a method in a functional component, we should call the APIs in the useEffect hook, ideally.

1import { useState, useEffect } from 'react';
2const App = () => {
3 const [posts, setPosts] = useState([]);
4 useEffect(() => {
5 fetch('https://jsonplaceholder.typicode.com/posts')
6 .then((res) => res.json())
7 .then((data) => {
8 console.log(data);
9 setPosts(data);
10 })
11 .catch((err) => {
12 console.log(err.message);
13 });
14 }, []);
15 return (
16 // ... consume here
17 );
18};

Also, to use get method in the class component, we make API calls in the componentDidMount() method, ideally. Fetch and axios methods will be remained same in class components.

1import React, { Component } from 'react';
2class App extends Component {
3 constructor(props) {
4 super(props);
5 this.state = {
6 posts: [],
7 };
8 }
9 componentDidMount() {
10 fetch('https://jsonplaceholder.typicode.com/posts')
11 .then((response) => response.json())
12 .then((data) => this.setState({ posts: data }))
13 .catch((error) => console.log(error));
14 }
15 render() {
16 const { posts } = this.state;
17 return (
18 // ... 
19 );
20 }
21}

HTTP Get Method in React JS: Async/await

Async/await method is not a different way to get data from API, but you can say it is the way to use fetch and axios method. Here are basic examples:

1import React, { useState, useEffect } from 'react';
2function ExampleComponent() {
3 const [data, setData] = useState(null);
4 useEffect(() => {
5 async function fetchData() {
6 try {
7 const response = await fetch('https://api.example.com/data');
8 const data = await response.json();
9 setData(data);
10 } catch (error) {
11 console.error(error);
12 }
13 }
14 fetchData();
15 }, []);
16 return (
17 <div>
18 {data ? <p>{data.example}</p> : <p>Loading...</p>}
19 </div>
20 );
21}
22export default ExampleComponent;
23

1import React, { useState, useEffect } from 'react';
2import axios from 'axios';
3function ExampleComponent() {
4 const [data, setData] = useState(null);
5 useEffect(() => {
6 async function fetchData() {
7 try {
8 const response = await axios.get('https://api.example.com/data');
9 setData(response.data);
10 } catch (error) {
11 console.error(error);
12 }
13 }
14 fetchData();
15 }, []);
16 return (
17 <div>
18 {data ? <p>{data.example}</p> : <p>Loading...</p>}
19 </div>
20 );
21}
22export default ExampleComponent;
23

You may Also like:

• How to Make E-commerce Product Card Using ReactJS
• How to Make Image Slider In React
• How to Make QR-Code Generator in React
• How to Make Quote Generator in React