React projelerinde veri alışverişi için Fetch ve Axios kütüphaneleri oldukça kullanışlıdır Bu kütüphaneler ile API'lerden, sunuculardan veya veri veritabanlarından veri çekebilirsiniz Fetch API, web geliştiricileri tarafından sıklıkla kullanılan bir araçtır ve web sayfaları için veri alışverişi yapma özelliği sunar Bu API, Promise tabanlı bir yaklaşım kullanarak veri işlemeyi sağlar Öte yandan, Axios kütüphanesi, HTTP isteklerini kolaylaştıran Promise tabanlı bir HTTP istemcisidir
Fetch API kullanarak veri çekmek oldukça basittir Veriyi çekeceğiniz URL'yi belirleyip, sonra fetch fonksiyonunu kullanarak seçenekleri belirtmeniz gerekir Bu fonksiyon ikinci bir parametre olarak seçenekler içerir Bu seçeneklerin neler olduğuna bakarak, Fetch API'nin Promise tabanlı bir yaklaşım kullandığını görebiliriz
GET metodu kullanarak veri çekerken, belir

React projelerinde API'ler ile veri alışverişini sağlamak için Fetch ve Axios kütüphaneleri oldukça kullanışlıdır. Bu yazımızda, React'ta Fetch ve Axios kullanımını örneklerle inceleyeceğiz.

Bu kütüphaneleri kullanarak getirilen verilerin bir sonucunu kullanabiliriz. Bu veriler, bir çevrimiçi API'dan gelebilir, bir back-end sunucusundan alınabilir veya bir veri veritabanından gelir. İhtiyacınız olan verileri doğru şekilde almak için uygun HTTP yöntemlerini (GET, POST, PUT vb.) kullanarak API isteklerinde bulunmanız gerekir.

Bu amaçla, Fetch ve Axios kütüphanelerini kullanarak veri çekme örnekleri sunacağız. Ayrıca, çekilen verilerin kullanımı, sonuçların kontrol edilmesi ve hata yakalama gibi özellikleri inceleyeceğiz. Böylece, React'ta Fetch ve Axios kullanarak API ve diğer veri kaynaklarından veri çekme konusunda birçok örnek öğrenerek projelerinizi geliştirebilirsiniz.

Fetch API Kullanımı

Fetch API, JavaScript'in temel özelliklerinden biridir ve web geliştiricileri tarafından sıklıkla kullanılır. Bu API, web sayfalarında veri alışverişi yapmak için kullanılır ve sayfaların gerçek zamanlı olarak içeriklerini değiştirmesine olanak tanır. Fetch API sayesinde, web sayfaları, farklı kaynaklardan veri alabilir ve bu verileri kullanarak dinamik içerikler oluşturabilir.

Fetch API'nın temel kullanımı oldukça kolaydır. Çoğu web geliştiricisi, basit bir GET isteği yapmak için Fetch API kullanır. Ancak, bu API, sadece GET yöntemiyle değil, aynı zamanda diğer HTTP yöntemleriyle de veriyi çekebileceğiniz birçok seçenek sunar.

Fetch API ile veri çekerken, genellikle Promise tabanlı bir yaklaşım kullanılır. Bu yaklaşım, işlem tamamlandığında bir sonuç döndürür ve böylece veri kullanıcı tarafından işlenir.

Fetch API ile veri kullanmak tamamen Javascript becerilerinize bağlıdır. İsteği alıp sonuçları kullanarak uygulamanıza en uygun şekilde işleyebilirsiniz. Veri kullanımı için JSON yöntemi yaygın olarak kullanılmaktadır. Ayrıca, sonuç kontrolü ve hata yakalama örnekleri Fetch API kullanıcısı için oldukça önemlidir.

Özetle, Fetch API, web geliştiricileri tarafından alışılmış bir özelliktir. Bu API ile, verileri kolayca çekebilir ve işleyebilirsiniz. Ayrıca, Fetch API, dinamik web sayfaları oluşturmak için gereken tüm özellikleri sunar.

Temel Kullanım

