ΑΝΑΡΤΗΣΗ Αίτησης HTTP στο React

Εισαγωγή

Όταν εργαζόμαστε με API, πολλές φορές θέλουμε να στείλουμε δεδομένα στον διακομιστή για επεξεργασία. Για παράδειγμα, εάν έχουμε μια λίστα υποχρεώσεων και θέλουμε να προσθέσουμε σε αυτήν, ίσως μέσω υποβολής φόρμας, χρησιμοποιούμε αιτήματα POST HTTP για να στείλουμε ένα αίτημα με ωφέλιμο φορτίο για επεξεργασία και πιθανή παραμονή.

Σε αυτό το άρθρο, θα μάθουμε πώς να εκτελούμε αιτήματα POST HTTP στο React χρησιμοποιώντας δύο συνηθισμένες προσεγγίσεις: το Fetch API και το Axios. Θα μάθουμε επίσης πώς να το κάνουμε αυτό σε λειτουργικά στοιχεία και στοιχεία που βασίζονται στην κατηγορία.

Χρησιμοποιώντας το Fetch API, η αποστολή ενός αιτήματος POST HTTP με το React είναι τόσο εύκολη όσο:

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 μας παρέχει μια κομψή εναλλακτική για την αποστολή αιτημάτων HTTP POST:

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

Εάν θέλετε να μάθετε περισσότερα σχετικά με αυτές τις προσεγγίσεις και τον τρόπο λειτουργίας τους – διαβάστε τον υπόλοιπο οδηγό!

Τι είναι ένα αίτημα HTTP POST;

Όπως υποδηλώνει το όνομα, τα αιτήματα POST χρησιμοποιούνται για την ανάρτηση δεδομένων σε ένα τελικό σημείο – το οποίο στη συνέχεια συνήθως τα επεξεργάζεται και τα αποθηκεύει σε μια βάση δεδομένων. Αυτά τα δεδομένα θα μπορούσαν να προέρχονται από μια φόρμα, να αποθηκευτούν σε ένα αντικείμενο ή να ληφθούν με άλλο τρόπο – αλλά συνήθως μετατρέπονται σε αναπαράσταση JSON για κατανάλωση από το REST API.

Η αποστολή αιτημάτων HTTP με οποιοδήποτε ρήμα γίνεται απλή από το φέρω API (ενσωματωμένο) και βιβλιοθήκες όπως π.χ Αξιού. Το Fetch API είναι μια ενσωματωμένη μέθοδος προγράμματος περιήγησης για την εκτέλεση αιτημάτων HTTP, ενώ το Axios είναι ένα εξωτερικό πακέτο που πρέπει να εγκαταστήσουμε στο έργο μας πριν το χρησιμοποιήσουμε.

Η επιλογή μεταξύ αυτών εξαρτάται από εσάς. Το Fetch API είναι πιο αναλυτικό και δεν λειτουργεί με ασύγχρονα αιτήματα, αλλά το Axios είναι μια εξωτερική εξάρτηση. Ακόμα κι έτσι – πολλοί προτιμούν να εργάζονται με το Axios παρά με το Fetch API. Θα καλύψουμε και τα δύο.

Και οι δύο μέθοδοι έχουν πλεονεκτήματα και μειονεκτήματα, αλλά είναι σημαντικό να σημειωθεί ότι μπορούν να χειριστούν τα τυπικά ρήματα HTTP – POST, GET, PUT, PATCH, DELETE.

Στην περίπτωσή μας, θα επεξεργαστούμε μια λίστα με αναρτήσεις που έχουμε ήδη ανακτήσει από ένα εικονικό API. Θα δημιουργήσουμε μια φόρμα που θα λαμβάνει τον τίτλο και το σώμα μιας νέας ανάρτησης και μόλις υποβληθεί, θα στείλει ένα αίτημα POST στον εικονικό διακομιστή για επεξεργασία:

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;

Ας κάνουμε τώρα τη φόρμα λειτουργική, ώστε να μπορούμε να προσθέσουμε δεδομένα στις λίστες αναρτήσεων στον ιστότοπό μας μόλις υποβληθεί η φόρμα.

Πώς να εκτελέσετε αίτημα HTTP POST στο λειτουργικό στοιχείο του React

