Opublikuj żądanie HTTP w React

Wprowadzenie

Podczas pracy z API często chcemy wysyłać dane na serwer w celu przetworzenia. Na przykład, jeśli mamy listę zadań do wykonania i chcemy ją dodać, być może poprzez przesłanie formularza, używamy żądań POST HTTP do wysłania żądania z ładunkiem do przetworzenia i potencjalnego utrwalenia.

W tym artykule dowiemy się, jak wykonywać żądania POST HTTP w React przy użyciu dwóch powszechnych podejść: Fetch API i Axios. Dowiemy się również, jak to zrobić w komponentach funkcjonalnych i klasowych.

Korzystając z Fetch API, wysyłanie żądania POST HTTP za pomocą React jest tak proste, jak:

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 zapewnia nam elegancką alternatywę do wysyłania żądań HTTP POST:

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

Jeśli chcesz dowiedzieć się więcej o tych podejściach i ich działaniu – przeczytaj resztę przewodnika!

Co to jest żądanie POST HTTP?

Jak sama nazwa wskazuje, żądania POST są używane do wysyłania danych do punktu końcowego – który następnie zazwyczaj je przetwarza i zapisuje w bazie danych. Te dane mogą pochodzić z formularza, zostać zapisane w obiekcie lub uzyskane w inny sposób — ale zazwyczaj są konwertowane na reprezentację JSON do wykorzystania przez interfejs API REST.

Wysyłanie żądań HTTP z dowolnym czasownikiem jest proste dzięki Fetch API (wbudowane) oraz biblioteki takie jak Axios. Fetch API to wbudowana w przeglądarkę metoda wykonywania żądań HTTP, podczas gdy Axios to zewnętrzny pakiet, który musimy zainstalować w naszym projekcie przed użyciem.

Wybór między nimi zależy od Ciebie. Interfejs API Fetch jest bardziej szczegółowy i nie działa z żądaniami asynchronicznymi, ale Axios jest zewnętrzną zależnością. Mimo to – wielu woli pracować z Axios niż z Fetch API. Omówimy oba.

Obie metody mają zalety i wady, ale należy pamiętać, że mogą obsługiwać standardowe czasowniki HTTP – POST, GET, PUT, PATCH, DELETE.

W naszym przypadku będziemy pracować nad listą postów, które już pobraliśmy z próbnego API. Utworzymy formularz, który pobiera tytuł i treść nowego posta, a po przesłaniu wyśle ​​żądanie POST do symulowanego serwera w celu przetworzenia:

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;

Sprawmy teraz, aby formularz funkcjonował, abyśmy mogli dodawać dane do list postów na naszej stronie internetowej po przesłaniu formularza.

Jak wykonać żądanie POST HTTP w komponencie funkcjonalnym Reacta?

Możemy teraz wykonywać żądania HTTP w komponentach funkcjonalnych dzięki wprowadzeniu hooków w React. Wcześniej komponenty funkcjonalne były używane tylko do renderowania interfejsu użytkownika.

Komponent funkcjonalny jest tworzony, gdy funkcja JavaScript (standardowa lub ES6) zwraca element React (JSX).

Zamiast używać obiektu stanu w metodzie konstruktora, jak w przypadku komponentów opartych na klasach, teraz używamy haków React, takich jak useState() do przechowywania naszych danych przed przekazaniem ich do oryginalnych danych.

Jak wykonać żądanie POST HTTP w funkcjonalnym komponencie Reacta za pomocą Fetch API?

Ponieważ Fetch API jest wbudowaną metodą przeglądarki, która zwraca a Promise, Używamy .then() i .catch() metody radzenia sobie z sukcesem i porażką. Przyjmuje również argument obowiązkowy, którym jest adres URL zasobu/API, do którego chcemy POST dane, a także argument wskazujący żądanie HTTP, czyli w naszym przypadku 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;

W powyższym kodzie utworzyliśmy metodę, którą połączymy z formularzem, aby była wyzwalana po kliknięciu przycisku przesyłania formularza. Zaczęliśmy od używania e.preventDefault() aby zapobiec przeładowaniu strony podczas przesyłania formularza, co jest zazwyczaj co chcesz, ale nie działa tak dobrze w naszym demo:

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

