HANKI HTTP-pyyntö Reactissa

esittely

Verkkosovelluksia kehitettäessä käytämme rutiininomaisesti palvelimella olevia resursseja. Resurssien pyytäminen, lähettäminen tai muiden toimintojen suorittaminen tapahtuu HTTP-pyyntöjen kautta. Nämä pyynnöt lähetetään asiakkaalta palvelimella olevalle isännälle. HTTP-pyyntöä tehdessään asiakas käyttää a URL (yhtenäinen resurssikohta) ja hyötykuorma, joka sisältää tarvittavat tiedot palvelinresurssien käyttämiseksi.

Viisi yleistä HTTP-pyyntömenetelmää ovat GET, PUT, POST, PATCHja DELETE. Näiden menetelmien avulla voimme suorittaa tavallisia CRUD-toimintoja.

Tässä artikkelissa opimme tekemään GET HTTP -pyynnön Reactissa joko Axiosin tai Fetch API:n avulla sekä kuinka tehdä se sekä luokka- että toiminnallisissa komponenteissa.

Mikä on GET Request?

GET on HTTP-pyyntömenetelmä, jota käytetään resurssien hankkimiseen palvelimilta.

Axios ja Nouda API ovat kaksi päämenetelmää HTTP-pyyntöjen tekemiseen.

• Fetch API on sisäänrakennettu lupauspohjainen JavaScript-moduuli resurssien hakemiseen palvelimelta tai API-päätepisteestä.
• Axios on lupauspohjainen HTTP-asiakaskirjasto, jonka avulla on helppoa lähettää asynkronisia HTTP-pyyntöjä REST-päätepisteisiin. Tämä on ulkoinen kirjasto, joka on asennettava.

Tässä artikkelissa tarkastellaan, kuinka GET-pyyntöjä suoritetaan React-toiminnallisissa komponenteissa Fetch API- ja Axios-menetelmillä ja miten sama tehdään luokkapohjaisissa komponenteissa.

GET HTTP -pyynnön suorittaminen Reactin toiminnallisissa komponenteissa

Toiminnallinen komponentti luodaan, kun JavaScript-funktio (joko normaali tai ES6) palauttaa React-elementin (JSX). Käytämme React-koukkuja työskennellessämme toiminnallisten komponenttien kanssa, jotka ovat erittäin tärkeitä GET-pyyntöjä suoritettaessa.

Käytämme useState() ja useEffect() koukut. Koska useEffect() hook renderöi välittömästi, kun sovellus asennetaan, suoritamme aina GET-pyynnöt sen sisällä ja käytämme useState() koukku tietojemme/vastauksiemme tallentamiseen.

GET HTTP-pyynnön suorittaminen Reactin toiminnallisessa komponentissa Fetch API:n avulla

- fetch() menetelmä hyväksyy yhden pakollisen argumentin – URL-osoitteen resurssiin, jonka haluamme noutaa, sekä valinnaisen argumentin, joka ilmaisee pyyntömenetelmän. Valinnaisen argumentin oletusarvo on GET, joten sitä ei tarvitse asettaa GET-pyyntöä tehtäessä.

Sitten Fetch API palauttaa a Promise, jotta voimme käyttää then() ja catch() Menestyksen tai epäonnistumisen käsittelytavat:

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

Tältä näyttää tavallinen GET-pyyntö. Tarkastellaan nyt, mitä olemme tehneet tähän mennessä, jotta saat paremman käsityksen yllä olevasta koodista. Ensinnäkin loimme tilan, jossa säilytetään kaikki resurssit/viestit, joista haemme posts API:t:

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

Sitten käytimme useEffect() koukku ja kirjoitti siihen GET-pyyntömme, jotta pyyntö käynnistyy heti sovelluksen asentamisen jälkeen:

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

Tämän jälkeen loimme noutopyynnön useEffect() koukku ja välitti URL-osoitteen, jonka avulla voimme käyttää palvelinta. Koska tämä palauttaa lupauksen, käytimme then() menetelmä. Koska tämä menetelmä palauttaa vastausobjektin JSONin sijaan, muunsimme tiedot ensin JSON-muotoon:

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

Sitten eteni saada viestit / tiedot ja tallentaa ne aiemmin luomassamme tilassa:

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

