- read

React’ta Axios Nasıl Kullanılır?

Web Development
Featured

Özgenur Özkara 53

Axios, React’ta API’lerden veri çekmek için en yaygın kullanılan yöntemlerden biridir. Çoğu web uygulaması, geliştirme süreçlerinin bir aşamasında API’lerden veri almayı gerektirir. Axios, React tabanlı projeler için çok yönlü bir paket olarak, veri çekmeyi sağlayan bir araçtır.

Axios nedir?

Axios, React uygulamalarında kullanılan popüler bir açık kaynaklı HTTP istemcisidir. Bu kütüphane, JavaScript’in promises özelliğini kullanarak HTTP istekleri gönderir ve yanıtlarını yönetir. Axios ayrıca temel Fetch API’de bulunmayan bazı API çağrısı ile ilgili ek özellikler sunar. Bu özellikler arasında şunlar bulunur:

1- Request Interceptors (İstek Aracıları): Axios, herhangi bir HTTP isteği göndermeden önce bu isteği özelleştirmemize olanak tanır. Örneğin, her isteğimize belirli bir başlık (header) eklemek veya belirli bir işlemi gerçekleştirmek istediğimizde, bu araçları kullanabiliriz.

Request Interceptor lar genellikle güvenlik, doğrulama, yetkilendirme, loglama ve izleme gibi işlemler için kullanılır.

Örneğin, her isteğe bir kimlik doğrulama tokeni eklemek gibi güvenlik önlemleri veya isteği göndermeden önce loglama yapmak gibi izleme işlemleri için request interceptor’lar kullanılabilir. Bu özellikler, Axios’ın esnekliğini artırarak HTTP isteklerini özelleştirmemizi ve güçlendirmemizi sağlar.

2- Custom Instances (Özel Örnekler): Axios, birden fazla bağlantı veya yapılandırma gerektiren senaryolar için özel örnekler oluşturmamıza izin verir. Bu, farklı API’lere farklı ayarlarla istek göndermek için kullanışlıdır.

3- Request Timeouts and Cancellations (İstek Zaman Aşımı ve İptaller): Axios, gönderdiğimiz isteklere bir zaman sınırlaması eklememize olanak tanır. Örneğin, bir isteğin belirli bir süre içinde yanıt alamadığımızda ne yapılacağını belirleyebiliriz. Ayrıca, istekleri gerektiğinde iptal etme yeteneği sunar. Bu, kullanıcı etkileşimi sona erdiğinde veya başka bir nedenle isteğin artık gerekli olmadığı durumlarda kullanışlıdır. İsteği iptal etmek, gereksiz ağ trafiğini önlememize yardımcı olur.

React’ta Axios Nasıl Kullanılır?

Axios’u React içinde kullanmadan önce aşağıdaki şeylere ihtiyaç vardır:

  1. Bir React projesi.
  2. Axios’un projeye kurulmuş olması.
  3. İletişim kurmak istediğimiz bir API.

1 — React Projesi Oluşturma

# Create a new React project
npx create-react-app axios-react-project
# Navigate and start the project server
cd axios-react-project
npm start

2 — Axios’un Kurulumu

Axios’u proje dizinimizde npm kullanarak kurabiliriz.

npm install axios

Kurulum tamamlandıktan sonra, Axios’u JavaScript dosyamıza şu şekilde ekliyoruz:

import axios from 'axios';

3 — API Bulma

API’den veri alabilmek için API’nin uç nokta URL’sine ihtiyaç vardır. Eğer kendi API’niz yoksa,

JSONPlaceholder: JSONPlaceholder, geliştiricilerin API istekleri göndererek JSON verileri alabilecekleri ücretsiz bir online fake REST API servisidir. Bu API, özellikle prototipler oluştururken veya bir uygulama geliştirme sürecinin erken aşamalarında testler yaparken kullanışlıdır. Örnek istekler şunları içerebilir:

  • Kullanıcılar: /users endpoint'i ile kullanıcı bilgilerini alabilirsiniz.
  • Gönderiler: /posts endpoint'i ile gönderi verilerine erişebilirsiniz.

REST Countries: REST Countries, dünya çapındaki ülke bilgilerini sağlayan bir API’dir. Bu API ile bir ülkenin nüfusu, başkenti, bayrağı ve daha fazlası gibi bilgilere erişebilirsiniz.

OpenWeatherMap: OpenWeatherMap, hava durumu verileri sağlayan popüler bir API’dir. Bu API ile hava durumu tahminleri, sıcaklık, nem oranı ve diğer hava koşulları bilgilerini alabilirsiniz.

