React.js Axios Kullanımı. React Axios ile JSON Verisi (API) Nasıl Çekilir ?

 React.js Axios Kullanımı. React Axios ile JSON Verisi (API) Nasıl Çekilir ?
Okunuyor React.js Axios Kullanımı. React Axios ile JSON Verisi (API) Nasıl Çekilir ?

Selam yazılım sever koca yürekli dostlar. Bu derste sizlere React.js de Axios kullanarak bir JSON dosyası (API de denilebilir) nasıl çekilir onu anlatacam.

Öncelikle Axios, Client side uygulamalarda HTTP çağrılarının kolayca yapılmasını sağlayan bir javascript kütüphanesidir. Kullanımı için ilk önce React projemize kurmamız gerekiyor. Bunun için;

yarn add axios

               veya

npm install axios –save

kullanarak paketi indirme işlemini gerçekleştirebilirsiniz.

1

Kurulum işlemi bittikten sonra proje içerisinde kullanabilmemiz için projeye import etmemiz gerekiyor.

import axios from ‘axios’;

Dahil etme işleminden sonra bir tane state oluşturuyoruz ki gelen data lar o State de tutulsun.

2

Şimdi kimileriniz diycek ki “Bu nasıl bir State tanımlama biçimi kardeşim? Nerde bizim eski topraklar componentDidMount() ve componentWillMount()” die. Şöyle söyliyim bu iki fonksiyon React ilk çıktığı zamanlarda dediğimiz yapı için kullanılıyordu.

Amma velakin React i çıkartan Facebook firması karşılarına çıkan problemlere sürekli çözüm odaklı baktıklarından dolayı React Hooks denilen bir yapı oluşturdular.

Bildiğiniz üzere React class lifecyle ‘nda componentDidMountcomponentDidUpdate ve componentWillUnmount methodları vardı.

Hooks ile birlikte bu methodların görevini useEffect üstleniyor. Ayrıca state yönetiminde ve kullanımında çok kolaylık sağlamaktadır.

Bu konular biraz daha detaylı olduğu için bunları ayrı bir derste anlatmayı düşünüyorum o yüzden şimdi konumuza geçelim.

State oluşturduktan sonra useEffect() fonksiyonunun içerisine bir asyn await yapısı oluşturuyoruz;

3

Bu işlemlerden sonra Componentimizin içerisine JSON dosyamızda ki tüm verileri çekmek için map denilen bir yapı kullanıyoruz.

4

State içerisinde oluşturduğumuz data verisini map ile döngüye sokup data içerisinde ki name, Email ve Content değerlerini getir diyoruz.

5

ve gördüğünüz gibi veriler başarılı bir şekilde geldi.

Umarım bu sizlere en açık şekilde Axios ile JSON API verilerini nasıl çekmeniz gerektiğini anlatabilmişimdir. Kendinize cici bakın dostlar, yoldaşlar… Ben kaçar 🙂

Yorum Yap