POST HTTP-förfrågan i React

Beskrivning

När vi arbetar med API:er vill vi ofta skicka data till servern för bearbetning. Till exempel, om vi har en lista med att göra och vill lägga till den, kanske genom en formulärinlämning, använder vi POST HTTP-förfrågningar för att skicka en förfrågan med en nyttolast för bearbetning och potentiell persistens.

I den här artikeln kommer vi att lära oss hur man utför POST HTTP-förfrågningar i React med två vanliga metoder: Fetch API och Axios. Vi kommer också att få veta hur man gör detta i funktionella och klassbaserade komponenter.

Genom att använda Fetch API är det lika enkelt att skicka en POST HTTP-förfrågan 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 ger oss ett elegant alternativ för att skicka HTTP POST-förfrågningar:

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

Om du vill lära dig mer om dessa tillvägagångssätt och hur de fungerar – läs resten av guiden!

Vad är en POST HTTP-förfrågan?

Som namnet antyder används POST-förfrågningar för att skicka data till en slutpunkt – som sedan vanligtvis bearbetar den och sparar den i en databas. Denna data kan komma från ett formulär, sparas i ett objekt eller erhållas på annat sätt – men den omvandlas vanligtvis till en JSON-representation för REST API att konsumera.

Att skicka HTTP-förfrågningar med vilket verb som helst görs enkelt av Fetch API (inbyggd) och bibliotek som t.ex Axios. Fetch API är en inbyggd webbläsarmetod för att utföra HTTP-förfrågningar, medan Axios är ett externt paket som vi måste installera i vårt projekt innan vi använder det.

Att välja mellan dessa är upp till dig. Fetch API är mer omfattande och fungerar inte med asynkrona förfrågningar, men Axios är ett externt beroende. Trots det – många föredrar att arbeta med Axios snarare än Fetch API. Vi täcker båda.

Båda metoderna har fördelar och nackdelar, men det är viktigt att notera att de kan hantera vanliga HTTP-verb – POST, GET, PUT, PATCH, DELETE.

I vårt fall kommer vi att arbeta en lista över inlägg som vi redan har hämtat från ett skenbart API. Vi skapar ett formulär som tar titeln och texten på ett nytt inlägg, och när det väl har skickats skickar vi en POST-begäran till skenservern för bearbetning:

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;

Låt oss nu göra formuläret funktionellt så att vi kan lägga till data till inläggslistorna på vår webbplats när formuläret har skickats in.

Hur man utför POST HTTP-förfrågan i Reacts funktionella komponent

Vi kan nu utföra HTTP-förfrågningar i funktionella komponenter tack vare införandet av krokar i React. Tidigare användes funktionella komponenter endast för att rendera UI.

En funktionell komponent skapas när en JavaScript-funktion (antingen standard eller ES6) returnerar ett React-element (JSX).

Istället för att använda tillståndsobjektet i konstruktormetoden som med klassbaserade komponenter använder vi nu React hooks som t.ex. useState() att lagra våra uppgifter innan de skickas till originaldata.

Hur man utför POST HTTP-förfrågan i Reacts funktionella komponent med Fetch API

Eftersom Fetch API är en inbyggd webbläsarmetod som returnerar en Promise, vi använder .then() och .catch() metoder för att hantera framgång och misslyckande. Den accepterar också ett obligatoriskt argument, vilket är URL:en till resursen/API som vi vill POSTA data i, samt ett argument som indikerar HTTP-förfrågan, vilket i vårt fall är 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 ovan skapade vi en metod som vi länkar till formuläret så att det utlöses när formulärets skicka-knapp klickas. Vi började med att använda e.preventDefault() för att förhindra att sidan laddas om när formuläret skickas, dvs vanligen vad du vill ska hända, men som inte fungerar lika bra för vår demo:

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

Om man tittar på fetch() anrop, lade vi till URL:en som den första obligatoriska parametern, och den andra parametern tar in förfrågningsmetoden (POST), den body, Och den header:

• body – innehåller de data vi vill skicka till API-slutpunkten, vilket vi måste stränga, vilket gör den till en textbaserad JSON-representation.
• header – anger innehållstypen, vilket i vårt fall är application/json, eftersom vår nyttolast representeras som en JSON-sträng:

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

Slutligen, eftersom denna metod returnerar en Promise, extraherar vi JSON-innehållet ur det (serverns svar), uppdaterade posts stat att inkludera de nya uppgifterna.

För att hantera fel använde vi också .catch() metod:

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

Hur man utför POST HTTP-förfrågan i Reacts funktionella komponent med Axios

Vi förklarade hur man utför POST-förfrågningar med Fetch API i föregående avsnitt. Låt oss nu ändra handleSubmit() metod och utför POST-förfrågningar med Axios istället.

Axios är ett HTTP-klientbibliotek som använder löften för att göra det enkelt att skicka asynkrona HTTP-förfrågningar till REST-slutpunkter. Eftersom det är ett externt bibliotek måste vi först installera det i vårt projekt genom att köra följande kommando i katalogen för vårt projekt:

$ npm install axios

När vi väl har installerat Axios kan vi fortsätta att utföra vår POST-begäran:

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

Om man tittar på koden ovan är det mycket enklare och kräver mindre syntax än Fetch API, eftersom vi inte längre behöver konvertera till JSON, arbeta med rubriker och till och med strängifiera vår data. Den här plattan är abstraherad av Axios.

Hur man utför POST HTTP-förfrågan i Reacts klasskomponent

POST-förfrågningar i klasskomponenter hanteras annorlunda än i funktionella komponenter eftersom vi inte längre använder React-krokar och istället använder state objekt.

En klasskomponent är en ES6-klass som returnerar JSX och kräver React-tillägg.

Hur man utför POST HTTP-förfrågan i Reacts klasskomponent med Fetch API

Begäran är mycket lik den för funktionella komponenter. De enda områden vi skulle hitta vissa skillnader är när vi lagrar data i state och vid användning state värden eftersom vi inte längre använder 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;

Den här gången deklarerar vi inte längre metoder med const nyckelord. Prefix dem istället med this. Denna metod kommer att utlösas när formulärets skicka-knapp klickas. Eftersom det är en form började vi med att använda e.preventDefault() för att förhindra att sidan laddas om när formuläret skickas:

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

Precis som vi lärde oss tidigare tar Fetch API två parametrar. Den ena är URL:en, medan den andra innehåller alternativ som förfrågningsmetoden (POST), body, som är informationen vi lägger upp (måste strängsättas), och sedan 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',
      },
   })
};

Att veta att detta är ett löfte kan vi nu bifoga .then() metod för att hantera framgång och .catch() metod för att hantera en situation om det finns ett fel eller fel i HTTP-begäran.

Hur man utför POST HTTP-förfrågan i Reacts klasskomponent med Axios

Vi har sett hur man presterar POST HTTP-förfrågningar i klassbaserade komponenter. Detta är väldigt likt Axios, eftersom allt vi behöver göra är att installera Axios och sedan byta ut handleSubmit() metod, så vi använder nu Axios istället för 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));
};

Slutsats

I den här guiden lärde vi oss hur man använder de två primära metoderna i React för att utföra POST HTTP-förfrågningar. Vi såg också hur de kunde göras i både funktionella och klassbaserade komponenter, så den här artikeln kan tjäna oss oavsett vad som används i vårt projekt.