Μπορούμε πλέον να εκτελούμε αιτήματα HTTP σε λειτουργικά στοιχεία χάρη στην εισαγωγή των hook στο React. Προηγουμένως, τα λειτουργικά στοιχεία χρησιμοποιούνταν μόνο για την απόδοση διεπαφής χρήστη.

Ένα λειτουργικό στοιχείο δημιουργείται όταν μια συνάρτηση JavaScript (είτε τυπική είτε ES6) επιστρέφει ένα στοιχείο React (JSX).

Αντί να χρησιμοποιούμε το αντικείμενο κατάστασης στη μέθοδο κατασκευής όπως με στοιχεία που βασίζονται σε κλάσεις, τώρα χρησιμοποιούμε αγκίστρια React όπως π.χ. useState() να αποθηκεύσουμε τα δεδομένα μας πριν τα περάσουμε στα αρχικά δεδομένα.

Πώς να εκτελέσετε αίτημα POST HTTP στο λειτουργικό στοιχείο του React με το Fetch API

Επειδή το Fetch API είναι μια ενσωματωμένη μέθοδος προγράμματος περιήγησης που επιστρέφει α Promise, χρησιμοποιούμε το .then() και .catch() μεθόδους αντιμετώπισης της επιτυχίας και της αποτυχίας. Αποδέχεται επίσης ένα υποχρεωτικό όρισμα, το οποίο είναι το URL του πόρου/API στο οποίο θέλουμε να ΑΝΑΡΤΗΣΟΥΜΕ δεδομένα, καθώς και ένα όρισμα που υποδεικνύει το αίτημα HTTP, το οποίο στην περίπτωσή μας είναι 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;

Στον παραπάνω κώδικα, δημιουργήσαμε μια μέθοδο που θα συνδέσουμε με τη φόρμα, έτσι ώστε να ενεργοποιείται όταν κάνετε κλικ στο κουμπί υποβολής της φόρμας. Ξεκινήσαμε χρησιμοποιώντας e.preventDefault() για να αποτρέψετε την επαναφόρτωση της σελίδας κατά την υποβολή της φόρμας, δηλαδή συνήθως αυτό που θέλετε να συμβεί, αλλά δεν λειτουργεί τόσο καλά για το demo μας:

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

Κοιτάζοντας το fetch() κλήση, προσθέσαμε τη διεύθυνση URL ως την πρώτη υποχρεωτική παράμετρο και η δεύτερη παράμετρος λαμβάνει τη μέθοδο αιτήματος (POST), body, και το header:

• body – περιέχει τα δεδομένα που θέλουμε να στείλουμε στο τελικό σημείο του API, τα οποία πρέπει στριφογυρίζω, μετατρέποντάς το σε αναπαράσταση JSON που βασίζεται σε κείμενο.
• header – καθορίζει τον τύπο περιεχομένου, που στην περίπτωσή μας είναι application/json, αφού το ωφέλιμο φορτίο μας αντιπροσωπεύεται ως συμβολοσειρά 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',
      },
   })
};

Τέλος, επειδή αυτή η μέθοδος επιστρέφει a Promise, θα εξαγάγουμε τα περιεχόμενα JSON από αυτό (απόκριση του διακομιστή), ενημερώσαμε το posts να συμπεριλάβει τα νέα δεδομένα.

Για να χειριστούμε σφάλματα, χρησιμοποιήσαμε επίσης το .catch() μέθοδος:

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

Πώς να εκτελέσετε αίτημα POST HTTP στο λειτουργικό στοιχείο του React με το Axios

Εξηγήσαμε τον τρόπο εκτέλεσης αιτημάτων POST με το Fetch API στην προηγούμενη ενότητα. Τώρα, ας τροποποιήσουμε το handleSubmit() και εκτελέστε αιτήματα POST με το Axios.

Το Axios είναι μια βιβλιοθήκη πελατών HTTP που χρησιμοποιεί υποσχέσεις για να διευκολύνει την αποστολή ασύγχρονα αιτήματα HTTP στα τελικά σημεία REST. Επειδή είναι μια εξωτερική βιβλιοθήκη, πρέπει πρώτα να την εγκαταστήσουμε στο έργο μας εκτελώντας την ακόλουθη εντολή στον κατάλογο του έργου μας:

