DAPATKAN Permintaan HTTP di Bereaksi

Pengantar

Saat mengembangkan aplikasi web – kami secara rutin mengakses sumber daya yang dihosting di server. Meminta, mengirim, atau melakukan operasi lain pada sumber daya dilakukan melalui permintaan HTTP. Permintaan ini dikirim dari klien ke host di server. Saat membuat permintaan HTTP, klien menggunakan a URL (Pencari Sumber Daya Seragam) dan muatan yang berisi informasi yang diperlukan untuk mengakses sumber daya server.

Lima metode permintaan HTTP yang umum adalah GET, PUT, POST, PATCH, dan DELETE. Metode ini memungkinkan kita untuk melakukan operasi CRUD standar.

Dalam artikel ini, kita akan mempelajari cara membuat permintaan GET HTTP di React menggunakan Axios atau Fetch API, serta cara melakukannya di komponen kelas dan fungsional.

Apa itu Permintaan GET?

GET adalah metode permintaan HTTP yang digunakan untuk mendapatkan sumber daya dari server.

Axios dan Ambil API adalah dua metode utama untuk membuat permintaan HTTP.

• Fetch API adalah modul JavaScript berbasis janji bawaan untuk mengambil sumber daya dari server atau titik akhir API.
• Axios adalah pustaka klien HTTP berbasis janji yang memudahkan pengiriman permintaan HTTP asinkron ke titik akhir REST. Ini adalah perpustakaan eksternal yang harus diinstal.

Dalam artikel ini, kita akan melihat bagaimana melakukan permintaan GET di komponen fungsional React menggunakan metode Fetch API dan Axios, lalu bagaimana melakukan hal yang sama di komponen berbasis kelas.

Cara Melakukan GET HTTP Request di Komponen Fungsional React

Komponen fungsional dibuat ketika fungsi JavaScript (baik normal atau ES6) mengembalikan elemen React (JSX). Kami menggunakan kait React saat bekerja dengan komponen fungsional, yang sangat penting saat melakukan permintaan GET.

Kami akan menggunakan useState() dan useEffect() kait. Karena useEffect() hook segera dirender ketika aplikasi dipasang, kami selalu melakukan permintaan GET di dalamnya, dan kami menggunakan useState() kait untuk menyimpan data/tanggapan kami.

Cara Melakukan GET HTTP Request di Komponen Fungsional React dengan Fetch API

Grafik fetch() metode menerima satu argumen wajib – URL ke sumber daya yang ingin kita ambil, serta argumen opsional yang menunjukkan metode permintaan. Nilai default untuk argumen opsional itu adalah GET, jadi tidak perlu mengaturnya saat membuat permintaan GET.

Kemudian Fetch API mengembalikan Promise, sehingga kita dapat menggunakan then() dan catch() metode untuk menangani keberhasilan atau kegagalan:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((res) => res.json())
         .then((data) => {
            console.log(data);
            setPosts(data);
         })
         .catch((err) => {
            console.log(err.message);
         });
   }, []);

   return (
      
   );
};

Seperti inilah tampilan permintaan GET standar. Sekarang, mari kita menguraikan apa yang telah kita lakukan sejauh ini sehingga Anda mendapatkan pemahaman yang lebih baik tentang kode di atas. Pertama-tama, kami membuat status untuk menampung semua sumber daya/postingan yang akan kami ambil dari posts Lebah:

const [posts, setPosts] = useState([]);

Kemudian kami menggunakan useEffect() kait dan tulis permintaan GET kami di dalamnya sehingga permintaan dipicu segera setelah aplikasi dipasang:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Setelah itu, kami membuat permintaan pengambilan di useEffect() kaitkan dan berikan URL yang dapat kita gunakan untuk mengakses server. Karena ini mengembalikan janji, kami menggunakan then() metode. Karena metode ini mengembalikan objek respons daripada JSON, pertama-tama kami mengonversi data ke format JSON:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
}, []);

Kemudian kami melanjutkan untuk mendapatkan posting/data dan menyimpannya dalam status yang kami buat sebelumnya:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      }
}, []);

Akhirnya kami menggunakan catch() metode untuk menangani kesalahan:

useEffect(() => {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((res) => res.json())
      .then((data) => {
         console.log(data);
         setPosts(data);
      })
      .catch((err) => {
         console.log(err.message);
      });
}, []);

Kami telah melakukan permintaan GET dan menyimpan data kami ke status yang kami buat. Sekarang kita dapat menggunakan data dalam aplikasi React kita.

Cara Melakukan GET HTTP Request di Komponen Fungsional React Dengan Axios

Selain dari Fetch API, kita juga dapat menggunakan Axios untuk mengirim permintaan GET. Axios adalah pustaka klien HTTP berbasis janji yang memudahkan pengiriman permintaan HTTP asinkron ke titik akhir REST.

