React Native HTTP Kullanımı

React Native ile tasarlamış olduğunuz uygulamanın dinamik bir yapıya bürünmesi için uzak sunucular ile veri alışverişi içerisinde bulunması gerekir örneğin bir kullanıcı girişi olan, RSS beslemesi yada ürün listesi çekme işlemi yaptığınız bir uygulama için uzak sunucudan veri çekilmesi gerekecektir. Bu tarz işlemler RN ile oldukça basitdir. facebook github sayfasında belirttiği kodu örnek alırsak

fetch('https://mywebsite.com/endpoint/', {
  method: 'POST',
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

yukarıdaki satırlarda tüm olay anlaşılmaktadır ancak bir blog sitesinde gördüğüm yapıyı kullandım ve daha başarılı sonuçlar elde ettiğimi söyleyebilirim yapı ise şöyle ;

 await fetch('http://setedilecekdomainadi.com', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:serializeKey({
              postsunucuadi:gidecekDeger
            })
          })
          .then((response) => response.json())
          .then((responseJson) => {
            this.setState({
              data: responseJson.status, // dönen değer parse edilerek array tipine döndürüldü ve status keyi alındı
            });
          })
          .catch((error) => {
            console.error(error);
          });

buradaki serializeKey methodu için yeni bir common.js dosyası oluşturuyoruz ve bunu kullanacağımız dosyaya import ediyoruz.

export function serializeKey(data) {
	var formBody = [];
	for (var property in data) {
	  var encodedKey = encodeURIComponent(property);
	  var encodedValue = encodeURIComponent(data[property]);
	  formBody.push(encodedKey + "=" + encodedValue);
	}
	formBody = formBody.join("&");
	return formBody;
}

Kullanılan yapıda önemli nokta fetch in başında await kullandık ve bunun sebebi fetch işlemi tamamlanana kadar program burada bekleyecek fetch edildikten sonra program kaldığı yerden devam edecektir. Ancak burada await kullanabilmemiz için foksyionumuzun async yapılması gerekir. Uzak sunucuda yani php tabanlı çalıştırdığımız scripte direk $_POST methodu ile burada belirttiğimiz değişkeni çekebiliriz yani $_POST[‘postsunucuadi’]; RN uygulamamızdan veriyi gönderdik bu sefer sunucudan değer dönecek işte bu dönen değerin tipi JSON olmalıdır . JSON olarak okuduğumuz veriyi ise direk state içindeki değişkenimize key değerini girerek atadık.