$ npm install axios

Αφού εγκαταστήσουμε με επιτυχία το Axios, μπορούμε να προχωρήσουμε στην εκτέλεση του αιτήματός μας 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);
      });
};

Κοιτάζοντας τον παραπάνω κώδικα, είναι πολύ πιο εύκολο και απαιτεί λιγότερη σύνταξη από το Fetch API, καθώς δεν χρειάζεται πλέον να κάνουμε μετατροπή σε JSON, να εργαζόμαστε με κεφαλίδες και ακόμη και να περιορίζουμε τα δεδομένα μας. Αυτό το boilerplate αφαιρείται από τον Axios.

Πώς να εκτελέσετε αίτημα POST HTTP στο στοιχείο κλάσης του React

Τα αιτήματα POST σε στοιχεία κλάσης αντιμετωπίζονται διαφορετικά από ό,τι στα λειτουργικά στοιχεία, επειδή δεν χρησιμοποιούμε πλέον τα άγκιστρα React και αντίθετα χρησιμοποιούμε το state αντικείμενο.

Ένα στοιχείο κλάσης είναι μια κλάση ES6 που επιστρέφει JSX και απαιτεί επεκτάσεις React.

Πώς να εκτελέσετε αίτημα POST HTTP στο στοιχείο κλάσης του React με το Fetch API

Το αίτημα είναι πολύ παρόμοιο με αυτό των λειτουργικών στοιχείων. Οι μόνες περιοχές που θα βρίσκαμε κάποιες διαφορές είναι κατά την αποθήκευση δεδομένων state και κατά τη χρήση state τιμές επειδή δεν χρησιμοποιούμε πλέον το useState() άγκιστρο:

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;

Αυτή τη φορά, δεν δηλώνουμε πλέον μεθόδους με το const λέξη-κλειδί. Αντίθετα, τοποθετήστε τους το πρόθεμα με this. Αυτή η μέθοδος θα ενεργοποιηθεί όταν κάνετε κλικ στο κουμπί υποβολής της φόρμας. Δεδομένου ότι είναι μια φόρμα, ξεκινήσαμε χρησιμοποιώντας e.preventDefault() για να αποτρέψετε την επαναφόρτωση της σελίδας κατά την υποβολή της φόρμας:

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

Όπως μάθαμε νωρίτερα, το Fetch API λαμβάνει δύο παραμέτρους. Το ένα είναι το URL, ενώ το δεύτερο περιέχει επιλογές όπως η μέθοδος αιτήματος (POST), body, οι οποίες είναι οι πληροφορίες που δημοσιεύουμε (πρέπει να είναι αυστηρές), και στη συνέχεια το 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',
      },
   })
};

Γνωρίζοντας ότι αυτό είναι μια υπόσχεση, μπορούμε τώρα να επισυνάψουμε το .then() μέθοδος χειρισμού της επιτυχίας και της .catch() μέθοδος χειρισμού μιας κατάστασης εάν υπάρχει σφάλμα ή αποτυχία στο αίτημα HTTP.

Πώς να εκτελέσετε αίτημα POST HTTP στο στοιχείο κλάσης του React με το Axios

Είδαμε πώς να αποδίδουμε POST Αιτήματα HTTP σε στοιχεία που βασίζονται σε κλάσεις. Αυτό μοιάζει πολύ με το Axios, καθώς το μόνο που έχουμε να κάνουμε είναι να εγκαταστήσουμε το Axios και μετά να το αντικαταστήσουμε handleSubmit() μέθοδο, επομένως πλέον χρησιμοποιούμε το Axios αντί για το 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));
};

Συμπέρασμα

Σε αυτόν τον οδηγό, μάθαμε πώς να χρησιμοποιούμε τις δύο κύριες μεθόδους στο React για την εκτέλεση αιτημάτων POST HTTP. Είδαμε επίσης πώς θα μπορούσαν να γίνουν τόσο σε λειτουργικά στοιχεία όσο και σε στοιχεία που βασίζονται σε τάξη, επομένως αυτό το άρθρο μπορεί να μας εξυπηρετήσει ανεξάρτητα από το τι χρησιμοποιείται στο έργο μας.