React Native | Bölüm 3: HTTP İstekleri

Hacknology

Kıdemli Üye
25 Eki 2015
2,713
0
rm -rf /
Merhabalar, bugünkü yazımızda react native'in birkaç yapısından ve örnek http isteklerinden bahsedeceğiz. Bunu "fetch" ile yapacağız.

Gbmdpof adlı üyemizin yazısında temel yapıları zaten öğrenmiştik.
Kod:
import React, { Component } from 'react'
import { View, Text } from 'react-native'
kod bloğu ile gerekli araçlarımızı içe aktarmakla başlayalım. Şimdi ana kodumuzu yazmaya geçebiliriz. Biz componentDidMount adlı metodu kullanacağız, mümkün olan en kısa sürede işlemimizi yapacaktır.
Kod:
export default class HttpExample extends Component {
satırı ile sınıfımızı oluşturduk, şimdi metodumuzu kodlayalım.
Kod:
componentDidMount = () => {
      fetch('https://jsonplaceholder.typicode.com/posts/1', {
         method: 'GET'
      })
      .then((response) => response.json())
      .then((responseJson) => {
         console.log(responseJson);
         
         this.setState({
            data: responseJson
         })
      })

Bu asıl işi yapan kodumuz,fetch fonksiyonunun içinde url yi ve metodumuzu belirttik. Sonra json olan response'u düzenledik ve bir değişkene atadık. HTTP işlemimiz tamam, ama hata olabilir.
Kod:
.catch((error) => {
         console.error(error);
      });

Bir hata varsa bu kod parçacığı sayesinde görebileceğiz.
Kod:
render() {
      return (
         <View>
            <Text>
               {this.state.data.body}
            </Text>
         </View>
      )
   }
}

Son olarak render ile ekrana bu aldığımız veriyi yazdırdık. Şimdi proje dosyama gelip expo ile çalıştıracağım.
Son kod:
Kod:
[font=monospace][color=#008000][b]import[/b][/color] React, { Component } from [color=#BA2121]'react'[/color]
[color=#008000][b]import[/b][/color] { View, Text } from [color=#BA2121]'react-native'[/color]

[color=#008000][b]export[/b][/color] [color=#008000][b]default[/b][/color] [color=#008000][b]class[/b][/color] HttpExample [color=#008000][b]extends[/b][/color] Component {
   state [color=#666666]=[/color] {
      data[color=#666666]:[/color] [color=#BA2121]''[/color]
   }
   componentDidMount [color=#666666]=[/color] () => {
      fetch([color=#BA2121]'https://jsonplaceholder.typicode.com/posts/1'[/color], {
         method[color=#666666]:[/color] [color=#BA2121]'GET'[/color]
      })
      .then((response) => response.json())
      .then((responseJson) => {
         console.log(responseJson);
         
         [color=#008000][b]this[/b][/color].setState({
            data[color=#666666]:[/color] responseJson
         })
      })
      .[color=#008000][b]catch[/b][/color]((error) => {
         console.error(error);
      });
   }
   render() {
      [color=#008000][b]return[/b][/color] (
         [color=#666666]<[/color]View[color=#666666]>[/color]
            [color=#666666]<[/color]Text[color=#666666]>[/color]
               {[color=#008000][b]this[/b][/color].state.data.body}
            [color=#666666]<[/color]/Text>
         </View>
      )
   }
}
[/font]

nlQkrM.jpg



Gördüğünüz üzere text'i ekrana yazdırdı. Diğer yazımızda görüşmek üzere!
 
Üst

Turkhackteam.org internet sitesi 5651 sayılı kanun’un 2. maddesinin 1. fıkrasının m) bendi ile aynı kanunun 5. maddesi kapsamında "Yer Sağlayıcı" konumundadır. İçerikler ön onay olmaksızın tamamen kullanıcılar tarafından oluşturulmaktadır. Turkhackteam.org; Yer sağlayıcı olarak, kullanıcılar tarafından oluşturulan içeriği ya da hukuka aykırı paylaşımı kontrol etmekle ya da araştırmakla yükümlü değildir. Türkhackteam saldırı timleri Türk sitelerine hiçbir zararlı faaliyette bulunmaz. Türkhackteam üyelerinin yaptığı bireysel hack faaliyetlerinden Türkhackteam sorumlu değildir. Sitelerinize Türkhackteam ismi kullanılarak hack faaliyetinde bulunulursa, site-sunucu erişim loglarından bu faaliyeti gerçekleştiren ip adresini tespit edip diğer kanıtlarla birlikte savcılığa suç duyurusunda bulununuz.