FÅ HTTP-forespørsel i React

Introduksjon

Når vi utvikler webapplikasjoner – har vi rutinemessig tilgang til ressurser som ligger på en server. Å be om, sende eller utføre andre operasjoner på ressurser utføres gjennom HTTP-forespørsler. Disse forespørslene sendes fra klienten til en vert på en server. Ved HTTP-forespørsel bruker klienten en URL (Uniform Resource Locator) og en nyttelast som inneholder nødvendig informasjon for å få tilgang til serverressursene.

De fem vanlige HTTP-forespørselsmetodene er GET, PUT, POST, PATCHog DELETE. Disse metodene lar oss utføre standard CRUD-operasjoner.

I denne artikkelen vil vi lære hvordan du lager en GET HTTP-forespørsel i React ved å bruke enten Axios eller Fetch API, samt hvordan du gjør det i både klasse- og funksjonelle komponenter.

Hva er GET-forespørsel?

GET er en HTTP-forespørselsmetode som brukes til å hente ressurser fra servere.

Axios og Hent API er de to hovedmetodene for å lage HTTP-forespørsler.

• Fetch API er en innebygd løftebasert JavaScript-modul for å hente ressurser fra en server eller et API-endepunkt.
• Axios er et løftebasert HTTP-klientbibliotek som gjør det enkelt å sende asynkrone HTTP-forespørsler til REST-endepunkter. Dette er et eksternt bibliotek som må installeres.

I denne artikkelen skal vi se på hvordan du utfører GET-forespørsler i React-funksjonelle komponenter ved å bruke metodene Fetch API og Axios, og deretter hvordan du gjør det samme i klassebaserte komponenter.

Hvordan utføre GET HTTP-forespørsel i Reacts funksjonelle komponenter

En funksjonell komponent opprettes når en JavaScript-funksjon (enten normal eller ES6) returnerer et React-element (JSX). Vi bruker React-kroker når vi jobber med funksjonelle komponenter, som er svært viktige når vi utfører GET-forespørsler.

Vi bruker useState() og useEffect() kroker. Fordi det useEffect() hook gjengir umiddelbart når appen monteres, utfører vi alltid GET-forespørsler i den, og vi bruker useState() krok for å lagre våre data/svar.

Hvordan utføre GET HTTP-forespørsel i Reacts funksjonelle komponent med Fetch API

De fetch() metoden godtar ett obligatorisk argument – ​​URL-en til ressursen vi ønsker å hente, samt et valgfritt argument som indikerer forespørselsmetoden. Standardverdien for det valgfrie argumentet er GET, så det er ikke nødvendig å angi det når du foretar en GET-forespørsel.

Deretter returnerer Fetch API en Promise, slik at vi kan bruke then() og catch() metoder for å håndtere suksess eller fiasko:

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

Slik ser en standard GET-forespørsel ut. La oss nå dekomponere det vi har gjort så langt slik at du får en bedre forståelse av koden ovenfor. Først av alt opprettet vi en stat for å holde alle ressursene/postene vi ville hente fra posts API:

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

Da benyttet vi oss av useEffect() hekte og skrev GET-forespørselen vår i den slik at forespørselen utløses umiddelbart etter at appen monteres:

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

Etter det opprettet vi en hentingsforespørsel i useEffect() hekte og sendte URL-en vi kan bruke for å få tilgang til serveren. Siden dette gir et løfte, brukte vi then() metode. Fordi denne metoden returnerer et responsobjekt i stedet for JSON, konverterte vi først dataene til JSON-format:

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

Så fortsatte vi med å hente innleggene/dataene og lagret dem i tilstanden vi opprettet tidligere:

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

Til slutt bruker vi catch() metode for å håndtere feil:

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

Vi har allerede utført en GET-forespørsel og lagret dataene våre til tilstanden vi opprettet. Nå kan vi konsumere dataene i vår React-applikasjon.

Hvordan utføre GET HTTP-forespørsel i Reacts funksjonelle komponent med Axios

Bortsett fra Fetch API, kan vi også bruke Axios til å sende GET-forespørsler. Axios er et løftebasert HTTP-klientbibliotek som gjør det enkelt å sende asynkrone HTTP-forespørsler til REST-endepunkter.

Hvis vi vil bruke Axios, som er et eksternt bibliotek, må vi først installere det i prosjektet vårt ved å kjøre følgende kommando i prosjektets katalog:

$ npm install axios

Når vi har installert Axios, kan vi fortsette å utføre GET-forespørselen vår:

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

Dette ser mye renere ut enn det til Fetch API! Ved å se på koden ovenfor startet vi med å importere Axios siden det var et eksternt bibliotek vi installerte:

import axios from 'axios';

Vi utførte deretter GET-forespørselen i useEffect() hekte som vi gjorde for Fetch API, men denne gangen er syntaksen litt annerledes:

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

I motsetning til Fetch API-metoden, kreves det ingen alternativer for å deklarere metoden. Vi knytter ganske enkelt metoden til instansen og spør etter den, det er heller ikke nødvendig å konvertere dataene fordi den returnerer den som JSON.

Hvordan utføre GET HTTP-forespørsel i Reacts klassekomponent

En klassekomponent er en ES6-klasse som returnerer JSX og krever at React-utvidelser brukes. Før introduksjonen av kroker var dette den mest brukte metoden (dvs. tidligere versjoner 16.8) fordi tilstanden ikke kunne brukes innenfor funksjonelle komponenter.

Til tross for tilgjengeligheten av kroker, fortsetter mange å bruke klassekomponenter. La oss se på hvordan vi kan bruke constructor() metodens statlige eiendom, og ComponentDidMount() livssyklusmetode for å utføre GET HTTP-forespørsler i React med klassekomponenter.

Hvordan utføre GET HTTP-forespørsel i Reacts klassekomponenter med Fetch API

Dette er veldig likt hvordan vi utførte GET forespørsel i funksjonelle komponenter. Den eneste forskjellen er at vi nå vil bruke statens eiendom i constructor() metoden fremfor useState() krok. Dessuten vil vi håndtere vår GET forespørsel i ComponentDidMount() livssyklus i stedet for useEffect() hekte, slik at denne forespørselen utløses når appen vår monteres:

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

I koden ovenfor brukte vi konstruktørmetoden for å initialisere et objekts tilstand for å lagre ressursen/dataene vi får fra vår server/API:

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

Vi utførte deretter vår GET-forespørsel i componentDidMount() livssyklusmetode slik at den utløses når appen monteres:

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

state er et objekt som har mange tilstander, destrukturerer vi det først for å få posts tilstand, som senere kan brukes:

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

   return (
      
   );
}

Hvordan utføre GET HTTP-forespørsel i Reacts klassekomponenter med Axios

Som vi så med funksjonelle komponenter, kan vi sende GET forespørsler med Axios. Alt som gjenstår er å utføre GET forespørsel innenfor ComponentDidMount() livssyklus og for å importere 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 (
         
      );
   }
}

konklusjonen

Vi lærte hvordan du utfører GET HTTP-forespørsler med både funksjonelle komponenter og klassekomponenter ved å bruke de to mest brukte metodene – Fetch API og Axios, i denne artikkelen.

Å bruke en bestemt metode er helt opp til deg.