POST HTTP-forespørsel i React

Introduksjon

Når vi jobber med APIer ønsker vi ofte å sende data til serveren for behandling. For eksempel, hvis vi har en liste over gjøremål og ønsker å legge til den, kanskje gjennom en skjemainnsending, bruker vi POST HTTP-forespørsler til å sende en forespørsel med nyttelast for behandling og potensiell utholdenhet.

I denne artikkelen vil vi lære hvordan du utfører POST HTTP-forespørsler i React ved å bruke to vanlige tilnærminger: Fetch API og Axios. Vi vil også bli kjent med hvordan dette gjøres i funksjonelle og klassebaserte komponenter.

Ved å bruke Fetch API er det like enkelt å sende en POST HTTP-forespørsel 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 gir oss et elegant alternativ for å sende HTTP POST-forespørsler:

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

Hvis du vil lære mer om disse tilnærmingene og hvordan de fungerer – les resten av veiledningen!

Hva er en POST HTTP-forespørsel?

Som navnet tilsier, brukes POST-forespørsler til å legge inn data til et endepunkt - som deretter vanligvis behandler det og lagrer det i en database. Disse dataene kan komme fra et skjema, lagres i et objekt eller innhentes på en annen måte – men de konverteres vanligvis til en JSON-representasjon som REST API kan bruke.

Det er enkelt å sende HTTP-forespørsler med et hvilket som helst verb Hent API (innebygd) og biblioteker som f.eks Axios. Fetch API er en innebygd nettlesermetode for å utføre HTTP-forespørsler, mens Axios er en ekstern pakke vi må installere i prosjektet vårt før bruk.

Å velge mellom disse er opp til deg. Fetch API er mer omfattende og fungerer ikke med asynkrone forespørsler, men Axios er en ekstern avhengighet. Likevel – mange foretrekker å jobbe med Axios i stedet for Fetch API. Vi dekker begge deler.

Begge metodene har fordeler og ulemper, men det er viktig å merke seg at de kan håndtere standard HTTP-verb – POST, GET, PUT, PATCH, DELETE.

I vårt tilfelle vil vi jobbe med en liste over innlegg som vi allerede har hentet fra en mock API. Vi lager et skjema som tar tittelen og brødteksten til et nytt innlegg, og når det er sendt inn, sender vi en POST-forespørsel til den falske serveren for 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;

La oss nå gjøre skjemaet funksjonelt slik at vi kan legge til data i postlistene på nettstedet vårt når skjemaet er sendt inn.

Slik utfører du POST HTTP-forespørsel i Reacts funksjonelle komponent

Vi kan nå utføre HTTP-forespørsler i funksjonelle komponenter takket være introduksjonen av kroker i React. Tidligere ble funksjonelle komponenter bare brukt for å gjengi brukergrensesnitt.

En funksjonell komponent opprettes når en JavaScript-funksjon (enten standard eller ES6) returnerer et React-element (JSX).

I stedet for å bruke tilstandsobjektet i konstruktørmetoden som med klassebaserte komponenter, bruker vi nå React hooks som f.eks. useState() å lagre dataene våre før de overføres til de originale dataene.

Slik utfører du POST HTTP-forespørsel i Reacts funksjonelle komponent med Fetch API

Fordi Fetch API er en innebygd nettlesermetode som returnerer en Promise, vi bruker .then() og .catch() metoder for å håndtere suksess og fiasko. Den godtar også et obligatorisk argument, som er URL-en til ressursen/API-en som vi ønsker å POSTE data i, samt et argument som indikerer HTTP-forespørselen, som i vårt tilfelle 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 laget en metode som vi kobler til skjemaet slik at det utløses når send inn-knappen på skjemaet klikkes. Vi startet med å bruke e.preventDefault() for å forhindre at siden lastes inn på nytt når du sender inn skjemaet, dvs vanligvis det du vil skal skje, men som ikke fungerer like bra for vår demo:

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

