POST Permintaan HTTP di React

Pengantar

Saat bekerja dengan API, kita seringkali ingin mengirim data ke server untuk diproses. Misalnya, jika kami memiliki daftar tugas dan ingin menambahkannya, mungkin melalui pengiriman formulir, kami menggunakan permintaan HTTP POST untuk mengirim permintaan dengan muatan untuk diproses dan potensi persistensi.

Dalam artikel ini, kita akan belajar bagaimana melakukan POST HTTP request di React menggunakan dua pendekatan yang umum: Fetch API dan Axios. Kita juga akan mengetahui bagaimana melakukan ini dalam komponen fungsional dan berbasis kelas.

Menggunakan Fetch API, mengirim permintaan HTTP POST dengan React semudah:

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 memberi kami alternatif elegan untuk mengirim permintaan HTTP POST:

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

Jika Anda ingin mempelajari lebih lanjut tentang pendekatan ini dan cara kerjanya – silakan baca panduan selanjutnya!

Apa itu Permintaan HTTP POST?

Sesuai dengan namanya, permintaan POST digunakan untuk mengirim data ke titik akhir – yang kemudian biasanya memprosesnya dan menyimpannya dalam database. Data ini dapat berasal dari formulir, disimpan dalam objek, atau diperoleh dengan cara lain – tetapi biasanya diubah menjadi representasi JSON untuk digunakan REST API.

Mengirim permintaan HTTP dengan kata kerja apa pun dibuat sederhana oleh Ambil API (built-in) dan perpustakaan seperti Axios. Fetch API adalah metode browser bawaan untuk melakukan permintaan HTTP, sedangkan Axios adalah paket eksternal yang harus kita instal di proyek kita sebelum digunakan.

Memilih di antara ini terserah Anda. Fetch API lebih bertele-tele dan tidak berfungsi dengan permintaan asinkron, tetapi Axios adalah dependensi eksternal. Meski begitu – banyak yang lebih suka bekerja dengan Axios daripada Fetch API. Kami akan membahas keduanya.

Kedua metode memiliki kelebihan dan kekurangan, tetapi penting untuk dicatat bahwa mereka dapat menangani kata kerja HTTP standar – POST, GET, PUT, PATCH, DELETE.

Dalam contoh kami, kami akan mengerjakan daftar posting yang telah kami ambil dari API tiruan. Kami akan membuat formulir yang mengambil judul dan isi postingan baru, dan setelah dikirimkan, mengirimkan permintaan POST ke server tiruan untuk diproses:

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;

Sekarang mari kita buat formulir berfungsi sehingga kita dapat menambahkan data ke daftar posting di situs web kita setelah formulir dikirimkan.

Cara Melakukan POST HTTP Request di Komponen Fungsional React

Kami sekarang dapat melakukan permintaan HTTP dalam komponen fungsional berkat pengenalan kait di React. Sebelumnya, komponen fungsional hanya digunakan untuk merender UI.

Komponen fungsional dibuat ketika fungsi JavaScript (baik standar atau ES6) mengembalikan elemen React (JSX).

Daripada menggunakan objek state dalam metode konstruktor seperti pada komponen berbasis kelas, kita sekarang menggunakan kait React seperti: useState() untuk menyimpan data kita sebelum meneruskannya ke data asli.

Cara Melakukan POST HTTP Request di Komponen Fungsional React Dengan Fetch API

Karena Fetch API adalah metode browser bawaan yang mengembalikan a Promise, kami menggunakan .then() dan .catch() metode untuk menangani keberhasilan dan kegagalan. Itu juga menerima argumen wajib, yang merupakan URL sumber daya/API tempat kami ingin POST data, serta argumen yang menunjukkan permintaan HTTP, yang dalam kasus kami adalah 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;

Dalam kode di atas, kami membuat metode yang akan kami tautkan ke formulir sehingga dipicu saat tombol kirim formulir diklik. Kami mulai dengan menggunakan e.preventDefault() untuk mencegah halaman dimuat ulang saat mengirimkan formulir, yaitu biasanya apa yang Anda inginkan terjadi, tetapi tidak bekerja dengan baik untuk demo kami:

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

