React'te POST HTTP İsteği

Giriş

API'lerle çalışırken çoğu zaman verileri işlenmek üzere sunucuya göndermek isteriz. Örneğin, bir yapılacaklar listemiz varsa ve buna bir form gönderimi yoluyla ekleme yapmak istiyorsak, işlenmek üzere ve olası kalıcılığa yönelik bir yük içeren bir istek göndermek için POST HTTP isteklerini kullanırız.

Bu makalede, React'ta POST HTTP isteklerinin iki yaygın yaklaşımı kullanarak nasıl gerçekleştirileceğini öğreneceğiz: Fetch API ve Axios. Bunu işlevsel ve sınıf tabanlı bileşenlerde nasıl yapacağımızı da öğreneceğiz.

Fetch API'yi kullanarak React ile POST HTTP isteği göndermek şu kadar kolaydır:

fetch('/myserver.endpoint', {
  method: 'POST',
  body: JSON.stringify({
    
  })
  headers: {
    'Content-type': 'application/json; charset=UTF-8',
  },
})
   .then((response) => response.json())
   .then((data) => {
      console.log(data);
      
   })
   .catch((err) => {
      console.log(err.message);
   });

Axios bize HTTP POST isteklerini göndermek için zarif bir alternatif sunuyor:

axios.post('/myserver.endpoint', {
    
  })
  .then((response) => {
    console.log(response.data);
      
  })
  .catch((error) => {
    console.log(error);
  })

Bu yaklaşımlar ve nasıl çalıştıkları hakkında daha fazla bilgi edinmek istiyorsanız lütfen kılavuzun geri kalanını okuyun!

POST HTTP İsteği nedir?

Adından da anlaşılacağı gibi POST istekleri, verileri bir uç noktaya göndermek için kullanılır; bu uç nokta genellikle verileri işler ve bir veritabanına kaydeder. Bu veriler bir formdan gelebilir, bir nesneye kaydedilebilir veya başka bir şekilde elde edilebilir; ancak genellikle REST API'nin kullanması için bir JSON temsiline dönüştürülür.

Herhangi bir fiille HTTP isteklerinin gönderilmesi basitleştirilmiştir. API getir (yerleşik) ve kütüphaneler gibi Axios. Fetch API, HTTP isteklerini gerçekleştirmek için yerleşik bir tarayıcı yöntemidir; Axios ise kullanmadan önce projemize yüklememiz gereken harici bir pakettir.

Bunlar arasında seçim yapmak size kalmış. Fetch API'si daha ayrıntılıdır ve eşzamansız isteklerle çalışmaz ancak Axios harici bir bağımlılıktır. Yine de çoğu kişi Fetch API yerine Axios ile çalışmayı tercih ediyor. Her ikisini de ele alacağız.

Her iki yöntemin de avantajları ve dezavantajları vardır ancak standart HTTP fiillerini işleyebileceklerini unutmamak önemlidir. POST, GET, PUT, PATCH, DELETE.

Örneğimizde, sahte bir API'den zaten almış olduğumuz gönderilerin bir listesi üzerinde çalışacağız. Yeni bir gönderinin başlığını ve metnini alan ve gönderildikten sonra işlenmek üzere sahte sunucuya bir POST isteği gönderen bir form oluşturacağız:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);

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

   return (
      <>
         <div className="add-post-container">
            <form>
               <input type="text" className="form-control" />
               <textarea className="form-control" cols="10" rows="8"></textarea>
               <button type="submit">Add Post</button>
            </form>
         </div>
         <div className="posts-container">
            {posts.map((post) => {
               return (
                  <div className="post-card" key={post.id}>
                     <h2 className="post-title">{post.title}</h2>
                     <p className="post-body">{post.body}</p>
                     <div className="button">
                        <div className="delete-btn">Delete</div>
                     </div>
                  </div>
               );
            })}
         </div>
      </>
   );
};

export default App;

Şimdi formu işlevsel hale getirelim ki form gönderildikten sonra web sitemizdeki gönderi listelerine veri ekleyelim.

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