Ser på fetch() kall, la vi til URL-en som den første obligatoriske parameteren, og den andre parameteren tar inn forespørselsmetoden (POST), den body, og header:

• body – inneholder dataene vi ønsker å sende til API-endepunktet, som vi må strenge, og gjør den om til en tekstbasert JSON-representasjon.
• header – spesifiserer innholdstypen, som i vårt tilfelle er application/json, siden nyttelasten vår er representert 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',
      },
   })
};

Til slutt, fordi denne metoden returnerer en Promise, henter vi JSON-innholdet ut av det (svar fra serveren), oppdaterte posts stat for å inkludere de nye dataene.

For å håndtere feil brukte 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);
      });
};

Slik utfører du POST HTTP-forespørsel i Reacts funksjonelle komponent med Axios

Vi forklarte hvordan du utfører POST-forespørsler med Fetch API i forrige del. La oss nå endre handleSubmit() metode og utføre POST-forespørsler med Axios i stedet.

Axios er et HTTP-klientbibliotek som bruker løfter for å gjøre det enkelt å sende asynkrone HTTP-forespørsler til REST-endepunkter. Fordi det er et eksternt bibliotek, må vi først installere det i prosjektet vårt ved å kjøre følgende kommando i katalogen til prosjektet vårt:

$ npm install axios

Når vi har installert Axios, kan vi fortsette å utføre POST-forespørselen vår:

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);
      });
};

Når vi ser på koden ovenfor, er det langt enklere og krever mindre syntaks enn Fetch API, siden vi ikke lenger trenger å konvertere til JSON, jobbe med overskrifter og til og med strengere dataene våre. Denne kjeleplaten er abstrahert bort av Axios.

Slik utfører du POST HTTP-forespørsel i Reacts klassekomponent

POST-forespørsler i klassekomponenter håndteres annerledes enn i funksjonelle komponenter fordi vi ikke lenger bruker React-kroker og i stedet bruker state gjenstand.

En klassekomponent er en ES6-klasse som returnerer JSX og krever React-utvidelser.

Slik utfører du POST HTTP-forespørsel i Reacts klassekomponent med Fetch API

Forespørselen er veldig lik den for funksjonelle komponenter. De eneste områdene vi vil finne noen forskjeller er når du lagrer data i state og ved bruk state verdier fordi vi ikke lenger bruker useState() krok:

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 gangen erklærer vi ikke lenger metoder med const nøkkelord. Prefiks dem i stedet med this. Denne metoden utløses når skjemaets send-knapp klikkes. Siden det er et skjema, begynte vi med å bruke e.preventDefault() for å forhindre at siden lastes inn på nytt når skjemaet sendes inn:

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

Akkurat som vi lærte tidligere, tar Fetch API inn to parametere. Den ene er URL-en, mens den andre inneholder alternativer som forespørselsmetoden (POST), body, som er informasjonen vi legger ut (må være strenger), og deretter 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',
      },
   })
};

Når vi vet at dette er et løfte, kan vi nå legge ved .then() metode for å håndtere suksess og .catch() metode for å håndtere en situasjon hvis det er en feil eller feil i HTTP-forespørselen.

Hvordan utføre POST HTTP-forespørsel i Reacts klassekomponent med Axios

Vi har sett hvordan vi skal prestere POST HTTP-forespørsler i klassebaserte komponenter. Dette er veldig likt Axios, da alt vi trenger å gjøre er å installere Axios og deretter erstatte handleSubmit() metode, så vi bruker nå 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));
};

konklusjonen

I denne veiledningen lærte vi hvordan du bruker de to primære metodene i React for å utføre POST HTTP-forespørsler. Vi så også hvordan de kunne gjøres i både funksjonelle og klassebaserte komponenter, så denne artikkelen kan tjene oss uavhengig av hva som brukes i prosjektet vårt.