React'te HTTP İsteği ALIN

Giriş

Web uygulamaları geliştirirken, bir sunucuda barındırılan kaynaklara rutin olarak erişiriz. Kaynakların istenmesi, gönderilmesi veya bunlar üzerinde başka işlemlerin gerçekleştirilmesi HTTP istekleri aracılığıyla gerçekleştirilir. Bu istekler istemciden sunucudaki ana bilgisayara gönderilir. HTTP isteği yaparken istemci bir URL (Tekdüzen Kaynak Konum Belirleyicisi) ve sunucu kaynaklarına erişmek için gerekli bilgileri içeren bir yük.

Beş yaygın HTTP istek yöntemi şunlardır: GET, PUT, POST, PATCH, ve DELETE. Bu yöntemler, standart CRUD işlemlerini gerçekleştirmemizi sağlar.

Bu yazıda, Axios veya Fetch API kullanarak React'te nasıl GET HTTP isteği yapılacağını ve bunun hem sınıf hem de işlevsel bileşenlerde nasıl yapılacağını öğreneceğiz.

GET İsteği nedir?

GET sunuculardan kaynak elde etmek için kullanılan bir HTTP istek yöntemidir.

Axios ve API getir HTTP istekleri yapmak için iki ana yöntemdir.

• Getirme API'si, bir sunucudan veya bir API uç noktasından kaynak almaya yönelik yerleşik, söze dayalı bir JavaScript modülüdür.
• Axios, REST uç noktalarına eşzamansız HTTP istekleri göndermeyi kolaylaştıran, söz tabanlı bir HTTP istemci kitaplığıdır. Bu, yüklenmesi gereken harici bir kitaplıktır.

Bu yazımızda Fetch API ve Axios metodlarını kullanarak React fonksiyonel bileşenlerinde GET isteklerinin nasıl gerçekleştirileceğine ve ardından aynı işlemin sınıf tabanlı bileşenlerde nasıl yapılacağına bakacağız.

React'in İşlevsel Bileşenlerinde GET HTTP İsteği Nasıl Gerçekleştirilir

Bir JavaScript işlevi (normal veya ES6) bir React öğesi (JSX) döndürdüğünde işlevsel bir bileşen oluşturulur. GET isteklerini gerçekleştirirken çok önemli olan işlevsel bileşenlerle çalışırken React kancalarını kullanırız.

Kullanacağız useState() ve useEffect() kancalar. Çünkü useEffect() kanca, uygulama bağlandığında hemen işlenir, her zaman içinde GET istekleri gerçekleştiririz ve useState() Verilerimizi/yanıtımızı saklamak için kanca.

React'ın İşlevsel Bileşeninde Fetch API ile GET HTTP İsteği Nasıl Gerçekleştirilir

The fetch() yöntem bir zorunlu bağımsız değişkeni kabul eder; getirmek istediğimiz kaynağın URL'sinin yanı sıra istek yöntemini belirten isteğe bağlı bir bağımsız değişken. Bu isteğe bağlı bağımsız değişkenin varsayılan değeri: GET, bu nedenle bir GET isteğinde bulunurken ayarlamanız gerekmez.

Ardından Fetch API, bir Promise, böylece kullanabiliriz then() ve catch() başarı veya başarısızlıkla başa çıkma yöntemleri:

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

Standart bir GET isteği böyle görünür. Şimdi yukarıdaki kodu daha iyi anlayabilmeniz için şu ana kadar yaptıklarımızı ayrıştıralım. Öncelikle oradan alacağımız tüm kaynakları/görevleri elinde tutacak bir devlet yarattık. posts API:

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

Sonra kullandık useEffect() Uygulama yüklendikten hemen sonra isteğin tetiklenmesi için GET isteğimizi bağlayın ve içine yazdı:

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

Bundan sonra, bir getirme isteği oluşturduk. useEffect() kanca ve sunucuya erişmek için kullanabileceğimiz URL'yi geçti. Bu bir söz verdiğinden, kullandık then() yöntem. Bu yöntem JSON yerine bir yanıt nesnesi döndürdüğü için önce verileri JSON biçimine dönüştürdük:

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

Sonra gönderileri/verileri almaya devam ettik ve bunları daha önce oluşturduğumuz durumda sakladık:

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

