Hämta HTTP-förfrågan i React

Beskrivning

När vi utvecklar webbapplikationer – kommer vi rutinmässigt åt resurser som finns på en server. Att be om, skicka eller utföra andra operationer på resurser sker genom HTTP-förfrågningar. Dessa förfrågningar skickas från klienten till en värd på en server. När en HTTP-förfrågan görs använder klienten en URL (Uniform Resource Locator) och en nyttolast som innehåller nödvändig information för att komma åt serverresurserna.

De fem vanliga HTTP-begäransmetoderna är GET, PUT, POST, PATCHoch DELETE. Dessa metoder tillåter oss att utföra vanliga CRUD-operationer.

I den här artikeln kommer vi att lära oss hur man gör en GET HTTP-förfrågan i React med antingen Axios eller Fetch API, samt hur man gör det i både klass- och funktionskomponenter.

Vad är GET-förfrågan?

GET är en HTTP-förfrågningsmetod som används för att hämta resurser från servrar.

Axios och Fetch API är de två huvudsakliga metoderna för att göra HTTP-förfrågningar.

• Fetch API är en inbyggd löftesbaserad JavaScript-modul för att hämta resurser från en server eller en API-slutpunkt.
• Axios är ett löftesbaserat HTTP-klientbibliotek som gör det enkelt att skicka asynkrona HTTP-förfrågningar till REST-slutpunkter. Detta är ett externt bibliotek som måste installeras.

I den här artikeln kommer vi att titta på hur man utför GET-förfrågningar i React funktionella komponenter med Fetch API och Axios metoder, och sedan hur man gör detsamma i klassbaserade komponenter.

Hur man utför GET HTTP-förfrågan i Reacts funktionella komponenter

En funktionell komponent skapas när en JavaScript-funktion (antingen normal eller ES6) returnerar ett React-element (JSX). Vi använder React-krokar när vi arbetar med funktionella komponenter, vilket är mycket viktigt när vi utför GET-förfrågningar.

Vi använder useState() och useEffect() krokar. Eftersom det useEffect() hook återges omedelbart när appen monteras utför vi alltid GET-förfrågningar inom den, och vi använder useState() krok för att lagra vår data/svar.

Hur man utför GET HTTP-förfrågan i Reacts funktionella komponent med Fetch API

Smakämnen fetch() metod accepterar ett obligatoriskt argument – ​​URL:en till resursen vi vill hämta, samt ett valfritt argument som indikerar förfrågningsmetoden. Standardvärdet för det valfria argumentet är GET, så det är inte nödvändigt att ställa in det när du gör en GET-förfrågan.

Sedan returnerar Fetch API en Promise, så att vi kan använda then() och catch() metoder för att hantera framgång eller misslyckande:

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å här ser en standard GET-förfrågan ut. Låt oss nu dekomponera vad vi har gjort hittills så att du får en bättre förståelse av koden ovan. Först och främst skapade vi en stat för att hålla alla resurser/poster vi skulle hämta från posts API:

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

Sedan använde vi oss av useEffect() kroka och skrev vår GET-förfrågan i den så att begäran utlöses direkt efter att appen har monterats:

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

Efter det skapade vi en hämtningsförfrågan i useEffect() hook och skickade den URL som vi kan använda för att komma åt servern. Eftersom detta ger ett löfte använde vi then() metod. Eftersom den här metoden returnerar ett svarsobjekt snarare än JSON, konverterade vi först data till JSON-format:

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

Sedan fortsatte vi med att hämta inläggen/data och lagrade dem i det tillstånd vi skapade tidigare:

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

Slutligen använder vi catch() metod för att hantera fel:

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 redan utfört en GET-begäran och sparat vår data i det tillstånd vi skapade. Nu kan vi konsumera data i vår React-applikation.

Hur man utför GET HTTP-förfrågan i Reacts funktionella komponent med Axios

Förutom Fetch API kan vi också använda Axios för att skicka GET-förfrågningar. Axios är ett löftesbaserat HTTP-klientbibliotek som gör det enkelt att skicka asynkrona HTTP-förfrågningar till REST-slutpunkter.

Om vi ​​vill använda Axios, som är ett externt bibliotek, måste vi först installera det i vårt projekt genom att köra följande kommando i vårt projekts katalog:

$ npm install axios

När vi väl har installerat Axios kan vi fortsätta att utföra vår GET-förfrågan:

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

Det här ser mycket renare ut än det för Fetch API! När vi tittade på koden ovan började vi med att importera Axios eftersom det var ett externt bibliotek vi installerade:

import axios from 'axios';

Vi utförde sedan GET-begäran inom useEffect() krok som vi gjorde för Fetch API, men den här gången är syntaxen lite annorlunda:

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

Till skillnad från Fetch API-metoden krävs inga alternativ för att deklarera metoden. Vi bifogar helt enkelt metoden till instansen och frågar efter den, även det finns inget behov av att konvertera data eftersom den returnerar den som JSON.

Hur man utför GET HTTP-förfrågan i Reacts klasskomponent

En klasskomponent är en ES6-klass som returnerar JSX och kräver att React-tillägg används. Före introduktionen av krokar var detta den mest använda metoden (dvs. tidigare versioner 16.8) eftersom tillståndet inte kunde användas inom funktionella komponenter.

Trots tillgången på krokar fortsätter många att använda klasskomponenter. Låt oss titta på hur vi kan använda constructor() metodens statliga egendom, och den ComponentDidMount() livscykelmetod för att utföra GET HTTP-förfrågningar i React med klasskomponenter.

Hur man utför GET HTTP-förfrågan i Reacts klasskomponenter med Fetch API

Detta är väldigt likt hur vi utförde GET begäran i funktionella komponenter. Den enda skillnaden är att vi nu kommer att använda statens egendom i constructor() metod snarare än useState() krok. Vi kommer också att hantera vår GET begäran i ComponentDidMount() livscykel snarare än useEffect() krok, så att denna begäran utlöses när vår app har monterats:

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 ovan använde vi konstruktormetoden för att initiera ett objekts tillstånd för att lagra resursen/datan vi kommer att få från vår server/API:

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

Vi utförde sedan vår GET-förfrågan i componentDidMount() livscykelmetod så att den utlöses när appen har monterats:

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

state är ett objekt som har många tillstånd, först destrukturerar vi det för att få posts tillstånd, som senare kan användas:

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

   return (
      
   );
}

Hur man utför GET HTTP-förfrågan i Reacts klasskomponenter med Axios

Som vi såg med funktionella komponenter kan vi skicka GET förfrågningar med Axios. Allt som återstår är att utföra GET begäran inom ComponentDidMount() livscykel och för att importera 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 (
         
      );
   }
}

Slutsats

Vi lärde oss hur man utför GET HTTP-förfrågningar med både funktionella komponenter och klasskomponenter med de två vanligaste metoderna – Fetch API och Axios, i den här artikeln.

Att använda en specifik metod är helt upp till dig.