TypeScript'te Fetch/XMLHttpRequest

Bu makale, TypeScript'te Fetch/XMLHttpRequest'i açıklar.

Fetch API ve XMLHttpRequest'in nasıl kullanılacağını ve aralarındaki farkları öğrenebilirsiniz.

YouTube Video

TypeScript'te Fetch/XMLHttpRequest

TypeScript'te, HTTP istekleri genellikle iki API kullanılarak gerçekleştirilir: Fetch API ve XMLHttpRequest. TypeScript kullanarak, bu API'lerle eşzamansız iletişim kurarken istekler ve yanıtlar için tür kontrolü sağlayabilir ve daha güvenli kod yazabilirsiniz. Aşağıda, her birinin nasıl kullanılacağını tanıtacağız.

Fetch API

Fetch API, basit bir şekilde eşzamansız iletişim (HTTP istekleri) yapmak için kullanılan Promise tabanlı bir API'dir. TypeScript'te, fetch yöntemi ile istek yapabilir ve yanıtları tür güvenli bir şekilde işleyebilirsiniz.

Temel Kullanım

Aşağıda, GET isteği kullanan basit bir örnek verilmiştir.

 1const url = 'https://jsonplaceholder.typicode.com/posts';
 2
 3fetch(url)
 4    .then(response => {
 5        if (!response.ok) {
 6        throw new Error('Network response was not ok');
 7        }
 8        return response.json();  // Parse the response as JSON
 9    })
10    .then(data => {
11        console.log(data);
12    })
13    .catch(error => {
14        console.error('Fetch error:', error);
15    });

• Bu kod, belirtilen URL'ye bir GET isteği gönderir, alınan yanıtı JSON olarak ayrıştırır ve bunu konsola yazdırır.

TypeScript'te tür güvenli veri işleme

fetch yönteminden gelen yanıtın belirsiz bir türü olduğundan, yanıt türünü açıkça tanımlayarak TypeScript'in tür kontrolünden yararlanabilirsiniz.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9const url = 'https://jsonplaceholder.typicode.com/posts';
10
11fetch(url)
12    .then(response => response.json())
13    .then((data: Post[]) => {
14        data.forEach(post => {
15            console.log(`Title: ${post.title}`);
16        });
17    })
18    .catch(error => {
19        console.error('Error fetching data:', error);
20    });

• Bu kod, fetch ile alınan verilere Post tipini uygular, yanıtı tip güvenli bir şekilde işler ve her gönderinin başlığını konsola yazdırır.

POST isteği örneği

Veri sunucuya gönderilirken POST yöntemi kullanılır. Body'de JSON göndermek için headers ve body belirtilmelidir.

 1const postData = {
 2    title: 'foo',
 3    body: 'bar',
 4    userId: 1
 5};
 6
 7fetch('https://jsonplaceholder.typicode.com/posts', {
 8        method: 'POST',
 9        headers: {
10            'Content-Type': 'application/json'
11        },
12        body: JSON.stringify(postData)
13    })
14    .then(response => response.json())
15    .then(data => {
16        console.log('Created post:', data);
17    })
18    .catch(error => {
19        console.error('Error posting data:', error);
20    });

• Bu kod, bir POST isteği ile verileri JSON formatında sunucuya gönderir, yanıtı JSON olarak alır ve konsola yazdırır.

Eşzamansız işlevlerle (async/await) Fetch kullanımı

TypeScript'te async/await kullanarak eşzamansız işlemleri daha basit bir şekilde yazabilirsiniz.

 1// Define the type for the response data
 2interface Post {
 3    userId: number;
 4    id: number;
 5    title: string;
 6    body: string;
 7}
 8
 9async function fetchPosts() {
10    try {
11        const response = await fetch('https://jsonplaceholder.typicode.com/posts');
12        if (!response.ok) {
13            throw new Error('Network response was not ok');
14        }
15        const data: Post[] = await response.json();
16        console.log(data);
17    } catch (error) {
18        console.error('Fetch error:', error);
19    }
20}
21
22fetchPosts();

• Bu kod, async/await sözdizimi kullanarak gönderi verilerini asenkron olarak alır, yanıtı Post[] tipi olarak işler ve konsola yazdırır.

XMLHttpRequest

XMLHttpRequest daha eski bir API'dir ve Fetch API'ye kıyasla biraz daha karmaşıktır, ancak tarayıcı uyumluluğu veya daha gelişmiş kontrol gerektiğinde kullanılabilir.

XMLHttpRequest'in temel kullanımı

Aşağıda bir GET isteği örneği verilmiştir.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onreadystatechange = function () {
 5    if (xhr.readyState === 4 && xhr.status === 200) {
 6        const data = JSON.parse(xhr.responseText);
 7        console.log(data);
 8    }
 9};
10
11xhr.send();

• Bu kod, belirtilen URL'ye XMLHttpRequest ile bir GET isteği gönderir, yanıtı JSON olarak ayrıştırır ve bunu konsola yazdırır.

POST isteği örneği

Veriler sunucuya gönderilirken, open yönteminde POST belirtilmeli ve veri send ile gönderilmelidir.

 1const xhr = new XMLHttpRequest();
 2xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
 3xhr.setRequestHeader('Content-Type', 'application/json');
 4
 5const postData = JSON.stringify({
 6    title: 'foo',
 7    body: 'bar',
 8    userId: 1
 9});
10
11xhr.onreadystatechange = function () {
12    if (xhr.readyState === 4 && xhr.status === 201) {
13        console.log('Created post:', xhr.responseText);
14    }
15};
16
17xhr.send(postData);

• Bu kod, XMLHttpRequest kullanarak bir POST isteği ile verileri JSON formatında sunucuya gönderir ve oluşturulan veriyi içeren yanıtı konsola yazdırır.

XMLHttpRequest ile hata yönetimi

onerror olayı kullanılarak istek hatalarını yönetebilirsiniz.

 1const xhr = new XMLHttpRequest();
 2xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
 3
 4xhr.onerror = function () {
 5    console.error('Request failed');
 6};
 7
 8xhr.onload = function () {
 9    if (xhr.status === 200) {
10        console.log('Response:', xhr.responseText);
11    } else {
12        console.error('Error:', xhr.status);
13    }
14};
15
16xhr.send();

• Bu kod, XMLHttpRequest ile bir GET isteği yürütür, istekte oluşabilecek hataları onerror ile yönetir ve hem başarıda hem de başarısızlıkta yanıtı uygun şekilde kaydeder.

Fetch API ve XMLHttpRequest Karşılaştırması

Özet

TypeScript'te, Fetch API kullanarak basit ve tip güvenli kod ile asenkron istekler yazabilirsiniz. Öte yandan, XMLHttpRequest eski bir API'dir ancak bazı durumlarda hala kullanılabilir. Genellikle, basit ve modern Fetch API kullanılması önerilir, ancak tarayıcı uyumluluğu veya ilerleme takibi gerekiyorsa, XMLHttpRequest de göz önünde bulundurulabilir.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video