Fetch API, JavaScript tarafından sunulan bir araçtır ve amaçlarından biri web sayfalarında veri alışverişi yapmaktır. Temel kullanımı oldukça basittir. Fetch API kullanarak veri çeken bir JavaScript kodu yazmak için, ilk olarak alınmak istenen kaynağı belirtmeniz gerekir. Bu kaynak, bir URL de olabilir veya verilerin saklandığı JSON dosyası da olabilir. Kaynak belirleme işlemi, fetch() fonksiyonu kullanılarak yapılır. Fetch() fonksiyonu çağırıldığında, ikinci bir parametre olarak seçenekler de belirtilmelidir.

Bu seçeneklerin neler olduğuna bakacak olursak, fetch() fonksiyonu bir Promised döndürecektir. Bu Promised sonucunu işlemek için, önceden belirtilmiş bir then() yöntemi veya catch() yöntemi kullanabilirsiniz. Bir then() yöntemi ile fetch() fonksiyonundan elde edilen verileri alabilir, bir catch() yöntemi ise fetch() fonksiyonu sırasında ortaya çıkan hataları yakalayabilir.

GET Metodu Kullanımı

React projelerinde veri çekme işlemleri için Fetch API ve Axios sıkça kullanılan kütüphaneler arasında yer almaktadır. Bu yazımızda, Fetch API kullanarak nasıl veri çekileceği örnekleriyle anlatılmaktadır.

Fetch API ile veri çekmek istediğimiz URL'yi belirtip, sonrasında Promise yapısını kullanarak işlemi gerçekleştirebiliriz. API'den alınan veriler, JSON formatında alınmaktadır. Alınan veriler, asenkron bir şekilde işlenir. Bu nedenle, sonucun tam olarak alınması için işlemlerin 'then' ve 'catch' metodları ile kontrol edilmesi gerekmektedir.

Örnek olarak, bir 'get' isteği kullanarak belirtilen URL'den bir metin dosyası çekelim. Aşağıdaki kod, işlemi gerçekleştirir:

Yukarıdaki örnek kod, belirtilen URL'deki metin dosyasını alır ve sonucu konsola gösterir. İşlem, 'then' metodları kullanılarak gerçekleştirilir. İlk 'then' metodu, API'den gelen yanıtın içeriği 'text()' metodunu kullanarak alır. İkinci 'then' metodu, önceki adımdan alınan veriyi konsola gösterir.

Böylece, Fetch API kullanarak veri çekme işlemi gerçekleştirilir. Diğer metodlar için ise benzer metotlar kullanılmaktadır.

POST Metodu Kullanımı

POST metodu, bir form içerisindeki verileri sunucuya göndermek için kullanılan bir metoddur. Fetch API ile bir POST isteği oluşturmak için, bir URL, bir istek seçeneği, ve gönderilmesi gereken veriler gereklidir. Örneğin, bir kullanıcının adını ve e-posta adresini sunucuya kaydetmek istediğimizde, aşağıdaki gibi bir kod parçası kullanabiliriz:

```fetch('https://example.com/api/user/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ name: 'John Doe', email: 'johndoe@example.com' })}).then(response => response.json()).then(data => console.log(data)).catch(error => console.log(error));```

Burada, `fetch()` fonksiyonu ile sunucuya yeni bir kullanıcı oluşturma isteği gönderdik. İsteğimizde, `method` alanı `POST` olarak belirtilmiştir. Ayrıca, `headers` alanında gönderilen verinin türü `application/json` olarak belirtilmiştir. Son olarak, `body` alanında gönderilecek olan veriler JSON formatında belirtilmiştir.

Bu örnekte, sunucudan dönen yanıt JSON formatta olduğundan, `response.json()` fonksiyonu kullanılmıştır. Bu şekilde alınan veriler daha kolay kullanılabilir hale gelir. `data` parametresi veri döndüğünde bu verileri içerir. Eğer hata oluşursa, `catch()` fonksiyonu kullanılarak hata yakalanabilir.

Veri Kullanımı