Patrząc na fetch() wywołania, dodaliśmy adres URL jako pierwszy obowiązkowy parametr, a drugi parametr przyjmuje metodę żądania (POST), the bodyi header:

• body – zawiera dane, które chcemy wysłać do punktu końcowego API, który musimy zwęzić, przekształcając go w tekstową reprezentację JSON.
• header – określa typ treści, którym w naszym przypadku jest application/json, ponieważ nasz ładunek jest reprezentowany jako ciąg JSON:

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

Wreszcie, ponieważ ta metoda zwraca a Promise, wyodrębnimy z niego zawartość JSON (odpowiedź serwera), zaktualizowano posts stan, aby uwzględnić nowe dane.

Do obsługi błędów wykorzystaliśmy również .catch() metoda:

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

Jak wykonać żądanie POST HTTP w funkcjonalnym komponencie Reacta za pomocą Axios

W poprzedniej sekcji wyjaśniliśmy, jak wykonywać żądania POST za pomocą interfejsu Fetch API. Teraz zmodyfikujmy handleSubmit() i wykonaj żądania POST za pomocą Axios.

Axios to biblioteka klienta HTTP, która wykorzystuje obietnice, aby ułatwić wysyłanie asynchroniczne żądania HTTP do punktów końcowych REST. Ponieważ jest to biblioteka zewnętrzna, musimy ją najpierw zainstalować w naszym projekcie, uruchamiając w katalogu naszego projektu następującą komendę:

$ npm install axios

Po pomyślnym zainstalowaniu Axios możemy przystąpić do wykonania naszego żądania POST:

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

Patrząc na powyższy kod, jest to o wiele prostsze i wymaga mniej składni niż Fetch API, ponieważ nie musimy już konwertować na JSON, pracować z nagłówkami, a nawet streszczać naszych danych. Ten schemat został wyabstrahowany przez Axios.

Jak wykonać żądanie POST HTTP w komponencie klasy Reacta?

Żądania POST w komponentach klas są obsługiwane inaczej niż w komponentach funkcjonalnych, ponieważ nie używamy już haków React i zamiast tego używamy state obiekt.

Komponent klasy to klasa ES6, która zwraca JSX i wymaga rozszerzeń React.

Jak wykonać żądanie POST HTTP w komponencie klasy Reacta za pomocą Fetch API?

Żądanie jest bardzo podobne do żądania komponentów funkcjonalnych. Jedyne obszary, w których zauważymy pewne różnice, to przechowywanie danych w state i podczas używania state wartości, ponieważ nie używamy już useState() hak:

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;

Tym razem nie deklarujemy już metod z const słowo kluczowe. Zamiast tego poprzedź je przedrostkiem this. Ta metoda zostanie uruchomiona po kliknięciu przycisku przesyłania formularza. Ponieważ jest to forma, zaczęliśmy od używania e.preventDefault() aby zapobiec ponownemu załadowaniu strony po przesłaniu formularza:

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

Tak jak dowiedzieliśmy się wcześniej, Fetch API przyjmuje dwa parametry. Jeden to adres URL, a drugi zawiera opcje, takie jak metoda żądania (POST), body, czyli informacje, które publikujemy (musi być sprecyzowane), a następnie 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',
      },
   })
};

Wiedząc, że to obietnica, możemy teraz dołączyć .then() sposób na radzenie sobie z sukcesem i .catch() metoda do obsługi sytuacji w przypadku wystąpienia błędu lub niepowodzenia w żądaniu HTTP.

Jak wykonać żądanie POST HTTP w komponencie klasy Reacta za pomocą Axios

Widzieliśmy, jak wykonać POST Żądania HTTP w komponentach opartych na klasach. Jest to bardzo podobne do Axios, ponieważ wszystko, co musimy zrobić, to zainstalować Axios, a następnie wymienić handleSubmit() metody, więc teraz używamy Axios zamiast 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));
};

Wnioski

W tym przewodniku dowiedzieliśmy się, jak używać dwóch podstawowych metod w React do wykonywania żądań POST HTTP. Zobaczyliśmy również, jak można je wykonać zarówno w komponentach funkcjonalnych, jak i opartych na klasach, więc ten artykuł może nam służyć niezależnie od tego, co jest używane w naszym projekcie.