Breaking News: Grepper is joining You.com. Read the official announcement!

write HTTPClient code to connect react app with API gateway

Pragya Keshap answered on February 10, 2023 Popularity 1/10 Helpfulness 1/10

answer write HTTPClient code to connect react app with API gateway

write HTTPClient code to connect react app with API gateway

Comment

Then comes the chaining. We can avoid the .then() chaining by using Async/await and write more readable code.

To use async/await, first call async in the function. Then when making a request and expecting a response, add the await syntax in front of the function to wait until the promise settles with the result.

import React, { useState, useEffect } from 'react';

const App = () => {
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   const [posts, setPosts] = useState([]);

   // GET with fetch API
   useEffect(() => {
      const fetchPost = async () => {
         const response = await fetch(
            'https://jsonplaceholder.typicode.com/posts?_limit=10'
         );
         const data = await response.json();
         console.log(data);
         setPosts(data);
      };
      fetchPost();
   }, []);

   // Delete with fetchAPI
   const deletePost = async (id) => {
      let response = await fetch(
         `https://jsonplaceholder.typicode.com/posts/${id}`,
         {
            method: 'DELETE',
         }
      );
      if (response.status === 200) {
         setPosts(
            posts.filter((post) => {
               return post.id !== id;
            })
         );
      } else {
         return;
      }
   };

   // Post with fetchAPI
   const addPosts = async (title, body) => {
      let response = await fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      });
      let data = await response.json();
      setPosts((posts) => [data, ...posts]);
      setTitle('');
      setBody('');
   };

   const handleSubmit = (e) => {
      e.preventDefault();
      addPosts(title, body);
   };

   return (
      // ...
   );
};

export default App;

https://www.freecodecamp.org/news/how-to-consume-rest-apis-in-react/

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: api-gateway connect httpclient javascript

Link to this answer
Share Copy Link

Contributed on Feb 10 2023

Pragya Keshap

0 Answers Avg Quality 2/10

write HTTPClient code to connect react app with API gateway

Contents

More Related Answers

write HTTPClient code to connect react app with API gateway

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.