JavaScript FETCH API Kullanım Kılavuzu

webolog tarafından

25 Aralık 2021 424 kez okundu Okuma süresi: 4dk, 9sn

JavaScript FETCH API Kullanım Kılavuzu — javascript-fetch-api

İçindekiler

1 İstek Gönderme
2 Yanıtı Okumak
3 Yanıtın Durum Kodlarını İşleme
4 JavaScript Fetch API Örneği
- 4.1 ÖZET

Javascript Fetch API, web tarayıcılarından sunuculara HTTP istekleri yapmanızı sağlayan modern bir arayüzdür. FETC API basit ve temizdir. Web tarayıcılarından sunuculara istekte bulunmak için daha esnek özellikler sunmaktadır.

fetch()yöntemi, web tarayıcılarına bir URL’ye istek gönderme talimatı veren global kapsamda mevcuttur.

İstek Gönderme

fetch()getirmek istediğiniz kaynağın URL’si olan yalnızca bir parametre gerektirir:

let response = fetch(url);

fetch()yöntemi bir Promise döndürür. Böylece then()ve catch()kullanabilirsiniz.

fetch(url)
    .then(response => {
        // handle the response
    })
    .catch(error => {
        // handle the error
    });

İstek tamamlandığında kaynak kullanılabilir hale gelir. Şu anda, Promise bir Response nesnesine dönüşecektir.

Response nesnesi, alınan kaynağın API sarmalayıcısıdır. Response nesnesi, yanıtı incelemek için bir dizi faydalı özelliğe ve yönteme sahiptir.

Yanıtı Okumak

Yanıtın içeriği ham metin biçimindeyse, text() yöntemini kullanabilirsiniz. text() yöntemi, alınan kaynağın tüm içeriğiyle çözümlenen bir Promise döndürür:

fetch(url)
    .then(response => {
fetch('/readme.txt')
    .then(response => response.text())
    .then(data => console.log(data));

Pratikte, genellikle async/await’i fetch() yöntemiyle şu şekilde kullanırsınız:

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
}

text() yönteminin yanı sıra Response nesnesi, ilgili veri türünü işlemek için json(), blob(), formData() ve arrayBuffer() gibi başka yöntemlere sahiptir.

Yanıtın Durum Kodlarını İşleme

Response nesnesi, status ve statusText özellikleri aracılığıyla durum kodunu ve durum metnini sağlar. Bir istek başarılı olduğunda durum kodu 200‘dür ve durum metni OK‘dur:

async function fetchText() {
    let response = await fetch('/readme.txt');
    let data = await response.text();
    console.log(data);
async function fetchText() {
    let response = await fetch('/readme.txt');

    console.log(response.status); // 200
    console.log(response.statusText); // OK

    if (response.status === 200) {
        let data = await response.text();
        // handle data
    }
}

fetchText();

Çıktı:

200
OK

İstenen kaynak mevcut değilse, yanıt kodu 404‘tür:

let response = await fetch('/non-existence.txt');

console.log(response.status); // 400
console.log(response.statusText); // Not Found

Çıktı:

400
Not Found

İstenen URL bir sunucu hatası verirse yanıt kodu 500 olur.

İstenen URL 300-309 yanıtıyla yenisine yönlendirilirse, Response nesnesinin durumu 200‘e ayarlanır. Ayrıca, yeniden yönlendirilen özellik true olarak ayarlanır.

fetch(), web tarayıcısı zaman aşımı, ağ bağlantısı kaybı ve CORS ihlali gibi gerçek bir hata oluştuğunda reddeden bir Promise verir.

JavaScript Fetch API Örneği

Web sunucusunda aşağıdaki içeriğe sahip bir json dosyanız olduğunu varsayalım:

[{
        "username": "john",
        "firstName": "John",
        "lastName": "Doe",
        "gender": "Male",
        "profileURL": "img/male.png",
        "email": "john.doe@example.com"
    },
    {
        "username": "jane",
        "firstName": "Jane",
        "lastName": "Doe",
        "gender": "Female",
        "profileURL": "img/female.png",
        "email": "jane.doe@example.com"
    }
]

HTML Sayfası:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container"></div>
    <script src="js/app.js"></script>
</body>
</html>

app.js‘de, kullanıcı verilerini almak ve <div> öğesinin içindeki verileri sınıf kapsayıcısıyla işlemek için fetch() yöntemini kullanacağız.

İlk olarak, user.json‘u sunucudan getiren getUsers() işlevini tanımlayın.

async function getUsers() {
    let url = 'users.json';
    try {
        let res = await fetch(url);
        return await res.json();
    } catch (error) {
        console.log(error);
    }
}

Ardından, kullanıcı verilerini işleyen renderUsers() işlevini geliştirin:

async function renderUsers() {
    let users = await getUsers();
    let html = '';
    users.forEach(user => {
        let htmlSegment = `<div class="user">
                            <img src="${user.profileURL}" >
                            <h2>${user.firstName} ${user.lastName}</h2>
                            <div class="email"><a href="email:${user.email}">${user.email}</a></div>
                        </div>`;

        html += htmlSegment;
    });

    let container = document.querySelector('.container');
    container.innerHTML = html;
}

renderUsers();

ÖZET

FETC API, bir kaynak için eşzamansız olarak istekte bulunmanıza olanak tanır.
Response nesnesine çözümlenen bir Promise döndürmek için fetch() yöntemini kullanın. Gerçek verileri almak için, örneğin text() veya json() gibi Response nesnesinin yöntemlerinden birini çağırırsınız. Bu yöntemler gerçek verilere çözümlenir.
Yanıtın status ve statusText‘ini almak için Response nesnesinin status ve statusText özelliklerini kullanın.
Bir başarısızlık isteğini işlemek için catch() yöntemini veya try…catch ifadesini kullanın.