Sonunda kullanıyoruz catch() hataları işleme yöntemi:

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

Zaten bir GET isteği gerçekleştirdik ve verilerimizi oluşturduğumuz duruma kaydettik. Artık verileri React uygulamamız içerisinde tüketebiliriz.

Axios ile React'ın İşlevsel Bileşeninde GET HTTP İsteği Nasıl Gerçekleştirilir

Getirme API'sinin yanı sıra, GET istekleri göndermek için Axios'u da kullanabiliriz. Axios REST uç noktalarına eşzamansız HTTP istekleri göndermeyi kolaylaştıran söz tabanlı bir HTTP istemci kitaplığıdır.

Eğer harici bir kütüphane olan Axios'u kullanmak istiyorsak öncelikle projemizin dizininde aşağıdaki komutu çalıştırarak projemize kurmamız gerekmektedir:

$ npm install axios

Axios'u başarıyla yükledikten sonra GET isteğimizi gerçekleştirmeye devam edebiliriz:

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

Bu, Fetch API'sinden çok daha temiz görünüyor! Yukarıdaki koda bir göz atarak, kurduğumuz harici bir kütüphane olduğu için Axios'u içe aktararak başladık:

import axios from 'axios';

Daha sonra içinde GET isteğini gerçekleştirdik. useEffect() Getirme API'si için yaptığımız gibi bağlanın, ancak bu sefer sözdizimi biraz farklı:

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

Fetch API yönteminin aksine, yöntemi bildirmek için herhangi bir seçeneğe gerek yoktur. Yöntemi örneğe ekleyip sorgularız, ayrıca verileri JSON olarak döndürdüğü için dönüştürmeye gerek yoktur.

React'in Sınıf Bileşeninde GET HTTP İsteği Nasıl Gerçekleştirilir

Sınıf bileşeni, JSX döndüren ve React uzantılarının kullanılmasını gerektiren bir ES6 sınıfıdır. Kancaların kullanıma sunulmasından önce, durum işlevsel bileşenler içinde kullanılamadığı için bu en yaygın kullanılan yöntemdi (yani önceki sürümler 16.8).

Kancaların varlığına rağmen birçok kişi sınıf bileşenlerini kullanmaya devam ediyor. Şimdi nasıl kullanabileceğimize bakalım constructor() yöntemin durum özelliği ve ComponentDidMount() sınıf bileşenleriyle React'te GET HTTP isteklerini gerçekleştirmek için yaşam döngüsü yöntemi.

Fetch API ile React'ın Sınıf Bileşenlerinde GET HTTP İsteği Nasıl Gerçekleştirilir

Bu, bizim gerçekleştirdiğimize çok benzer. GET fonksiyonel bileşenlerde istek. Tek fark, artık devlet mülkünü constructor() yerine yöntem useState() kanca. Ayrıca, işimizi halledeceğiz GET içinde talep ComponentDidMount() yerine yaşam döngüsü useEffect() kanca, böylece uygulamamız bağlandığında bu istek tetiklenir:

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

Yukarıdaki kodda, sunucumuzdan/API'mizden alacağımız kaynağı/veriyi depolamak amacıyla bir nesnenin durumunu başlatmak için yapıcı yöntemini kullandık:

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

Daha sonra GET isteğimizi componentDidMount() yaşam döngüsü yöntemi, böylece uygulama bağlandığında tetiklenir:

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

state birçok durum içeren bir nesnedir, önce onu elde etmek için onu yok ederiz. posts daha sonra kullanılabilecek durum:

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

   return (
      
   );
}

Axios ile React'ın Sınıf Bileşenlerinde GET HTTP İsteği Nasıl Gerçekleştirilir

İşlevsel bileşenlerle gördüğümüz gibi, gönderebiliriz GET Axios ile istekler. Geriye kalan tek şey yürütmek GET içinde istek ComponentDidMount() yaşam döngüsü ve Axios'u içe aktarmak için:

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

Sonuç

Bu makalede, en sık kullanılan iki yöntemi (Fetch API ve Axios) kullanarak hem işlevsel hem de sınıf bileşenleriyle GET HTTP isteklerinin nasıl gerçekleştirileceğini öğrendik.

Belirli bir yöntemi kullanmak tamamen size kalmış.