React-Native: Axios ile Web Servis Çağrımı

Şimdiye kadar verilerimizi oluşturduğumuz veri dizinlerinden export ederek elde ettik. Uygulamalarımızda çoğu zaman verilerimizi bir internal veya external API’lere çağrıda bulunarak elde etmemiz gerekecek. Bunu native olan Fetch fonksiyonu ile de yapabiliriz fakat biz bu bölümümüzde web servis isteklerinde çoğu zaman kullanılan “axios” modülünü import ederek kullanacağız.
Axios, promise tabanlı ve ayrıca bizlere async-await yapısını da kullanabilme olanağı sunan bir HTTP istemcisidir.

İlk olarak “axios” modulünü proje dizinimize indirerek dahil edelim.

npm install axios --save

Ardından kurulum tamamlandıktan sonra App.js dosyamıza “axios” modülünü import edelim.

import React, { Component } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import axios from 'axios';

Şimdi inceleyeciğimiz uygulamamızda bizlere rastgele kişi verileri sağlayan “https://randomuser.me/api" dahili api aracılığı ile veri çekip, state’lerimizdeki ilgili alanları güncelleyeceğiz. Aynı zamanda da state’imizde yer alan bu değişkenlerimizi de bir Text bileşeni üzerinde gösterelim.

Öncelikle axios ile get işlemleri nasıl yapıyor onu inceleyelim

axios.get (`url`) // link parametresi
.then 
      (res => { 
        const data = res.data;  
      })

1) Şimdi uygulamamıza dönecek olarsak, App.js dosyamızda içerisi boş olan name ve surname değişkenlerinin yer aldığı bir state oluşturalım.

state={
     name: "",
     surname: "",
    };

2) Component her mount edildiği zaman ilgili web servis çağrısından bulunmuş olalım ve state’imiz güncellensin. İlgili axios çağrımızı yazalım.

componentDidMount() {
        axios
            .get("https://randomuser.me/api")
            .then(user => {this.setState( // istek sonucunda bizlere bir "user" objesi döner.
                {
                    name:user.data.results[0].name.first, // "user" içerisinden data>results[0]>name>first ile name değişkenimizi aldık.
                    surname: user.data.results[0].name.last // "user" içerisinden data>results[0]>name>first ile surname değişkenimizi aldık.
                }
                )})
    }

3) State’imiz her güncellendiği zaman ilgili değişkenlerimizi Text bileşeni içerisinde render ederek gösterelim.