Melihat fetch() panggilan, kami menambahkan URL sebagai parameter wajib pertama, dan parameter kedua mengambil metode permintaan (POST), body, Dan header:

• body – berisi data yang ingin kita kirim ke titik akhir API, yang harus kita merangkai, mengubahnya menjadi representasi JSON berbasis teks.
• header – menentukan tipe konten, yang dalam kasus kami adalah application/json, karena payload kami direpresentasikan sebagai string 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',
      },
   })
};

Akhirnya, karena metode ini mengembalikan Promise, kami akan mengekstrak konten JSON darinya (respons server), memperbarui posts negara untuk memasukkan data baru.

Untuk menangani kesalahan, kami juga menggunakan .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);
      });
};

Cara Melakukan POST HTTP Request di Komponen Fungsional React Dengan Axios

Kami menjelaskan cara melakukan permintaan POST dengan Fetch API di bagian sebelumnya. Sekarang, mari kita modifikasi handleSubmit() metode dan lakukan permintaan POST dengan Axios sebagai gantinya.

Axios adalah pustaka klien HTTP yang menggunakan janji untuk memudahkan pengiriman permintaan HTTP asinkron ke titik akhir REST. Karena ini adalah perpustakaan eksternal, pertama-tama kita harus menginstalnya di proyek kita dengan menjalankan perintah berikut di direktori proyek kita:

$ npm install axios

Setelah kami berhasil menginstal Axios, kami dapat melanjutkan untuk melakukan permintaan POST kami:

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

Melihat kode di atas, ini jauh lebih mudah dan membutuhkan lebih sedikit sintaks daripada Fetch API, karena kita tidak perlu lagi mengonversi ke JSON, bekerja dengan header, dan bahkan merangkai data kita. Boilerplate ini diabstraksikan oleh Axios.

Cara Melakukan POST HTTP Request di Komponen Kelas React

Permintaan POST di komponen kelas ditangani secara berbeda daripada di komponen fungsional karena kami tidak lagi menggunakan kait React dan sebagai gantinya menggunakan state obyek.

Komponen kelas adalah kelas ES6 yang mengembalikan JSX dan membutuhkan ekstensi React.

Cara Melakukan Permintaan HTTP POST di Komponen Kelas React Dengan Fetch API

Permintaan ini sangat mirip dengan komponen fungsional. Satu-satunya area yang akan kami temukan beberapa perbedaan adalah saat menyimpan data di state dan saat menggunakan state nilai karena kita tidak lagi menggunakan useState() kait:

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;

Kali ini, kami tidak lagi mendeklarasikan metode dengan const kata kunci. Sebagai gantinya, awali dengan this. Metode ini akan dipicu ketika tombol kirim formulir diklik. Karena ini adalah bentuk, kami mulai dengan menggunakan e.preventDefault() untuk mencegah halaman memuat ulang saat formulir dikirimkan:

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

Seperti yang kita pelajari sebelumnya, Fetch API mengambil dua parameter. Salah satunya adalah URL, sedangkan yang kedua berisi opsi seperti metode permintaan (POST), body, yang merupakan info yang kami posting (harus dirangkai), dan kemudian 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',
      },
   })
};

Mengetahui ini adalah janji, sekarang kita dapat melampirkan .then() metode untuk menangani kesuksesan dan .catch() metode untuk menangani situasi jika ada kesalahan atau kegagalan dalam permintaan HTTP.

Cara Melakukan Permintaan HTTP POST di Komponen Kelas React Dengan Axios

Kami telah melihat bagaimana kinerjanya POST Permintaan HTTP dalam komponen berbasis kelas. Ini sangat mirip dengan Axios, karena yang harus kita lakukan hanyalah menginstal Axios dan kemudian mengganti handleSubmit() metode, jadi kami sekarang menggunakan Axios daripada 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));
};

Kesimpulan

Dalam panduan ini, kita belajar bagaimana menggunakan dua metode utama di React untuk melakukan permintaan HTTP POST. Kami juga melihat bagaimana mereka dapat dilakukan dalam komponen fungsional dan berbasis kelas, sehingga artikel ini dapat membantu kami terlepas dari apa yang digunakan dalam proyek kami.