GitHub API: GitHub API, GitHub depoları ve kullanıcıları ile etkileşimde bulunmanızı sağlar. Kullanıcıların depolarını çekmek, açık sorunları listelemek veya katkıda bulunanları görüntülemek gibi birçok özelliği destekler.

The Cat API: The Cat API, rastgele kedi resimleri ve bilgileri sağlar. Bu API ile rastgele kedi fotoğrafları alabilirsiniz.

ReqRes API: ReqRes API, geliştiricilerin API istekleri göndererek JSON verilerini alabilecekleri ücretsiz bir online fake REST API servisidir. Gerçek bir veritabanı içermez, ancak geliştirme ve test amaçları için kullanışlıdır. Bu API, özellikle kullanıcıların bilgilerini çekmek, kullanıcıları listelemek veya yeni kullanıcılar eklemek gibi temel işlemleri destekler.

Bu API’ler, farklı veri tiplerini ve kullanım senaryolarını temsil eder. İhtiyacınıza ve projenize bağlı olarak uygun olanı seçebilir ve Axios veya diğer HTTP istemcileri kullanarak bu API’lerden veri alabilirsiniz.

React’ta Axios API İsteği Yapmak

Ayrıntılara başlamadan önce bir API’ye örnek bir istekle başlayalım. Bir Axios GET isteğinin temel syntax’ı şu şekildedir:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
 const [users, setUsers] = useState([]); // Kullanıcıları saklamak için bir state tanımlıyoruz.

 useEffect(() => {
 // Axios ile API isteğini yapmak için useEffect kullanıyoruz.
 axios.get('https://reqres.in/api/users')
 .then(response => {
 // İstek başarılı olursa, API'den gelen verileri kullanıcılar state'ine ekliyoruz.
 setUsers(response.data.data); // API yanıtı "data" alanını içerir.
 })
 .catch(error => {
 // İstek başarısız olursa hata mesajını konsola yazdırabiliriz.
 console.error('API isteği başarısız: ', error);
 });
 }, []); // Boş bağımlılık dizisi, yalnızca bir kez çalışmasını sağlar.

 return (
 <div className="App">
 <h1>Kullanıcı Listesi</h1>
 <ul>
 {users.map(user => (
 <li key={user.id}>{user.first_name} {user.last_name}</li>
 ))}
 </ul>
 </div>
 );
}

export default App;

Bu örnekte, useState ve useEffect hook'larını React içinde kullanıyoruz. Axios ile API isteğini yapmak için axios.get kullanıyoruz. İstek başarılı olduğunda, API'den gelen kullanıcı verilerini setUsers ile users state'ine ekliyoruz ve ardından bu verileri ekranda listeliyoruz. Ayrıca, istek başarısız olduğunda bir hata mesajı konsola yazdırıyoruz.

API yanıtı şöyle görünür:

[
 {
 "id": 1,
 "email": "[email protected]",
 "first_name": "George",
 "last_name": "Edwards",
 "avatar": "https://reqres.in/img/faces/11-image.jpg"
 },
 // Diğer kullanıcılar...
]

React’ta API İsteklerini Nasıl Tetikleriz?

React’ta API isteklerini tetiklemek için iki yaygın yöntem kullanabilirsiniz: Event Handlers (Olay İşleyicileri) ve useEffect Hook (useEffect Kancası).

1- Event Handlers (Olay İşleyicileri): Event handlers, kullanıcının bir bileşen içinde bir olayı tetiklemesine olanak tanır. Örneğin, bir düğmeye tıklama onClick, bir form gönderimi onSubmit veya herhangi bir kullanıcı etkileşimi gibi olaylar bu kategoriye girer. API isteğinizi bir olay işleyicisi içinde tetikleyebilirsiniz.

import React from 'react';
import axios from 'axios';

function App() {
 const fetchQuotes = () => {
 // Axios kullanarak API isteğini yapabilirsiniz.
 axios.get('https://example.com/api/quotes')
 .then(response => {
 // API yanıtını işleyin
 })
 .catch(error => {
 // Hata durumunda işlem yapın
 });
 }

 return (
 <div>
 <button onClick={fetchQuotes}>Alıntıları Getir</button>
 </div>
 );
}

export default App;

Yukarıdaki örnekte, “Alıntıları Getir” düğmesine tıklandığında fetchQuotes fonksiyonu çağrılır ve bu fonksiyon Axios ile bir API isteği yapar.

2- useEffect Hook (useEffect Kancası): useEffect hook’u, bileşenin yaşam döngüsü olaylarına veya belirli bir bağımlılığın değişmesine tepki vermek için kullanılır. Bu, bileşenin yüklendiğinde veya belirli bir durum değiştiğinde API isteğini tetiklemek için kullanışlıdır.

