GET HTTP Request v React

Predstavitev

Pri razvoju spletnih aplikacij – redno dostopamo do virov, ki gostujejo na strežniku. Zahtevanje, pošiljanje ali izvajanje drugih operacij na virih je doseženo prek zahtev HTTP. Te zahteve pošlje odjemalec gostitelju na strežniku. Pri izdelavi zahteve HTTP odjemalec uporabi a URL (enotni lokator virov) in uporabni tovor, ki vsebuje potrebne informacije za dostop do virov strežnika.

Pet običajnih metod zahtev HTTP je GET, PUT, POST, PATCHin DELETE. Te metode nam omogočajo izvajanje standardnih operacij CRUD.

V tem članku se bomo naučili, kako ustvariti zahtevo GET HTTP v Reactu z uporabo bodisi Axios ali Fetch API, kot tudi, kako to storiti v razrednih in funkcionalnih komponentah.

Kaj je GET Request?

GET je metoda zahteve HTTP, ki se uporablja za pridobivanje virov iz strežnikov.

Axios in Fetch API sta dve glavni metodi za izdelavo zahtev HTTP.

• Fetch API je vgrajen modul JavaScript, ki temelji na obljubah, za pridobivanje virov iz strežnika ali končne točke API-ja.
• Axios je odjemalska knjižnica HTTP, ki temelji na obljubah in omogoča preprosto pošiljanje asinhronih zahtev HTTP končnim točkam REST. To je zunanja knjižnica, ki jo je treba namestiti.

V tem članku si bomo ogledali, kako izvesti zahteve GET v funkcionalnih komponentah React z uporabo metod Fetch API in Axios ter nato, kako narediti isto v komponentah, ki temeljijo na razredu.

Kako izvesti zahtevo GET HTTP v funkcionalnih komponentah Reacta

Funkcionalna komponenta se ustvari, ko funkcija JavaScript (običajna ali ES6) vrne element React (JSX). Pri delu s funkcionalnimi komponentami uporabljamo kljuke React, ki so zelo pomembne pri izvajanju zahtev GET.

Uporabili bomo useState() in useEffect() kavlji. Zaradi useEffect() hook se upodobi takoj, ko se aplikacija namesti, znotraj nje vedno izvedemo zahteve GET in uporabimo useState() kavelj za shranjevanje naših podatkov/odgovora.

Kako izvesti zahtevo GET HTTP v funkcionalni komponenti React z API-jem Fetch

O fetch() metoda sprejme en obvezen argument – ​​URL do vira, ki ga želimo pridobiti, kot tudi izbirni argument, ki označuje metodo zahteve. Privzeta vrednost za ta neobvezni argument je GET, zato ga ni treba nastavljati pri zahtevi GET.

Nato Fetch API vrne a Promise, tako da lahko uporabimo then() in catch() metode za obvladovanje uspeha ali neuspeha:

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

Tako izgleda standardna zahteva GET. Sedaj pa razčlenimo, kar smo naredili do sedaj, da boste bolje razumeli zgornjo kodo. Najprej smo ustvarili stanje za vse vire/objave, ki bi jih pridobili iz posts API-ji:

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

Nato smo uporabili useEffect() hook in vanjo zapisali našo zahtevo GET, tako da se zahteva sproži takoj po namestitvi aplikacije:

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

Po tem smo ustvarili zahtevo za pridobitev v useEffect() hook in posredoval URL, ki ga lahko uporabimo za dostop do strežnika. Ker to vrne obljubo, smo uporabili then() metoda. Ker ta metoda vrne odzivni objekt in ne JSON, smo podatke najprej pretvorili v format JSON:

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

Nato smo nadaljevali s pridobivanjem objav/podatkov in jih shranili v stanje, ki smo ga ustvarili prej:

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

Na koncu uporabimo catch() metoda za odpravljanje napak:

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

Izvedli smo že zahtevo GET in shranili svoje podatke v stanje, ki smo ga ustvarili. Zdaj lahko uporabljamo podatke znotraj naše aplikacije React.

Kako izvesti zahtevo GET HTTP v funkcionalni komponenti React z Axios

Poleg API-ja Fetch lahko za pošiljanje zahtev GET uporabljamo tudi Axios. Axios je odjemalska knjižnica HTTP, ki temelji na obljubah in omogoča preprosto pošiljanje asinhronih zahtev HTTP končnim točkam REST.

Če želimo uporabljati Axios, ki je zunanja knjižnica, jo moramo najprej namestiti v naš projekt tako, da zaženemo naslednji ukaz v imeniku našega projekta:

$ npm install axios

Ko smo uspešno namestili Axios, lahko nadaljujemo z izvedbo naše zahteve 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 (
      
   );
};

To je videti veliko čistejše od API-ja Fetch! Ko smo si ogledali zgornjo kodo, smo začeli z uvozom Axios, saj je bila to zunanja knjižnica, ki smo jo namestili:

import axios from 'axios';

Nato smo izvedli zahtevo GET znotraj useEffect() hook, kot smo naredili za Fetch API, vendar je tokrat sintaksa nekoliko drugačna:

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

V nasprotju z metodo Fetch API za deklaracijo metode niso potrebne nobene možnosti. Metodo preprosto priložimo instanci in jo poizvedujemo, prav tako ni treba pretvarjati podatkov, ker jih vrne kot JSON.

Kako izvesti zahtevo GET HTTP v Reactovi komponenti razreda

Komponenta razreda je razred ES6, ki vrne JSX in zahteva uporabo razširitev React. Pred uvedbo kavljev je bila to najpogosteje uporabljena metoda (tj. prejšnje različice 16.8), ker stanja ni bilo mogoče uporabiti znotraj funkcionalnih komponent.

Kljub razpoložljivosti kavljev veliko ljudi še naprej uporablja komponente razreda. Poglejmo, kako lahko uporabimo constructor() državna last metode in ComponentDidMount() metoda življenjskega cikla za izvajanje zahtev GET HTTP v React s komponentami razreda.

Kako izvesti zahtevo GET HTTP v Reactovih komponentah razreda z API-jem Fetch

To je zelo podobno temu, kako smo izvedli GET zahtevo po funkcionalnih komponentah. Razlika je le v tem, da bomo državno premoženje zdaj uporabljali v constructor() metoda namesto useState() kavelj. Prav tako bomo poskrbeli za naše GET zahteva v ComponentDidMount() življenjski cikel namesto useEffect() kavelj, tako da se ta zahteva sproži, ko se naša aplikacija namesti:

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

V zgornji kodi smo uporabili metodo konstruktorja za inicializacijo stanja objekta za shranjevanje vira/podatkov, ki jih bomo dobili iz našega strežnika/API-ja:

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

Nato smo izvedli našo zahtevo GET v componentDidMount() način življenjskega cikla, tako da se sproži, ko se aplikacija namesti:

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

state je objekt, ki ima veliko stanj, ga najprej destrukturiramo, da dobimo posts stanje, ki ga lahko kasneje uporabimo:

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

   return (
      
   );
}

Kako izvesti zahtevo GET HTTP v Reactovih komponentah razreda z Axios

Kot smo videli pri funkcionalnih komponentah, lahko pošljemo GET zahteve z Axios. Vse, kar ostane, je izvršitev GET zahteva znotraj ComponentDidMount() življenjski cikel in za uvoz 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 (
         
      );
   }
}

zaključek

V tem članku smo se naučili izvajati zahteve GET HTTP s funkcionalnimi in razrednimi komponentami z uporabo dveh najpogosteje uporabljenih metod – Fetch API in Axios.

Uporaba določene metode je v celoti odvisna od vas.