FÅ HTTP-anmodning i React

Introduktion

Når vi udvikler webapplikationer – tilgår vi rutinemæssigt ressourcer hostet på en server. At bede om, sende eller udføre andre handlinger på ressourcer udføres gennem HTTP-anmodninger. Disse anmodninger sendes fra klienten til en vært på en server. Når klienten laver en HTTP-anmodning, bruger en URL (Uniform Resource Locator) og en nyttelast, der indeholder den nødvendige information for at få adgang til serverressourcerne.

De fem almindelige HTTP-anmodningsmetoder er GET, PUT, POST, PATCHog DELETE. Disse metoder giver os mulighed for at udføre standard CRUD-operationer.

I denne artikel lærer vi, hvordan man laver en GET HTTP-anmodning i React ved hjælp af enten Axios eller Fetch API, samt hvordan man gør det i både klasse- og funktionelle komponenter.

Hvad er GET-anmodning?

GET er en HTTP-anmodningsmetode, der bruges til at hente ressourcer fra servere.

Axios og Hent API er de to vigtigste metoder til at lave HTTP-anmodninger.

• Fetch API er et indbygget løftebaseret JavaScript-modul til at hente ressourcer fra en server eller et API-slutpunkt.
• Axios er et løftebaseret HTTP-klientbibliotek, der gør det nemt at sende asynkrone HTTP-anmodninger til REST-slutpunkter. Dette er et eksternt bibliotek, der skal installeres.

I denne artikel vil vi se på, hvordan man udfører GET-anmodninger i React-funktionelle komponenter ved hjælp af Fetch API- og Axios-metoderne, og derefter hvordan man gør det samme i klassebaserede komponenter.

Sådan udføres GET HTTP-anmodning i Reacts funktionelle komponenter

En funktionel komponent oprettes, når en JavaScript-funktion (enten normal eller ES6) returnerer et React-element (JSX). Vi bruger React hooks, når vi arbejder med funktionelle komponenter, som er meget vigtige ved udførelse af GET-forespørgsler.

Vi bruger useState() , useEffect() kroge. Fordi useEffect() hook gengiver med det samme, når appen monteres, udfører vi altid GET-anmodninger i den, og vi bruger useState() krog for at gemme vores data/svar.

Sådan udføres GET HTTP-anmodning i Reacts funktionelle komponent med Fetch API

fetch() metode accepterer et obligatorisk argument – ​​URL'en til den ressource, vi ønsker at hente, samt et valgfrit argument, der angiver anmodningsmetoden. Standardværdien for det valgfrie argument er GET, så det er ikke nødvendigt at indstille det, når du laver en GET-anmodning.

Så returnerer Fetch API en Promise, så vi kan bruge then() , catch() metoder til at håndtere succes 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 (
      
   );
};

Sådan ser en standard GET-anmodning ud. Lad os nu nedbryde, hvad vi har gjort indtil videre, så du får en bedre forståelse af koden ovenfor. Først og fremmest oprettede vi en stat til at holde alle de ressourcer/poster, vi ville hente fra posts API'er:

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

Så gjorde vi brug af useEffect() hook og skrev vores GET-anmodning i den, så anmodningen udløses umiddelbart efter, at appen er monteret:

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

Derefter oprettede vi en hentningsanmodning i useEffect() hook og sendte den URL, vi kan bruge til at få adgang til serveren. Da dette giver et løfte, brugte vi then() metode. Fordi denne metode returnerer et svarobjekt i stedet for JSON, konverterede vi først dataene til JSON-format:

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

Derefter fortsatte vi med at hente indlæggene/dataene og gemte dem i den tilstand, vi oprettede tidligere:

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

Til sidst bruger vi catch() metode til at håndtere fejl:

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 udført en GET-anmodning og gemt vores data i den tilstand, vi oprettede. Nu kan vi forbruge dataene i vores React-applikation.

Sådan udføres GET HTTP-anmodning i Reacts funktionelle komponent med Axios

Bortset fra Fetch API, kan vi også bruge Axios til at sende GET-anmodninger. Axios er et løftebaseret HTTP-klientbibliotek, der gør det nemt at sende asynkrone HTTP-anmodninger til REST-endepunkter.

Hvis vi vil bruge Axios, som er et eksternt bibliotek, skal vi først installere det i vores projekt ved at køre følgende kommando i vores projekts bibliotek:

$ npm install axios

Når vi har installeret Axios, kan vi fortsætte med at udføre vores GET-anmodning:

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 meget renere ud end Fetch API! Ved at se på koden ovenfor startede vi med at importere Axios, da det var et eksternt bibliotek, vi installerede:

import axios from 'axios';

Vi udførte derefter GET-anmodningen inden for useEffect() hook som vi gjorde for Fetch API, men denne gang er syntaksen lidt anderledes:

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

I modsætning til Fetch API-metoden kræves der ingen muligheder for at erklære metoden. Vi vedhæfter simpelthen metoden til instansen og forespørger på den, også er der ingen grund til at konvertere dataene, fordi den returnerer den som JSON.

Sådan udføres GET HTTP-anmodning i Reacts klassekomponent

En klassekomponent er en ES6-klasse, der returnerer JSX og kræver, at React-udvidelser bruges. Før introduktionen af ​​kroge var dette den mest anvendte metode (dvs. tidligere versioner 16.8), fordi tilstanden ikke kunne bruges inden for funktionelle komponenter.

På trods af tilgængeligheden af ​​kroge fortsætter mange mennesker med at bruge klassekomponenter. Lad os se på, hvordan vi kan bruge constructor() metodens statsejendom, og den ComponentDidMount() livscyklusmetode til at udføre GET HTTP-anmodninger i React med klassekomponenter.

Sådan udføres GET HTTP-anmodning i Reacts klassekomponenter med Fetch API

Dette er meget lig, hvordan vi udførte GET anmodning i funktionelle komponenter. Den eneste forskel er, at vi nu vil bruge statens ejendom i constructor() metode frem for useState() krog. Vi vil også håndtere vores GET anmodning i ComponentDidMount() livscyklus frem for useEffect() krog, så denne anmodning udløses, når vores app er monteret:

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 brugte vi konstruktørmetoden til at initialisere et objekts tilstand for at gemme den ressource/data, vi får fra vores server/API:

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

Vi udførte derefter vores GET-anmodning i componentDidMount() livscyklusmetode, så den udløses, når appen er monteret:

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, der har mange tilstande, destrukturerer vi det først for at få posts tilstand, som senere kan bruges:

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

   return (
      
   );
}

Sådan udføres GET HTTP-anmodning i Reacts klassekomponenter med Axios

Som vi så med funktionelle komponenter, kan vi sende GET anmodninger med Axios. Det eneste, der er tilbage, er at udføre GET anmodning inden for ComponentDidMount() livscyklus og for at 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 (
         
      );
   }
}

Konklusion

Vi lærte, hvordan man udfører GET HTTP-anmodninger med både funktionelle og klassekomponenter ved hjælp af de to mest almindeligt anvendte metoder – Fetch API og Axios, i denne artikel.

Det er helt op til dig at bruge en bestemt metode.