HttpRequest Sınıfı

Bu sınıf, HTTP istekleri göndermek için kullanılır. Aşağıda, temel HTTP işlemleri (GET, POST, PUT, DELETE) için metod açıklamaları ve bu metodların nasıl kullanılacağına dair örnekler yer almaktadır.

Yükleme

Paketi İndirme

Terminal veya komut istemcisinde, projenizin kök dizininde aşağıdaki komutu çalıştırarak paketinizi indirebilirsiniz:

npm install request-mate

Paketi İçe Aktarma

Terminal veya komut istemcisinde, projenizin kök dizininde aşağıdaki komutu çalıştırarak paketinizi indirebilirsiniz:

import HttpRequest from 'request-mate';

Özellikler

• headers: İstekler için kullanılacak HTTP başlıklarını içeren bir obje.
• payload: POST ve PUT isteklerinde gönderilecek veri.
• isLoading: İstek yapılırken yükleme durumunu belirten bir boolean değeri.
• errorHandler: Hata oluştuğunda çağrılacak olan fonksiyon.
• jwtToken: JSON Web Token değerini tutar. Eğer varsa, her istekte Authorization başlığına eklenir.

Metodlar

• setHeader(key, value): Belirli bir HTTP başlığı ayarlamak için kullanılır.
• setPayload(data): POST veya PUT isteği için gönderilecek veriyi ayarlar.
• setErrorHandler(handler): Hata yönetimi için kullanılacak callback fonksiyonunu ayarlar.
• setJwtToken(token): JWT token'ını ayarlar ve localStorage'a kaydeder.
• removeJwtToken(): JWT token'ını sıfırlar ve localStorage'dan kaldırır.
• setLoadingCallback(callback): Yükleme durumu değiştiğinde çağrılacak fonksiyonu ayarlar.
• get(url): GET isteği yapar.
• post(url): POST isteği yapar.
• put(url): PUT isteği yapar.
• delete(url): DELETE isteği yapar.

Kullanım Örnekleri

GET İsteği Yapmak

const httpRequest = new HttpRequest();
httpRequest.get('https://api.example.com/data')
  .then(data => console.log(data))
  .catch(error => console.error(error));

POST İsteği Yapmak

const httpRequest = new HttpRequest();
httpRequest.setPayload({ name: 'John Doe', job: 'Developer' });
httpRequest.post('https://api.example.com/users')
  .then(data => console.log(data))
  .catch(error => console.error(error));

PUT İsteği Yapmak

const httpRequest = new HttpRequest();
httpRequest.setPayload({ name: 'Jane Doe', job: 'Manager' });
httpRequest.put('https://api.example.com/users/1')
  .then(data => console.log(data))
  .catch(error => console.error(error));

DELETE İsteği Yapmak

const httpRequest = new HttpRequest();
httpRequest.delete('https://api.example.com/users/1')
  .then(response => console.log('User deleted'))
  .catch(error => console.error(error));

Yükleme Durumu için Callback Fonksiyonu Ayarlamak

const httpRequest = new HttpRequest();
httpRequest.setLoadingCallback(isLoading => {
  if (isLoading) {
    console.log('Request is loading...');
  } else {
    console.log('Request has completed.');
  }
});

Hata Yönetimi için ErrorHandler Fonksiyonu Ayarlamak

const httpRequest = new HttpRequest();
httpRequest.setErrorHandler(error => {
  console.error('An error occurred:', error.message);
});

POST İsteği ile JSON Verisi Göndermek

const httpRequest = new HttpRequest();
const userData = { name: 'John Doe', email: '[email protected]' };

httpRequest.setPayload(userData);
httpRequest.post('https://api.example.com/users')
  .then(data => console.log('User created:', data))
  .catch(error => console.error('Error creating user:', error));

PUT İsteği ile Mevcut Kullanıcı Bilgisini Güncellemek

const httpRequest = new HttpRequest();
const userUpdateData = { name: 'Jane Doe', email: '[email protected]' };

httpRequest.setPayload(userUpdateData);
httpRequest.put('https://api.example.com/users/123')
  .then(data => console.log('User updated:', data))
  .catch(error => console.error('Error updating user:', error));

Loading Callback'i ile GET İsteği

const httpRequest = new HttpRequest();

// Yükleme callback fonksiyonunu ayarla
httpRequest.setLoadingCallback(loading => {
  const loadingStatus = loading ? 'Loading...' : 'Done loading!';
  console.log(loadingStatus);
});

httpRequest.get('https://api.example.com/data')
  .then(data => console.log('Data retrieved:', data))
  .catch(error => console.error('Error retrieving data:', error));

Loading Callback'i ile POST İsteği

const httpRequest = new HttpRequest();
const newPostData = { title: 'New Post', content: 'This is a new post.' };

// Yükleme callback fonksiyonunu ayarla
httpRequest.setLoadingCallback(loading => {
  document.getElementById('loading-indicator').style.display = loading ? 'block' : 'none';
});

// POST isteğinde bulun
httpRequest.setPayload(newPostData);
httpRequest.post('https://api.example.com/posts')
  .then(data => console.log('Post created:', data))
  .catch(error => console.error('Error creating post:', error));

startLoading ve stopLoading Fonksiyonları İle Yükleme Durumunu Elle Yönetmek

const httpRequest = new HttpRequest();

// Özel bir yükleme durumu yönetimi
function customLoadingHandler() {
  httpRequest.startLoading(); // Yükleme işlemini başlat
  console.log('Custom loading started...');

  httpRequest.get('https://api.example.com/data')
    .then(data => {
      console.log('Data retrieved:', data);
    })
    .catch(error => {
      console.error('Error retrieving data:', error);
    })
    .finally(() => {
      httpRequest.stopLoading(); // Yükleme işlemini durdur
      console.log('Custom loading finished.');
    });
}

// Özel yükleme işlemini başlat
customLoadingHandler();

Bu örnekte, customLoadingHandler fonksiyonu yükleme işlemini başlatmak için startLoading metodunu çağırır ve ardından bir GET isteği yapar. İstek tamamlandığında veya bir hata oluştuğunda, finally bloğu içindeki stopLoading metodu çağrılır. Bu, yükleme durumunu elle kontrol etmek için kullanılabilecek bir örnektir.