POST HTTP-anmodning i React

Introduktion

Når vi arbejder med API'er, ønsker vi ofte at sende data til serveren til behandling. For eksempel, hvis vi har en liste over gøremål og ønsker at tilføje til den, måske gennem en formularindsendelse, bruger vi POST HTTP-anmodninger til at sende en anmodning med en nyttelast til behandling og potentiel persistens.

I denne artikel lærer vi, hvordan du udfører POST HTTP-anmodninger i React ved hjælp af to almindelige tilgange: Fetch API og Axios. Vi vil også få at vide, hvordan man gør dette i funktionelle og klassebaserede komponenter.

Ved at bruge Fetch API er det lige så nemt at sende en POST HTTP-anmodning med React som:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios giver os et elegant alternativ til at sende HTTP POST-anmodninger:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

Hvis du gerne vil lære mere om disse tilgange, og hvordan de virker – læs venligst resten af ​​guiden!

Hvad er en POST HTTP-anmodning?

Som navnet antyder, bruges POST-anmodninger til at sende data til et slutpunkt – som så typisk behandler det og gemmer det i en database. Disse data kan komme fra en formular, gemmes i et objekt eller fås på anden måde – men de konverteres typisk til en JSON-repræsentation, som REST API'et kan bruge.

Afsendelse af HTTP-anmodninger med et hvilket som helst verbum er gjort enkelt af Hent API (indbygget) og biblioteker som f.eks Axios. Fetch API er en indbygget browsermetode til at udføre HTTP-anmodninger, hvorimod Axios er en ekstern pakke, vi skal installere i vores projekt, før vi bruger.

Valget mellem disse er op til dig. Fetch API er mere omfattende og fungerer ikke med asynkrone anmodninger, men Axios er en ekstern afhængighed. Alligevel foretrækker mange at arbejde med Axios frem for Fetch API. Vi dækker begge dele.

Begge metoder har fordele og ulemper, men det er vigtigt at bemærke, at de kan håndtere standard HTTP verber – POST, GET, PUT, PATCH, DELETE.

I vores tilfælde arbejder vi med en liste over indlæg, som vi allerede har hentet fra en mock API. Vi opretter en formular, der tager titlen og brødteksten på et nyt indlæg, og når det er sendt, sender vi en POST-anmodning til den falske server til behandling:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts?_limit=5')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

Lad os nu gøre formularen funktionel, så vi kan tilføje data til postlisterne på vores hjemmeside, når formularen er indsendt.

Sådan udføres POST HTTP-anmodning i Reacts funktionelle komponent

Vi kan nu udføre HTTP-anmodninger i funktionelle komponenter takket være introduktionen af ​​hooks i React. Tidligere blev funktionelle komponenter kun brugt til at gengive brugergrænsefladen.

En funktionel komponent oprettes, når en JavaScript-funktion (enten standard eller ES6) returnerer et React element (JSX).

Frem for at bruge tilstandsobjektet i konstruktørmetoden som med klassebaserede komponenter, bruger vi nu React hooks som f.eks. useState() at gemme vores data, før de overføres til de originale data.

Sådan udføres POST HTTP-anmodning i Reacts funktionelle komponent med Fetch API

Fordi Fetch API er en indbygget browsermetode, der returnerer en Promise, vi bruger .then() , .catch() metoder til at håndtere succes og fiasko. Den accepterer også et obligatorisk argument, som er URL'en på den ressource/API, som vi ønsker at POST data i, samt et argument, der angiver HTTP-anmodningen, som i vores tilfælde er POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      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',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

I koden ovenfor har vi oprettet en metode, som vi linker til formularen, så den udløses, når der klikkes på indsend-knappen i formularen. Vi startede med at bruge e.preventDefault() for at forhindre, at siden genindlæses, når formularen indsendes, dvs sædvanligvis hvad du ønsker skal ske, men fungerer ikke så godt for vores demo:

const handleSubmit = (e) => {
   e.preventDefault();
};