Lopuksi käytämme catch() tapa käsitellä virheitä:

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

Olemme jo suorittaneet GET-pyynnön ja tallentaneet tietomme luomaamme tilaan. Nyt voimme käyttää tietoja React-sovelluksessamme.

Kuinka suorittaa GET HTTP-pyyntö Reactin toiminnallisessa komponentissa Axiosin avulla

Fetch API:n lisäksi voimme myös käyttää Axiosta GET-pyyntöjen lähettämiseen. Axios on lupauspohjainen HTTP-asiakaskirjasto, jonka avulla on helppoa lähettää asynkronisia HTTP-pyyntöjä REST-päätepisteisiin.

Jos haluamme käyttää Axiosta, joka on ulkoinen kirjasto, meidän on ensin asennettava se projektiimme suorittamalla seuraava komento projektimme hakemistossa:

$ npm install axios

Kun olemme asentaneet Axiosin onnistuneesti, voimme jatkaa GET-pyyntömme suorittamista:

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

Tämä näyttää paljon puhtaammalta kuin Fetch API! Tarkasteltaessa yllä olevaa koodia aloitimme tuomalla Axios, koska se oli asentamamme ulkoinen kirjasto:

import axios from 'axios';

Sitten suoritimme GET-pyynnön sisällä useEffect() koukku kuten teimme Fetch API:lle, mutta tällä kertaa syntaksi on hieman erilainen:

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

Toisin kuin Fetch API -menetelmässä, menetelmän ilmoittamiseen ei tarvita valintoja. Liitämme vain menetelmän ilmentymään ja kyselemme sitä, eikä tietoja myöskään tarvitse muuntaa, koska se palauttaa sen JSON-muodossa.

GET HTTP -pyynnön suorittaminen Reactin luokkakomponentissa

Luokkakomponentti on ES6-luokka, joka palauttaa JSX:n ja vaatii React-laajennusten käyttöä. Ennen koukkujen käyttöönottoa tämä oli yleisimmin käytetty menetelmä (eli aiemmat versiot 16.8), koska tilaa ei voitu käyttää toiminnallisten komponenttien sisällä.

Koukkujen saatavuudesta huolimatta monet jatkavat luokan komponenttien käyttöä. Katsotaanpa, miten voimme käyttää constructor() menetelmän valtion omaisuus ja ComponentDidMount() elinkaarimenetelmä GET HTTP-pyyntöjen suorittamiseen Reactissa luokan komponenttien kanssa.

GET HTTP-pyynnön suorittaminen Reactin luokkakomponenteissa Fetch API:lla

Tämä on hyvin samanlainen kuin suoritimme GET toiminnallisissa komponenteissa. Ainoa ero on, että käytämme nyt valtion omaisuutta constructor() menetelmän sijaan useState() koukku. Hoidamme myös omamme GET pyyntö ComponentDidMount() elinkaaren sijaan useEffect() koukku, jotta tämä pyyntö käynnistyy, kun sovelluksemme on asennettu:

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

Yllä olevassa koodissa käytimme konstruktorimenetelmää objektin tilan alustamiseen resurssin/datan tallentamiseksi, jonka saamme palvelimeltamme/sovellusliittymästämme:

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

Sitten suoritimme GET-pyyntömme vuonna componentDidMount() elinkaarimenetelmää, jotta se käynnistyy, kun sovellus asennetaan:

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

state on objekti, jolla on monia tiloja, tuhoamme sen ensin saadaksemme posts tila, jota voidaan myöhemmin käyttää:

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

   return (
      
   );
}

Kuinka suorittaa GET HTTP-pyyntö Reactin luokan komponenteissa Axiosin avulla

Kuten näimme toiminnallisten komponenttien kohdalla, voimme lähettää GET pyyntöjä Axiosin kanssa. Jäljelle jää vain suorittaa GET pyyntö sisällä ComponentDidMount() elinkaari ja Axioiden tuonti:

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

Yhteenveto

Tässä artikkelissa opimme suorittamaan GET HTTP-pyyntöjä sekä toiminnallisilla että luokkakomponenteilla käyttämällä kahta yleisimmin käytettyä menetelmää – Fetch API ja Axios.

Tietyn menetelmän käyttäminen on täysin sinun päätettävissäsi.