Jika kita ingin menggunakan Axios, yang merupakan library eksternal, kita harus menginstalnya terlebih dahulu 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 GET kami:

import { useState, useEffect } from 'react';
import axios from 'axios';

const App = () => {
   const [posts, setPosts] = useState([]);

   useEffect(() => {
      axios
         .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
         .then((response) => {
            setPosts(response.data);
         })
         .catch((err) => {
            console.log(err);
         });
   }, []);

   return (
      
   );
};

Ini terlihat jauh lebih bersih daripada Fetch API! Melihat kode di atas, kami mulai dengan mengimpor Axios karena itu adalah perpustakaan eksternal yang kami instal:

import axios from 'axios';

Kami kemudian melakukan permintaan GET dalam useEffect() kait seperti yang kami lakukan untuk Fetch API, tetapi kali ini sintaksnya sedikit berbeda:

useEffect(() => {
   axios
      .get('https://jsonplaceholder.typicode.com/posts?_limit=10')
      .then((response) => {
         setPosts(response.data);
      })
      .catch((err) => {
         console.log(err);
      });
}, []);

Berbeda dengan metode Fetch API, tidak ada opsi yang diperlukan untuk mendeklarasikan metode. Kami cukup melampirkan metode ke instance dan menanyakannya, juga tidak perlu mengonversi data karena mengembalikannya sebagai JSON.

Cara Melakukan GET HTTP Request di Komponen Kelas React

Komponen kelas adalah kelas ES6 yang mengembalikan JSX dan memerlukan ekstensi React untuk digunakan. Sebelum pengenalan hook, ini adalah metode yang paling umum digunakan (yaitu versi 16.8) sebelumnya karena status tidak dapat digunakan dalam komponen fungsional.

Terlepas dari ketersediaan kait, banyak orang terus menggunakan komponen kelas. Mari kita lihat bagaimana kita dapat menggunakan constructor() properti status metode, dan ComponentDidMount() metode siklus hidup untuk melakukan GET permintaan HTTP di Bereaksi dengan komponen kelas.

Cara Melakukan GET HTTP Request di Komponen Kelas React Dengan Fetch API

Ini sangat mirip dengan bagaimana kami melakukan GET permintaan dalam komponen fungsional. Satu-satunya perbedaan adalah bahwa kita sekarang akan menggunakan properti negara di constructor() metode daripada useState() kait. Juga, kami akan menangani GET permintaan di ComponentDidMount() siklus hidup daripada useEffect() kait, sehingga permintaan ini dipicu setelah aplikasi kami dipasang:

import React, { Component } from 'react';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      fetch('https://jsonplaceholder.typicode.com/posts')
         .then((response) => response.json())
         .then((data) => this.setState({ posts: data }))
         .catch((error) => console.log(error));
   }

   render() {
      const { posts } = this.state;

      return (
         
      );
   }
}

Dalam kode di atas, kami menggunakan metode konstruktor untuk menginisialisasi status objek untuk menyimpan sumber daya/data yang akan kami dapatkan dari server/API kami:

constructor(props) {
   super(props);
   this.state = {
      posts: [],
   };
}

Kami kemudian melakukan permintaan GET kami di componentDidMount() metode siklus hidup sehingga dipicu setelah aplikasi dipasang:

componentDidMount() {
   fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => response.json())
      .then((data) => this.setState({ posts: data }))
      .catch((error) => console.log(error));
}

state adalah objek yang memiliki banyak status, pertama-tama kita merusaknya untuk mendapatkan posts state, yang nantinya dapat digunakan:

render() {
   const { posts } = this.state;

   return (
      
   );
}

Cara Melakukan GET HTTP Request di Komponen Kelas React Dengan Axios

Seperti yang kita lihat dengan komponen fungsional, kita dapat mengirim GET permintaan dengan Axios. Yang tersisa hanyalah menjalankan GET permintaan dalam ComponentDidMount() siklus hidup dan untuk mengimpor Axios:

import React, { Component } from 'react';
import axios from 'axios';

class App extends Component {
   constructor(props) {
      super(props);
      this.state = {
         posts: [],
      };
   }

   componentDidMount() {
      axios
         .get('https://jsonplaceholder.typicode.com/posts')
         .then((response) => {
            this.setState({ posts: response.data });
         })
         .catch((error) => {
            console.log(error);
         });
   }

   render() {
      const { posts } = this.state;
      return (
         
      );
   }
}

Kesimpulan

Kami mempelajari cara melakukan permintaan GET HTTP dengan komponen fungsional dan kelas menggunakan dua metode yang paling umum digunakan – Fetch API dan Axios, dalam artikel ini.

Menggunakan metode tertentu sepenuhnya terserah Anda.