React'e kancaların eklenmesi sayesinde artık işlevsel bileşenlerde HTTP isteklerini gerçekleştirebiliyoruz. Daha önce işlevsel bileşenler yalnızca kullanıcı arayüzünün oluşturulması için kullanılıyordu.

Bir JavaScript işlevi (standart veya ES6) bir React öğesi (JSX) döndürdüğünde işlevsel bir bileşen oluşturulur.

Sınıf tabanlı bileşenlerde olduğu gibi yapıcı yöntemde durum nesnesini kullanmak yerine, artık aşağıdaki gibi React kancalarını kullanıyoruz: useState() Verilerimizi orijinal verilere aktarmadan önce saklamak için.

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

Çünkü Fetch API, bir sonuç döndüren yerleşik bir tarayıcı yöntemidir. Promise, kullanırız .then() ve .catch() Başarı ve başarısızlıkla başa çıkma yöntemleri. Ayrıca, POST verilerini eklemek istediğimiz kaynağın/API'nin URL'si olan zorunlu bir argümanın yanı sıra, bizim durumumuzda olduğu gibi HTTP isteğini belirten bir argümanı da kabul eder. POST:

import { useState, useEffect } from 'react';

const App = () => {
   const [posts, setPosts] = useState([]);
   const [title, setTitle] = useState('');
   const [body, setBody] = useState('');
   
   
   
   
   const handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: title,
            body: body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((res) => res.json())
         .then((post) => {
            setPosts((posts) => [post, ...posts]);
            setTitle('');
            setBody('');
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   return (
      
   );
};

export default App;

Yukarıdaki kodda formun gönder butonuna tıklandığında tetiklenecek şekilde forma bağlayacağımız bir yöntem oluşturduk. kullanarak başladık e.preventDefault() formu gönderirken sayfanın yeniden yüklenmesini önlemek için genellikle olmasını istediğiniz ancak demomuzda pek işe yaramayan şey:

const handleSubmit = (e) => {
   e.preventDefault();
};

Bakmak fetch() çağrısında ilk zorunlu parametre olarak URL'yi ekledik ve ikinci parametre istek yöntemini (POST) alır, body, Ve header:

• body – API uç noktasına göndermek istediğimiz verileri içerir. dizmekbunu metin tabanlı bir JSON temsiline dönüştürüyoruz.
• header – bizim durumumuzda içerik türünü belirtir application/json, yükümüz bir JSON dizesi olarak temsil edildiğinden:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: title,
         body: body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Son olarak, bu yöntem bir sonuç döndürdüğü için Promise, JSON içeriğini buradan çıkaracağız (sunucunun yanıtı), posts yeni verileri dahil edeceğini belirtir.

Hataları işlemek için ayrıca şunu da kullandık: .catch() yöntem:

const handleSubmit = (e) => {
   e.preventDefault();
   fetch({...})
      .then((res) => res.json())
      .then((post) => {
         setPosts((posts) => [post, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

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

Önceki bölümde Fetch API ile POST isteklerinin nasıl gerçekleştirileceğini anlatmıştık. Şimdi değiştirelim handleSubmit() yöntemini kullanın ve bunun yerine Axios ile POST isteklerini gerçekleştirin.

Axios, göndermeyi kolaylaştırmak için vaatleri kullanan bir HTTP istemci kitaplığıdır eşzamansız HTTP istekleri REST uç noktalarına. Harici bir kütüphane olduğu için öncelikle projemizin dizininde aşağıdaki komutu çalıştırarak projemize kurmamız gerekiyor:

$ npm install axios

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

const handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: title,
         body: body,
      })
      .then((res) => {
         setPosts((posts) => [res.data, ...posts]);
         setTitle('');
         setBody('');
      })
      .catch((err) => {
         console.log(err.message);
      });
};

Yukarıdaki koda baktığımızda, artık JSON'a dönüştürmemize, başlıklarla çalışmamıza ve hatta verilerimizi dizilişlendirmemize gerek kalmadığı için, Fetch API'sinden çok daha kolay ve daha az sözdizimi gerektiriyor. Bu ortak metin Axios tarafından soyutlanmıştır.

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

Sınıf bileşenlerindeki POST istekleri, işlevsel bileşenlerden farklı şekilde ele alınır çünkü artık React kancalarını kullanmıyoruz ve bunun yerine state nesne.

Sınıf bileşeni, JSX döndüren ve React uzantıları gerektiren bir ES6 sınıfıdır.

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

İstek, işlevsel bileşenlerinkine çok benzer. Bazı farklılıklar bulacağımız tek alan, verileri depolarken state ve kullanırken state değerleri artık kullanmıyoruz çünkü useState() kanca:

import React, { Component } from 'react';

class App extends Component {

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

   handleSubmit = (e) => {
      e.preventDefault();
      fetch('https://jsonplaceholder.typicode.com/posts', {
         method: 'POST',
         body: JSON.stringify({
            title: this.state.title,
            body: this.state.body,
            userId: Math.random().toString(36).slice(2),
         }),
         headers: {
            'Content-type': 'application/json; charset=UTF-8',
         },
      })
         .then((response) => response.json())
         .then((data) => {
            this.setState({ posts: [data, ...this.state.posts] });
            this.setState({ title: '' });
            this.setState({ body: '' });
         })
         .catch((err) => {
            console.log(err.message);
         });
   };

   render() {
      const { posts, title, body } = this.state;
      return (
         
      );
   }
}

export default App;

Bu sefer artık yöntemleri deklare etmiyoruz. const anahtar kelime. Bunun yerine, bunların önüne şunu ekleyin: this. Bu yöntem, formun gönder düğmesine tıklandığında tetiklenecektir. Bu bir form olduğu için şunu kullanarak başladık: e.preventDefault() form gönderildiğinde sayfanın yeniden yüklenmesini önlemek için:

handleSubmit = (e) => {
   e.preventDefault();
};

Daha önce öğrendiğimiz gibi Fetch API iki parametre alır. Biri URL, ikincisi ise istek yöntemi gibi seçenekleri içerir (POST), body, gönderdiğimiz bilgidir (dizge haline getirilmelidir) ve ardından headers:

handleSubmit = (e) => {
   e.preventDefault();
   fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      body: JSON.stringify({
         title: this.state.title,
         body: this.state.body,
         userId: Math.random().toString(36).slice(2),
      }),
      headers: {
         'Content-type': 'application/json; charset=UTF-8',
      },
   })
};

Bunun bir söz olduğunu bilerek artık ekleyebiliriz. .then() başarıyı ele alma yöntemi ve .catch() HTTP isteğinde bir hata veya başarısızlık olması durumunda durumu ele alma yöntemi.

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

Nasıl performans sergileyeceğimizi gördük POST Sınıf tabanlı bileşenlerdeki HTTP istekleri. Bu Axios'a çok benzer, çünkü tek yapmamız gereken Axios'u kurmak ve sonra onu değiştirmek. handleSubmit() yöntemini kullanıyoruz, bu yüzden artık Fetch API yerine Axios'u kullanıyoruz:

handleSubmit = (e) => {
   e.preventDefault();
   axios
      .post('https://jsonplaceholder.typicode.com/posts', {
         title: this.state.title,
         body: this.state.body,
         userId: 1,
      })
      .then((response) => {
         this.setState({ posts: [response.data, ...this.state.posts] });
         this.setState({ title: '' });
         this.setState({ body: '' });
      })
      .catch((error) => console.log(error));
};

Sonuç

Bu kılavuzda, React'te POST HTTP isteklerini gerçekleştirmek için iki ana yöntemin nasıl kullanılacağını öğrendik. Bunların hem fonksiyonel hem de sınıf bazlı bileşenlerde nasıl yapılabileceğini de gördük, dolayısıyla projemizde ne kullanılırsa kullanılsın bu makale bize hizmet edebilir.