Fetch API ile çekilen verileri kullanmak oldukça kolaydır. Örneğin, bir API'den veri çekip bir tabloya eklemek istiyoruz. Bunun için öncelikle fetch() fonksiyonu ile API'ye istek gönderip verileri almalıyız. Daha sonra ise then() fonksiyonu ile verileri işleyerek tabloya ekleyebiliriz.

Bir diğer örnek ise çekilen verileri liste şeklinde görüntülemek. Bunun için ise yine fetch() ile verileri alıp JSON.parse() fonksiyonu ile JSON verisi olarak almalıyız. Daha sonra map() fonksiyonu ile her bir veri elemanını alıp listeye dönüştürebiliriz.

fetch('https://jsonplaceholder.typicode.com/users').then(response => response.json()).then(data => {  const table = document.createElement('table');  data.forEach(user => {    const row = table.insertRow();    const nameCell = row.insertCell();    const emailCell = row.insertCell();    nameCell.textContent = user.name;    emailCell.textContent = user.email;  });  document.body.appendChild(table);})

fetch('https://jsonplaceholder.typicode.com/posts').then(response => response.json()).then(data => {  const list = document.createElement('ul');  data.map(post => {    const listItem = document.createElement('li');    listItem.textContent = post.title;    list.appendChild(listItem);  });  document.body.appendChild(list);})

JSON Verisi Kullanımı

JSON (JavaScript Object Notation), modern internet uygulamalarında sıklıkla kullanılan bir veri formatıdır. Bu formatta veriler, nesne veya dizi olarak gösterilir ve key-value çiftleri aracılığıyla tanımlanır. Fetch API ile JSON verisi çekmek oldukça kolaydır. Öncelikle, fetch() metodu ile veri çekilir ve ardından .json() metodu ile JSON verisi, nesne veya dizi haline getirilir.

Aşağıdaki örnek, basit bir JSON verisi kullanımını göstermektedir. JSON verisi, ülkelerin adlarını ve bayraklarını barındıran bir dizi olarak adlandırılmıştır. JSON verisi çekiliyor ve daha sonra for döngüsü ile her bir ülke adı ve bayrağı listeleniyor.

```fetch('https://restcountries.eu/rest/v2/all') .then(response => response.json()) .then(data => { for(let i = 0; i < data.length; i++){ const country = data[i].name; const flag = data[i].flag; const listItem = document.createElement('li'); listItem.innerHTML = `${country} `; document.querySelector('.countries-list').appendChild(listItem); }})```

Bu örnek, restcountries.eu adlı bir API'nin tüm ülkeler verisini çeker ve JSON verisini elde eder. Daha sonra, for döngüsü ile veriler nesne veya dizi haline getirilir. Son adımda, her bir ülkeden ülke adı ve bayrak listesi oluşturulur ve belirli bir HTML sınıfına eklenir.

JSON verisi kullanırken hataya düşmek oldukça kolaydır. Bu nedenle, try-catch yapısını kullanarak hatayı kontrol etmek önemlidir. Bunun için aşağıdaki örneği kullanabilirsiniz.

```fetch('https://restcountries.eu/rest/v2/all') .then(response => { if(!response.ok){ throw new Error('Network response error!'); } return response.json(); }) .then(data => { // Veri işleme }) .catch(error => console.error(error));```

Yukarıdaki örnekte, try-catch yapısı kullanılmadan önce response.ok kontrolü yapılmaktadır. Şayet network bağlantısı ile ilgili bir hata oluşursa, hata fırlatılır. Bu yapı, hata ayıklamak için oldukça kullanışlıdır.

Sonuç Kontrolü ve Hata Yakalama

Fetch API ile veri çekme işlemi tamamlandıktan sonra, çekilen verinin doğru olup olmadığını kontrol etmek önemlidir. Bu işlem genellikle response.status veya response.ok özellikleri kullanılarak yapılır.

Bunun örneği aşağıdaki gibidir:

fetch('https://example.com/api/data')        .then(response => {          if (!response.ok) {            throw new Error('Veri çekilemedi');          }          return response.json();        })        .then(data => {          // Veriyi kullan        })        .catch(error => {          console.error("Hata:", error);        });

Yukarıdaki örnekte “throw new Error()” kullanarak hatayı yakaladık. Bunun dışında bu işlem için try-catch kullanabilirsiniz.

Fetch API ile hata mesajlarını görüntülemek istiyorsanız, response.statusName veya response.statusText özellikleri kullanılabilir. Bunlar HTTP durum kodlarını döndüreceklerdir.

Sonuç kontrolü ve hata yakalama Fetch API ile oldukça basit bir şekilde yapılabilmektedir. Daha fazla bilgi için resmi dökümantasyon incelenebilir.

Axios Kullanımı

Axios, fetch metoduna alternatif olarak kullanılabilecek bir kütüphanedir. Axios, XMLHttpRequest'a dayanan bir yapıya sahip ve özellikle JSON verisi çekmek veya göndermek için tercih edilir. Bu kütüphane sayesinde, isteklerinizi daha kolay bir şekilde yönetebilir ve hataları daha ayrıntılı bir şekilde özelleştirebilirsiniz.

Axios'un temel kullanımı oldukça basittir. İlk olarak, Axios kütüphanesini projenize dahil etmeniz gerekir. Bunun için, npm paketlerini kullanarak veya script etiketi ile eklediğiniz bir bağlantı ile Axios kütüphanesini projenize dahil edebilirsiniz.

Axios ile GET metodunu kullanarak veri çekmek oldukça kolaydır. Yapmanız gereken tek şey, isteği yapacağınız URL adresini belirlemek ve bu adresi axios.get fonksiyonuna parametre olarak vermek. Ayrıca, hata durumlarında nasıl bir işlem yapılacağını belirlemeniz için de bir catch metodu kullanabilirsiniz.

Axios kütüphanesi ile POST metodunu kullanarak veri göndermek oldukça kolaydır. Post isteği yapacağınız URL adresini belirledikten sonra, göndereceğiniz veriyi ve veriyi göndereceğiniz header bilgilerini de belirlemeniz gerekir. Bunun için, axios.post fonksiyonuna gerekli parametreleri vermeniz yeterlidir. İsteğin başarılı bir şekilde gönderilip gönderilmediğini kontrol etmek için de bir then metodu kullanabilirsiniz.

Axios ile çektiğiniz verileri kullanmak oldukça önemlidir. Bunun için, response objesi içerisindeki verileri kullanabilirsiniz. Özellikle JSON verisi çekmeniz durumunda, bu veriyi parse ederek kullanmanız gerekmektedir. Axios ile çekilen verileri kullanmak için örnek kodlara bakabilir veya projenizde ihtiyacınız olan şekilde adapte edebilirsiniz.

Sonuç olarak, Axios kütüphanesi, projelerinizde daha özelleştirilmiş istek yönetimi sağlayabilmek için kullanabileceğiniz bir alternatiftir. Özellikle JSON veri çekmek veya göndermek istediğiniz durumlarda kullanabilirsiniz. Axios kütüphanesinin temel kullanımı oldukça basittir ve istediğiniz yönteme göre parametrelerini ayarlayarak kullanabilirsiniz.

Temel Kullanım

Axios, hem tarayıcıda hem de Node.js ortamında kullanılabilen HTTP istekleri için bir kütüphanedir. Axios ile yapacağınız HTTP istekleri, yalnızca birkaç satırlık kodla gerçekleştirilebilir.

Axios'un temel kullanımı oldukça basittir. Öncelikle Axios kütüphanesini projenize dahil etmeniz gerekir. Bunun için, sayfanızda bir script etiketi kullanarak Axios'u çağırabilirsiniz. Sonrasında, HTTP isteğiniz için gerekli seçenekleri ekleyerek, isteğinizi gerçekleştirebilirsiniz.

Bir GET isteği yapmak için kullanabileceğiniz Axios kodu örneği şu şekildedir:

axios.get('https://api.example.com/users')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

Bu kod bloğu, "https://api.example.com/users" adresinden GET isteği yapar ve sonucunu konsola basar. Ayrıca, istekte sorun oluşursa hatayı konsola basar.

Bir POST isteği yapmak için kullanabileceğiniz Axios kodu örneği şu şekildedir:

axios.post('https://api.example.com/users', {    firstName: 'John',    lastName: 'Doe'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

Bu kod bloğu, "https://api.example.com/users" adresine POST isteği yapar ve body kısmında firstName ve lastName verilerini gönderir. Sonucunu konsola basar ve istekte sorun oluşursa hatayı konsola basar.

Axios ile HTTP isteği yapmak oldukça kolay ve hızlıdır. Bu örneklerle Axios'un temel kullanımını öğrenebilir ve projelerinizde kullanabilirsiniz.

GET Metodu Kullanımı

Axios kullanarak, GET metodu ile veri çekmek oldukça kolaydır. Bu işlem için aşağıdaki yöntemi takip etmeniz yeterli olacaktır:

• Axios kütüphanesini projenize dahil edin
• GET isteği göndermek istediğiniz URL'yi belirtin
• İsteği gönderin ve gelen veriyi kullanın

Örnek olarak, 'https://jsonplaceholder.typicode.com/users' adresinden kullanıcı bilgileri çekelim:

axios.get('https://jsonplaceholder.typicode.com/users')    .then(function (response) {        console.log(response.data);    })    .catch(function (error) {        console.log(error);    });

Bu kod bloğu, verilen URL'deki kullanıcı bilgilerini çeker ve konsola yazar. 'then' bloğu, başarılı bir şekilde veri çekildiğinde çalışır ve 'catch' bloğu ise hata oluştuğunda çalışır.

Ayrıca, GET isteğinde ek parametreler belirleyebilirsiniz. Örneğin, sadece belirli bir kullanıcının bilgilerini çekmek için:

axios.get('https://jsonplaceholder.typicode.com/users', {        params: {            id: 1        }    })    .then(function (response) {        console.log(response.data);    })    .catch(function (error) {        console.log(error);    });

Bu örnekte, sadece 'id' parametresi 1 olan kullanıcının bilgilerini çeker.

GET isteğinde kullanabileceğiniz diğer seçenekler için Axios belgelerine göz atabilirsiniz.

POST Metodu Kullanımı

Axios kullanarak veri göndermek, özellikle form verileri gönderme işlemlerinde oldukça kullanışlıdır. Axios'un temel kullanımı öğrenildikten sonra POST metodu kullanılarak veri göndermek oldukça kolay ve hızlıdır.

Axios ile POST metodu kullanarak veri göndermek için öncelikle bir örnek oluşturmamız gerekiyor. Örneğimizde bir form verisini alıp API'ye göndereceğiz.

```javascriptimport axios from 'axios';

const handleSubmit = async (event) => { event.preventDefault(); const form = event.target; const formData = new FormData(form); try { const response = await axios.post('https://example.com/api/form-data', formData); console.log(response.data); } catch (error) { console.error(error); }}

return (

Yukarıda yer alan örnekte handleSubmit adında bir fonksiyon oluşturulmuştur. Bu fonksiyon, bir submit olayı tetiklenince çalışacaktır. Fonksiyon öncelikle default submit işlemini engellemektedir. Daha sonra form verilerini FormData nesnesine atar ve axios.post() metodu ile API'ye gönderir. Try-catch bloğu, API'den dönen sonuçları ve hataları kontrol eder.

Axios ile POST metodu kullanarak veri göndermek oldukça kolaydır. Form verilerini alıp API'ye göndermek gibi farklı işlemler de yapılabilir. Axios'un sağladığı kolaylıklar ile HTTP isteklerini yönetmek oldukça basit hale gelmektedir.

Veri Kullanımı

Axios ile veri çektikten sonra, bu verileri kullanmak ve göstermek için çeşitli yöntemler bulunmaktadır. İlk olarak, verileri bir HTML tablosu içinde göstermek isteyebilirsiniz. Bu durumda, <table> etiketi kullanarak bir tablo oluşturabilirsiniz. Tablonuzun başlıklarını <th> etiketi ile belirleyebilir ve her veri satırını <tr> etiketi ile oluşturabilirsiniz. Veri hücrelerine ise <td> etiketi ile erişebilirsiniz.

Bir diğer yöntem ise verileri bir liste içinde göstermektir. Bu durumda, <ul> etiketi kullanarak bir liste oluşturabilirsiniz. Her veri satırını da <li> etiketi ile oluşturabilirsiniz. Bu yöntem genellikle verileri daha sade bir şekilde göstermek için kullanılır.

Axios ile verileri kullanırken önemli bir konu da veri türüdür. Eğer veriler JSON formatında ise, JSON.parse() fonksiyonu ile bu verileri JavaScript obje türüne çevirebilirsiniz. Bu sayede, verileri daha kolay bir şekilde kullanabilirsiniz.

JSON Verisi Kullanımı

Axios ile çekilen verilerin içinde JSON verisi varsa, bu veriyi kullandığımız yerde JSON.parse() metodunu kullanarak parse edebiliriz. Bu sayede JSON formatındaki verilerimizi kullanabiliriz.

Örneğin, bir API'den aldığımız veri JSON formatında olabilir. Bu veriyi axios ile çekip kullanmak istediğimizde bunu şu şekilde yapabiliriz:

```axios.get('https://example-api.com/data') .then(response => { const parsedData = JSON.parse(response.data); // Veriyi JSON.parse() kullanarak parse ediyoruz console.log(parsedData); // parse edilmiş veriyi kullanıyoruz }) .catch(error => { console.log(error); });```

Bu kodda öncelikle axios ile API'den veriyi çekiyoruz. Sonra .then() metodunu kullanarak response'un içindeki veriyi JSON.parse() ile parse ediyoruz. Parse edilen veriyi de kullanmak istediğimiz yerde console.log() ile kullanıyoruz.

Axios ile yapılan bu işlem Fetch API ile de yapılabilir. Ancak Fetch API'nın response verisi JSON verisi olarak değil, bir stream olarak döner. Bu nedenle Fetch API ile JSON.parse() kullanmadan önce stream'i text() metodu ile string'e çevirmemiz gerekir.

```fetch('https://example-api.com/data') .then(response => response.text()) .then(text => { const parsedData = JSON.parse(text); // Veriyi JSON.parse() kullanarak parse ediyoruz console.log(parsedData); // parse edilmiş veriyi kullanıyoruz }) .catch(error => { console.log(error); });```

Bu kodda fetch() metodu ile API'den veriyi çekiyoruz. Daha sonra .then() metodu ile response'un içindeki stream'i text() metodu ile string'e çeviriyoruz. Sonra parse edilmiş veriyi kullanmak istediğimiz yerde JSON.parse() ile parse ediyoruz.

Sonuç Kontrolü ve Hata Yakalama

Axios kullanımında sonuç kontrol ve hata yakalama oldukça önemlidir. Bu nedenle Axios'un sağladığı yöntemlerle, işlemin sonucunun kontrol edilmesi ve hata durumunda uygun bir hata yönetimi yapılması gerekmektedir.

Axios'un sağladığı işlem sonucunu kontrol etme yöntemi, Axios ile gönderilen istek sonucunu içeren objenin kullanılmasıdır. Bu obje, Promise yapısı kullanılarak oluşturulduğu için, then() methodu yardımıyla işlem sonucu kontrol edilebilir. Eğer işlem başarıyla gerçekleştirilmişse then() methodu içerisinde işlem sonucuna göre bir işlem yapılabilir. Örneğin, verileri ekran üzerinde göstermek veya işleme devam etmek için kullanılabilir.

Öte yandan, işlem sırasında bir hata oluşabilir. Bu durumda Axios, hatayı Promise objesi üzerinden yakalar ve catch() methodu yardımıyla işlem hatası yönetilebilir. Örneğin, hatanın sebebini ekranda göstermek veya işlemi sonlandırmak için kullanılabilir.

İşlem sonucunun kontrolü ve hata yönetimi için sağlanan bu yöntemler, Axios kullanımında oldukça önemlidir. Böylece işlemler daha güvenli bir şekilde gerçekleştirilebilir ve kullanıcı deneyimi artırılabilir.