import React, { useEffect } from 'react';
import axios from 'axios';

function App() {
 const fetchQuotes = () => {
 // Axios kullanarak API isteğini yapabilirsiniz.
 axios.get('https://example.com/api/quotes')
 .then(response => {
 // API yanıtını işleyin
 })
 .catch(error => {
 // Hata durumunda işlem yapın
 });
 }

 useEffect(() => {
 // Bileşen monte edildiğinde veya belirli bir bağımlılık değiştiğinde API isteğini yapmak için
 fetchQuotes();
 }, []); // Boş bağımlılık dizisi, yalnızca bir kez çalışmasını sağlar.

 return (
 <div>
 {/* Bileşen içeriği */}
 </div>
 );
}

export default App;

Yukarıdaki örnekte, useEffect hook'u kullanarak bileşen yüklendiğinde API isteği yaparız. Boş bağımlılık dizisi [], bu etkileşimin yalnızca bileşenin yüklendiği ilk seferde çalışmasını sağlar.

Hangi yöntemi kullanırsanız kullanın, API isteğini yaparken başarılı yanıtı işleyin ve hata durumunu ele alın. Bu, uygulamamızın doğru zamanda ve doğru şekilde çalışmasını sağlar.

Axios GET İsteği Nasıl Yapılır?

GET istekleri yapmak için axios.get fonksiyonunu kullanabiliriz.

axios.get(url, config)
  • url: İstek atılacak API'nin URL'sini temsil eder. Bu, API'nin hedeflendiği adresi belirtir. Örneğin, 'https://jsonplaceholder.typicode.com/posts' gibi bir URL olabilir.
  • config (isteğe bağlı): İsteğin yapılandırılmasını ve seçeneklerin belirlenmesini sağlayan bir yapıdır. Bu bir JavaScript nesnesi olabilir ve çeşitli isteğe bağlı seçenekleri içerebilir. Örneğin, başlık (header) bilgilerini, isteğe eklenen parametreleri veya zaman aşımını (timeout) belirlemek için kullanılabilir. Örnek kullanım:
axios.get('https://jsonplaceholder.typicode.com/posts', {
 headers: {
 'Authorization': 'Bearer ' + token, // Başlık (header) eklemek
 },
 params: {
 page: 1, // İsteğe parametre eklemek
 },
 timeout: 5000, // İstek zaman aşımını belirlemek (milisaniye cinsinden)
})
 .then(response => {
 // Başarılı yanıtı işlemek
 })
 .catch(error => {
 // Hata durumunu işlemek
 });

Yukarıdaki örnek, axios.get fonksiyonunu kullanarak bir GET isteği yaparken, aynı zamanda isteği yapılandırmak için bir config nesnesi kullanır. Başlık eklemek, parametreler eklemek veya zaman aşımı belirlemek gibi çeşitli isteğe bağlı seçenekleri config nesnesi içinde belirtiyoruz.

Bir Axios GET isteği kodda şöyle görünür:

const response = await axios.get('https://reqres.in/api/users');
console.log(response.data);
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
 const [data, setData] = useState([]); // API yanıtını saklamak için bir state tanımlayın

 useEffect(() => {
 // Axios ile GET isteğini yapın
 axios.get('https://jsonplaceholder.typicode.com/posts')
 .then(response => {
 // Başarılı bir yanıt aldığınızda, veriyi state'e kaydedin
 setData(response.data);
 })
 .catch(error => {
 // Hata durumunda işlem yapın
 console.error('API isteği başarısız: ', error);
 });
 }, []); // Boş bağımlılık dizisi, yalnızca bir kez çalışmasını sağlar

 return (
 <div className="App">
 <h1>API Yanıtı:</h1>
 <ul>
 {data.map(item => (
 <li key={item.id}>{item.title}</li>
 ))}
 </ul>
 </div>
 );
}

export default App;