Ser man på fetch() kaldet, tilføjede vi URL'en som den første obligatoriske parameter, og den anden parameter tager anmodningsmetoden (POST), den body, og header:

• body – indeholder de data, vi ønsker at sende til API-endepunktet, hvilket vi skal strengere, hvilket gør det til en tekstbaseret JSON-repræsentation.
• header – angiver indholdstypen, som i vores tilfælde er application/json, da vores nyttelast er repræsenteret som en JSON-streng:

const handleSubmit = (e) => {
   e.preventDefault();
   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',
      },
   })
};

Endelig, fordi denne metode returnerer en Promise, trækker vi JSON-indholdet ud af det (serverens svar), opdaterede posts stat for at inkludere de nye data.

For at håndtere fejl brugte vi også .catch() metode:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Sådan udføres POST HTTP-anmodning i Reacts funktionelle komponent med Axios

Vi forklarede, hvordan man udfører POST-anmodninger med Fetch API i det foregående afsnit. Lad os nu ændre handleSubmit() metode og udføre POST-anmodninger med Axios i stedet for.

Axios er et HTTP-klientbibliotek, der bruger løfter til at gøre det nemt at sende asynkrone HTTP-anmodninger til REST-endepunkter. Fordi det er et eksternt bibliotek, skal vi først installere det i vores projekt ved at køre følgende kommando i biblioteket til vores projekt:

$ npm install axios

Når vi har installeret Axios, kan vi fortsætte med at udføre vores POST-anmodning:

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Ser man på koden ovenfor, er det langt nemmere og kræver mindre syntaks end Fetch API, da vi ikke længere behøver at konvertere til JSON, arbejde med headers og endda strenge vores data. Denne kedelplade er abstraheret væk af Axios.

Sådan udføres POST HTTP-anmodning i Reacts klassekomponent

POST-anmodninger i klassekomponenter håndteres anderledes end i funktionelle komponenter, fordi vi ikke længere bruger React-kroge og i stedet bruger state objekt.

En klassekomponent er en ES6-klasse, der returnerer JSX og kræver React-udvidelser.

Sådan udføres POST HTTP-anmodning i Reacts klassekomponent med Fetch API

Anmodningen minder meget om funktionelle komponenters. De eneste områder, vi ville finde nogle forskelle, er, når vi gemmer data i state og ved brug state værdier, fordi vi ikke længere bruger useState() krog:

import React, { Component } from 'react';

class App extends Component {

   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }
   
   

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

Denne gang erklærer vi ikke længere metoder med const søgeord. Præfiks dem i stedet med this. Denne metode vil blive udløst, når formularens indsend-knap klikkes. Da det er en form, startede vi med at bruge e.preventDefault() for at forhindre, at siden genindlæses, når formularen indsendes:

handleSubmit = (e) => {
   e.preventDefault();
};

Ligesom vi lærte tidligere, tager Fetch API'en to parametre. Den ene er URL'en, mens den anden indeholder muligheder som anmodningsmetoden (POST), body, som er den info, vi poster (skal være strenge), og derefter headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Ved at vide, at dette er et løfte, kan vi nu vedhæfte .then() metode til at håndtere succes og .catch() metode til at håndtere en situation, hvis der er en fejl eller fejl i HTTP-anmodningen.

Sådan udføres POST HTTP-anmodning i Reacts klassekomponent med Axios

Vi har set, hvordan vi skal præstere POST HTTP-anmodninger i klassebaserede komponenter. Dette minder meget om Axios, da alt vi skal gøre er at installere Axios og derefter erstatte handleSubmit() metode, så vi bruger nu Axios i stedet for Fetch API:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

Konklusion

I denne vejledning lærte vi, hvordan man bruger de to primære metoder i React til at udføre POST HTTP-anmodninger. Vi så også, hvordan de kunne gøres i både funktionelle og klassebaserede komponenter, så denne artikel kan tjene os, uanset hvad der bruges i vores projekt.