Fetch API Rehberi

Today at 08:30 OP

Thread Starter #0

Fetch API, web tarayıcılarında asenkron HTTP istekleri yapmak için kullanılan modern bir JavaScript API'sidir. Geleneksel XMLHttpRequest nesnesinin yerini alacak şekilde tasarlanmış olan Fetch API, daha basit bir sözdizimi ve güçlü özellikler sunarak geliştiricilerin işini kolaylaştırmaktadır. Bu yazıda, Fetch API'nin temel bileşenleri, kullanımı ve bazı örneklerle birlikte detaylı bir şekilde ele alınacaktır.

Fetch API, Promise tabanlı bir yapıdadır. HTTP istekleri yapmak için fetch() fonksiyonu kullanılır. Bu fonksiyon, URL'yi parametre olarak alır ve bir Promise döner. Temel bir kullanımı şu şekildedir:

CODE

12345678910111213fetch('https://api.example.com/data')
    .then(response => {
        if (!response.ok) {
            throw new Error('Ağ yanıtı uygun değil');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Hata:', error);
    });

Yukarıdaki örnekte, fetch() fonksiyonu ile belirtilen URL'e bir GET isteği yapılmaktadır. Gelen yanıt response nesnesine atanmakta ve bu nesne üzerinden yanıtın durumunu kontrol edebiliyoruz. Eğer yanıt uygun değilse bir hata fırlatılmakta, aksi takdirde yanıt JSON formatında parse edilmekte ve elde edilen veriler konsola yazdırılmaktadır.

Fetch API, sadece GET istekleri ile sınırlı değildir. Farklı HTTP yöntemlerini kullanmak için ikinci bir parametre olarak bir nesne geçilebilir. Örneğin, POST isteği yapmak için:

CODE

12345678910fetch('https://api.example.com/data', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key: 'value' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Hata:', error));

Bu örnekte, method özelliği ile HTTP yöntemini POST olarak belirtiyoruz. Ayrıca, headers ile içerik tipini JSON olarak ayarlıyoruz ve body ile gönderilecek veriyi JSON formatına çeviriyoruz.

Fetch API'nin avantajlarından biri de, yanıtların akışkan bir şekilde işlenebilmesidir. Response nesnesi, yanıtın başlıklarına, durumuna ve gövdesine erişim sağlar. response.text(), response.blob() gibi yöntemlerle yanıt içeriğini farklı formatlarda elde edebilirsiniz.

Sonuç olarak, Fetch API, modern web uygulamalarında asenkron HTTP isteklerini yönetmek için güçlü bir araçtır. Daha basit ve daha okunabilir bir sözdizimi sunarken, Promise yapısı sayesinde daha yönetilebilir bir hata işleme mekanizması sağlar. Geliştiricilerin ihtiyaç duyduğu esnekliği ve işlevselliği sunarak, web uygulamalarının performansını artırmaktadır.

Similar threads

Report Content