Yukarıdaki örnekte, useEffect hook'u kullanarak bileşen yüklendiğinde bir GET isteği yapılıyor. Axios'un .get yöntemi, belirtilen URL'ye bir GET isteği gönderir ve ardından yanıtı işleriz. Başarılı bir yanıt aldığımızda, veriyi bileşenin state'ine (data state'i) kaydediyoruz ve ekranda listeliyoruz. Hata durumunda ise bir hata mesajı konsola yazdırıyoruz.

Bu kod, https://jsonplaceholder.typicode.com/posts URL'sine bir GET isteği gönderir ve bu API'den gelen yanıtı işler. API yanıtı, JSON formatında bir liste olarak gelir ve her öğe bir gönderi (post) hakkında bilgiler içerir. İşte API yanıtının bir örneği:

[
 {
 "userId": 1,
 "id": 1,
 "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
 "body": "quia et suscipit\nsuscipit repellat ...",
 },
 {
 "userId": 1,
 "id": 2,
 "title": "qui est esse",
 "body": "est rerum tempore vitae\nsequi sint nihil ...",
 },
 // Diğer gönderiler...
]

Bu yanıt, bir dizi nesne içerir ve her bir nesne bir gönderinin (post) özelliklerini temsil eder. Örneğin, item.id gönderinin kimlik numarasını, item.title gönderinin başlığını ve item.body gönderinin metnini içerir.

Bu kod, bu API yanıtını data adlı bir state içinde saklar ve ardından bu veriyi bir liste olarak ekrana renderler. data.map ile her gönderi (post) için bir <li> öğesi oluşturulur ve gönderi başlığı (item.title) listelenir. Bu şekilde API'den alınan veri, web sayfanızda görüntülenir.

Axios POST İsteği Nasıl Yapılır?

Axios POST istekleri API’ye veri göndermek için kullanılır. POST istekleri yapmak için axios.post fonksiyonunu kullanabiliriz.

axios.post(url, data, config)

url: İstek atılacak API'nin URL'sini temsil eder. Bu, API'nin hedeflendiği adresi belirtir. Örneğin, 'https://example.com/api/posts' gibi bir URL olabilir.

data: POST isteği ile gönderilecek veriyi içeren bir JavaScript nesnesidir. Bu veri, API'ye iletilmek istenen bilgileri ve isteğin gövdesini oluşturur. Örneğin:

const postData = {
 title: 'Başlık',
 content: 'İçerik',
};

config (isteğe bağlı): İsteğin yapılandırılmasını ve seçeneklerin belirlenmesini sağlayan bir yapıdır. Bu bir JavaScript nesnesi olabilir ve çeşitli isteğe bağlı seçenekleri içerebilir. Başlık (header) bilgileri, zaman aşımı (timeout) veya isteğe özel ayarlar gibi seçenekler bu yapı içinde belirtilebilir.

Bir Axios POST isteği kodda şöyle görünür:

const response = await axios.post('https://reqres.in/api/users', {
 first_name: 'John',
 last_name: 'Doe',
});
console.log(response.data);
import React, { useState } from 'react';
import axios from 'axios';

function App() {
 const [responseMessage, setResponseMessage] = useState(''); // API yanıtını saklamak için bir state tanımlayın

 // POST isteğini gönderen fonksiyon
 const sendPostRequest = async () => {
 try {
 const response = await axios.post('https://reqres.in/api/users', {
 first_name: 'John',
 last_name: 'Doe',
 });

 // Başarılı bir yanıt aldığınızda, yanıtı işleyin
 setResponseMessage(`Başarılı POST isteği: ${response.data.first_name} ${response.data.last_name}`);
 } catch (error) {
 // Hata durumunda işlem yapın
 setResponseMessage(`POST isteği başarısız: ${error.message}`);
 }
 };

 return (
 <div className="App">
 <h1>API Yanıtı:</h1>
 <button onClick={sendPostRequest}>POST İsteği Gönder</button>
 <p>{responseMessage}</p>
 </div>
 );
}

export default App;

Bu örnekte, sendPostRequest adlı bir fonksiyon oluşturulur ve bu fonksiyon içinde Axios ile POST isteği yapılır. İsteğin başarılı veya başarısız olduğuna bağlı olarak responseMessage adlı bir state güncellenir ve sonuç kullanıcıya ekranda gösterilir.

Kullanıcı “POST İsteği Gönder” düğmesine tıkladığında, POST isteği gönderilir ve sonuç ekranda görüntülenir. Başarılı bir istekte, yanıtın verisi (response.data) kullanılır ve "Başarılı POST isteği: John Doe" gibi bir mesaj görüntülenir. Hata durumunda ise hata mesajı görüntülenir.

Axios PUT Request Nasıl Yapılır?

PUT istekleri bir kaynağı güncellemek için kullanılır. Bu istekler için axios.put fonksiyonunu kullanabiliriz.

axios.put(url, data, config)

Bir Axios PUT isteği kodda şöyle görünür:

const response = await axios.put('https://reqres.in/api/users', {
 first_name: 'Jane',
 last_name: 'Doe',
});
console.log(response.data);
import React, { useState } from 'react';
import axios from 'axios';

function App() {
 const [responseMessage, setResponseMessage] = useState('');

 // PUT isteğini gönderen fonksiyon
 const sendPutRequest = async () => {
 try {
 const response = await axios.put('https://reqres.in/api/users/2', {
 first_name: 'Jane',
 last_name: 'Doe',
 });

 // Başarılı bir yanıt aldığınızda, yanıtı işleyin
 setResponseMessage(`Başarılı PUT isteği: ${response.data.first_name} ${response.data.last_name}`);
 } catch (error) {
 // Hata durumunda işlem yapın
 setResponseMessage(`PUT isteği başarısız: ${error.message}`);
 }
 };

 return (
 <div className="App">
 <h1>API Yanıtı:</h1>
 <button onClick={sendPutRequest}>PUT İsteği Gönder</button>
 <p>{responseMessage}</p>
 </div>
 );
}

export default App;

Bu örnekte, sendPutRequest adlı bir fonksiyon oluştururuz ve bu fonksiyon içinde Axios ile bir PUT isteği göndeririz. PUT isteği, axios.put kullanılarak yapılır ve belirli bir kaynağı güncellemek için kullanılır. Bu örnekte, https://reqres.in/api/users/2 URL'sine bir PUT isteği yapılır ve kullanıcı adı "Jane" ve soyadı "Doe" olarak güncellenir. Yanıtı işlemek ve sonucu görüntülemek için aynı mantığı kullanırız.

Axios DELETE İsteği Nasıl Yapılır?

DELETE istekleri bir kaynağı silmek için kullanılır. Bu istekler için axios.delete fonksiyonunu kullanabiliriz.

axios.delete(url, config)

Bir Axios DELETE isteği kodda şöyle görünür:

const response = await axios.delete('https://reqres.in/api/users/2');
console.log(response.data);
import React, { useState } from 'react';
import axios from 'axios';

function App() {
 const [responseMessage, setResponseMessage] = useState('');

 // DELETE isteğini gönderen fonksiyon
 const sendDeleteRequest = async () => {
 try {
 const response = await axios.delete('https://reqres.in/api/users/2');

 // Başarılı bir yanıt aldığınızda, yanıtı işleyin
 setResponseMessage(`Başarılı DELETE isteği: ${response.status === 204 ? 'Başarılı' : 'Başarısız'}`);
 } catch (error) {
 // Hata durumunda işlem yapın
 setResponseMessage(`DELETE isteği başarısız: ${error.message}`);
 }
 };

 return (
 <div className="App">
 <h1>API Yanıtı:</h1>
 <button onClick={sendDeleteRequest}>DELETE İsteği Gönder</button>
 <p>{responseMessage}</p>
 </div>
 );
}

export default App;

Bu örnekte, sendDeleteRequest adlı bir fonksiyon oluştururuz ve bu fonksiyon içinde Axios ile bir DELETE isteği göndeririz. DELETE isteği, axios.delete kullanılarak yapılır ve belirli bir kaynağı silmek için kullanılır. Bu örnekte, https://reqres.in/api/users/2 URL'sine bir DELETE isteği yapılır ve kullanıcı kaydı silinir. Yanıtın başarılı olup olmadığını kontrol etmek için response.status değeri kullanılır. Eğer başarılıysa, yanıt durumu 204 olacaktır.

Axios’ta Hatalarla Nasıl Başa Çıkılır?

Axios’u kullanan standart bir API çağrısındaki hataları ele almak için try…catch bloğunu kullanırız. Bloğun içinde hataları kaydetmek için Axios’un döndürdüğü hata nesnesini kullanabiliriz.

import axios from 'axios';

async function fetchData() {
 try {
 const response = await axios.get('https://example.com/api/data');
 // Başarılı yanıtı işleyin
 console.log('API yanıtı:', response.data);
 } catch (error) {
 // Hata durumunda işlem yapın
 if (error.response) {
 // API yanıtı hatası
 console.log('API hatası:', error.response.data);
 } else if (error.request) {
 // İstek gönderme hatası
 console.error('İstek hatası:', error.request);
 } else {
 // Diğer hatalar
 console.error('Bilinmeyen hata:', error.message);
 }
 }
}

fetchData();

Yukarıdaki örnekte, try bloğu içinde Axios ile GET isteği yapılır ve başarılı bir yanıt alınırsa işlem yapılır. catch bloğu içinde Axios isteği sırasında oluşabilecek farklı hata türlerini ele alırız:

  • error.response: API yanıtı hataları için.
  • error.request: İstek gönderme hataları için (örneğin, ağ sorunları).
  • Diğer hatalar: Bilinmeyen hatalar için (örneğin, geçersiz URL veya başka bir hata).