POBIERZ żądanie HTTP w React

Wprowadzenie

Tworząc aplikacje webowe – rutynowo uzyskujemy dostęp do zasobów hostowanych na serwerze. Żądanie, wysyłanie lub wykonywanie innych operacji na zasobach odbywa się za pośrednictwem żądań HTTP. Te żądania są wysyłane od klienta do hosta na serwerze. Klient wysyłając zapytanie HTTP korzysta z: URL (jednolity lokalizator zasobów) oraz ładunek zawierający informacje niezbędne do uzyskania dostępu do zasobów serwera.

Pięć powszechnych metod żądań HTTP to: GET, PUT, POST, PATCH, DELETE. Metody te pozwalają nam wykonywać standardowe operacje CRUD.

W tym artykule dowiemy się, jak wykonać żądanie GET HTTP w React za pomocą Axios lub Fetch API, a także jak to zrobić zarówno w komponentach klasowych, jak i funkcjonalnych.

Co to jest żądanie GET?

GET to metoda żądania HTTP używana do uzyskiwania zasobów z serwerów.

Axios oraz Fetch API to dwie główne metody wykonywania żądań HTTP.

• Fetch API to wbudowany moduł JavaScript oparty na obietnicach do pobierania zasobów z serwera lub punktu końcowego interfejsu API.
• Axios to oparta na obietnicach biblioteka klienta HTTP, która ułatwia wysyłanie asynchronicznych żądań HTTP do punktów końcowych REST. To jest biblioteka zewnętrzna, którą należy zainstalować.

W tym artykule przyjrzymy się, jak wykonać żądania GET w komponentach funkcjonalnych React przy użyciu metod Fetch API i Axios, a następnie jak zrobić to samo w komponentach opartych na klasach.

Jak wykonać żądanie GET HTTP w komponentach funkcjonalnych Reacta?

Komponent funkcjonalny jest tworzony, gdy funkcja JavaScript (normalna lub ES6) zwraca element React (JSX). Wykorzystujemy haki React podczas pracy z komponentami funkcjonalnymi, które są bardzo ważne podczas wykonywania żądań GET.

Użyjemy useState() i useEffect() haki. Ponieważ useEffect() hook renderuje się natychmiast po zamontowaniu aplikacji, zawsze wykonujemy w niej żądania GET i używamy useState() hak do przechowywania naszych danych/odpowiedzi.

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

Połączenia fetch() metoda przyjmuje jeden obowiązkowy argument – ​​adres URL do zasobu, który chcemy pobrać, a także opcjonalny argument wskazujący metodę żądania. Domyślna wartość tego opcjonalnego argumentu to GET, więc nie jest konieczne ustawianie go podczas wykonywania żądania GET.

Następnie Fetch API zwraca a Promise, więc możemy użyć then() i catch() metody radzenia sobie z sukcesem lub porażką:

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

Tak wygląda standardowe żądanie GET. Teraz podzielmy to, co zrobiliśmy do tej pory, aby lepiej zrozumieć powyższy kod. Przede wszystkim stworzyliśmy stan do przechowywania wszystkich zasobów/postów, które pobralibyśmy z posts OGIEŃ:

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

Następnie skorzystaliśmy z useEffect() hook i zapisał w nim nasze żądanie GET, aby żądanie zostało wywołane natychmiast po zamontowaniu aplikacji:

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

Następnie utworzyliśmy żądanie pobrania w useEffect() przechwycił i przekazał adres URL, którego możemy użyć, aby uzyskać dostęp do serwera. Ponieważ to zwraca obietnicę, użyliśmy then() metoda. Ponieważ ta metoda zwraca obiekt odpowiedzi, a nie JSON, najpierw przekonwertowaliśmy dane do formatu JSON:

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

Następnie przystąpiliśmy do pobierania wpisów/danych i przechowywaliśmy je w stanie, który stworzyliśmy wcześniej:

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

Wreszcie używamy catch() metoda obsługi błędów:

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

Wykonaliśmy już żądanie GET i zapisaliśmy nasze dane w utworzonym przez nas stanie. Teraz możemy wykorzystać dane w naszej aplikacji React.

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

Oprócz Fetch API możemy również używać Axios do wysyłania żądań GET. Axios to oparta na obietnicach biblioteka klienta HTTP, która ułatwia wysyłanie asynchronicznych żądań HTTP do punktów końcowych REST.

Jeśli chcemy korzystać z Axios, który jest zewnętrzną biblioteką, musimy najpierw zainstalować ją 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 GET:

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

Wygląda to o wiele czyściej niż w Fetch API! Patrząc na powyższy kod, zaczęliśmy od zaimportowania Axios, ponieważ była to zewnętrzna biblioteka, którą zainstalowaliśmy:

import axios from 'axios';

Następnie wykonaliśmy żądanie GET w ciągu useEffect() tak jak zrobiliśmy to dla Fetch API, ale tym razem składnia jest nieco inna:

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

W przeciwieństwie do metody Fetch API, żadne opcje nie są wymagane do zadeklarowania metody. Po prostu dołączamy metodę do instancji i odpytujemy ją, również nie ma potrzeby konwertowania danych, ponieważ zwraca je w formacie JSON.

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

Komponent klasy to klasa ES6, która zwraca JSX i wymaga użycia rozszerzeń React. Przed wprowadzeniem hooków była to najczęściej używana metoda (tj. wcześniejsze wersje 16.8), ponieważ stan nie mógł być użyty w komponentach funkcjonalnych.

Pomimo dostępności hooków, wiele osób nadal korzysta z komponentów klas. Zobaczmy, jak możemy wykorzystać constructor() właściwość stanu metody, a ComponentDidMount() metoda cyklu życia do wykonywania żądań GET HTTP w React z komponentami klas.

Jak wykonać żądanie GET HTTP w komponentach klasy Reacta za pomocą Fetch API?

Jest to bardzo podobne do tego, jak wykonaliśmy GET żądanie w funkcjonalnych komponentach. Jedyna różnica polega na tym, że teraz będziemy używać własności państwowej w constructor() metoda zamiast useState() hak. Zajmiemy się również naszym GET żądanie w ComponentDidMount() cykl życia, a nie useEffect() hook, aby to żądanie zostało wywołane po zamontowaniu naszej aplikacji:

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

W powyższym kodzie wykorzystaliśmy metodę konstruktora do zainicjowania stanu obiektu w celu przechowywania zasobu/danych, które otrzymamy z naszego serwera/API:

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

Następnie wykonaliśmy nasze żądanie GET w componentDidMount() metoda cyklu życia, aby była uruchamiana po zamontowaniu aplikacji:

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

state jest obiektem, który posiada wiele stanów, najpierw destrukturyzujemy go, aby uzyskać posts stan, który można później wykorzystać:

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

   return (
      
   );
}

Jak wykonać żądanie GET HTTP w komponentach klasy Reacta za pomocą Axios

Jak widzieliśmy z funkcjonalnymi komponentami, możemy wysłać GET prośby z Axios. Pozostaje tylko wykonać GET żądanie w ciągu ComponentDidMount() cykl życia i import 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 (
         
      );
   }
}

Wnioski

W tym artykule dowiedzieliśmy się, jak wykonywać żądania GET HTTP z komponentami funkcjonalnymi i klasowymi przy użyciu dwóch najczęściej używanych metod – Fetch API i Axios.

Użycie określonej metody zależy wyłącznie od Ciebie.