giriiş
Bir zamanlar API istekleri yapmak için XMLHttpRequest kullanılıyordu. Promise içermiyordu ve temiz JavaScript kodu üretmiyordu. jQuery ile daha temiz jQuery.ajax() sözdizimini kullanabilirsiniz.
Artık JavaScript'in API istekleri yapmak için kendine özgü yerleşik bir yolu var. Bu, Promises ile sunucu istekleri yapmak için yeni bir standart olan Fetch API'si, ancak ek özellikler de içeriyor.
Bu eğitimde, Fetch API'yi kullanarak hem GET hem de POST istekleri oluşturacaksınız.
Ön koşullar
- Node.js için yerel bir geliştirme ortamı.
- JavaScript'te kodlamanın temel bilgisi.
- JavaScript'te Promise'ları Anlamak.
Adım 1 – Fetch API Sözdizimine Başlarken
Fetch API'sini kullanmanın bir yolu fetch() API URL'sini parametre olarak geçirmektir:
fetch(url)
fetch() metodu bir Promise döndürür. fetch() metodundan sonra Promise metodunu then() ekleyin:
fetch(url)
.then(function() {
// handle the response
})Döndürülen Promise çözülürse, then() metodunun içindeki fonksiyon yürütülür. Bu fonksiyon, API'den alınan verileri işlemek için kod içerir.
then() metodundan sonra catch() metodunu ekleyin:
fetch(url)
.then(function() {
// handle the response
})
.catch(function() {
// handle the error
});fetch() kullanarak çağırdığınız API bozulmuş olabilir veya başka bir hata oluşabilir. Bu durumda, reddedilen söz döndürülür. Reddi işlemek için catch yöntemi kullanılır. API'niz çağrılırken bir hata oluşursa, catch() içindeki kod çalıştırılır.
Fetch API'sini kullanma sözdizimini anladıktan sonra artık gerçek bir API'de fetch() kullanmaya geçebilirsiniz.
Adım 2 – Bir API'den Veri Almak İçin Fetch'i Kullanma
Aşağıdaki kod örneği JSONPlaceholder API'sine dayanacaktır. API'yi kullanarak on kullanıcı alacak ve bunları JavaScript kullanarak sayfada görüntüleyeceksiniz. Bu eğitim, verileri JSONPlaceholder API'sinden alacak ve yazar listesindeki liste öğelerinde görüntüleyecektir.
Öncelikle bir HTML dosyası oluşturup, bir başlık ve yazar kimliklerinin bulunduğu sırasız bir liste ekleyerek başlayalım:
<h1>Authors</h1>
<ul id="authors"></ul>HTML dosyanızın altına script etiketleri ekleyin ve ul'yi almak için bir DOM seçicisi kullanın. Yazarlarla birlikte getElementById'yi argüman olarak kullanın:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
</script>Unutmayın, yazarlar önceki ul id'yi oluşturdular.
Daha sonra DocumentFragment olan bir liste oluşturun:
<script>
// ...
const list = document.createDocumentFragment();
</script>Ekli tüm liste öğeleri listeye eklenecektir. DocumentFragment, etkin belge ağaç yapısının bir parçası değildir. Bu, belge nesne modeli değiştiğinde yeniden çizimin performans üzerinde bir etkisi olmaması avantajına sahiptir.
On rastgele kullanıcıyı döndüren API URL'sini tutan url adlı sabit bir değişken oluşturun:
<script>
// ...
const url = 'https://jsonplaceholder.typicode.com/users';
</script>Şimdi Fetch API'sini kullanarak fetch() fonksiyonunu kullanarak url'yi argüman olarak kullanarak JSONPlaceholder API'sini çağırın:
<script>
// ...
fetch(url)
</script>Fetch API'sini çağırıp URL'yi JSONPlaceholder API'sine iletiyorsunuz. Ardından yanıt alınıyor. Ancak, aldığınız yanıt JSON değil, bilgiyle ne yapmak istediğinize bağlı olarak kullanılabilecek bir dizi yöntem içeren bir nesnedir. Döndürülen nesneyi JSON'a dönüştürmek için json() yöntemini kullanın.
response adında bir parametreye sahip bir fonksiyon içeren then() metodunu ekleyin:
<script>
// ...
fetch(url)
.then((response) => {})
</script>Yanıt parametresi, fetch(url) komutundan döndürülen nesne değerini alır. Yanıtı JSON verilerine dönüştürmek için json() yöntemini kullanın:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
</script>JSON verilerinin hala işlenmesi gerekiyor. data adlı bir argüman alan bir fonksiyona sahip başka bir then() ifadesi ekleyin:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {})
</script>Bu fonksiyonda yazar adında, verilere eşitlenmiş bir değişken oluşturun:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
})
</script>Authors'daki her yazar için, adını gösteren bir liste öğesi oluşturmak istersiniz. map() yöntemi bu kalıp için uygundur:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
});
})
</script>Harita fonksiyonunuzda, li (HTML öğesi) argümanı ile createElement değerine eşitlenmiş li adında bir değişken oluşturun. Ayrıca ad için bir h2 ve e-posta için bir span oluşturun:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
});
})
</script>h2 öğesi yazarın adını, span öğesi ise yazarın e-posta adresini içerecektir. innerHTML özniteliği ve dize enterpolasyonu bunu yapmanıza olanak tanır:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
});
})
</script>Daha sonra bu DOM elemanlarını appendChild ile ekleyin:
<script>
// ...
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
})
ul.appendChild(list);
</script>Her liste öğesinin DocumentFragment listesine eklendiğini unutmayın. Eşleme tamamlandığında, liste ul sırasız liste öğesine eklenir.
Her iki then() fonksiyonu da tamamlandığında, artık catch() fonksiyonunu ekleyebilirsiniz. Bu fonksiyon, olası hataları konsola kaydeder:
<script>
// ...
fetch(url)
.then((response) => {
// ...
})
.then((data) => {
// ...
})
.catch(function(error) {
console.log(error);
});
// ...
</script>Oluşturduğunuz istek için tam kod şudur:
<h1>Authors</h1>
<ul id="authors"></ul>
<script>
const ul = document.getElementById('authors');
const list = document.createDocumentFragment();
const url = 'https://jsonplaceholder.typicode.com/users';
fetch(url)
.then((response) => {
return response.json();
})
.then((data) => {
let authors = data;
authors.map(function(author) {
let li = document.createElement('li');
let name = document.createElement('h2');
let email = document.createElement('span');
name.innerHTML = `${author.name}`;
email.innerHTML = `${author.email}`;
li.appendChild(name);
li.appendChild(email);
list.appendChild(li);
});
}).
.catch(function(error) {
console.log(error);
});
ul.appendChild(list);
</script>JSONPlaceholder API ve Fetch API'sini kullanarak başarıyla bir GET isteği oluşturdunuz. Şimdi POST istekleri oluşturacaksınız.
Adım 3 – POST isteklerinin işlenmesi
Fetch, varsayılan olarak GET isteklerini kullanır, ancak diğer tüm istek türlerini kullanabilir, başlıkları değiştirebilir ve veri gönderebilirsiniz. Bir POST isteği oluşturalım.
İlk olarak, JSONPlaceholder API'sine bağlantıyı tutan sabit bir değişken ekleyin:
const url = 'https://jsonplaceholder.typicode.com/users';
Ardından, nesnenizi kurmanız ve fetch fonksiyonuna ikinci argüman olarak geçirmeniz gerekiyor. Bu, Sammy (veya adınız) anahtar adına ve şu değere sahip data adlı bir nesne olacak:
// ...
let data = {
name: 'Sammy'
}Bu bir POST isteği olduğundan, bunu açıkça belirtmeniz gerekir. fetchData adında bir nesne oluşturun:
// ...
let fetchData = {
}Bu nesne üç anahtar içermelidir: yöntem, gövde ve başlık:
// ...
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}Metot anahtarı "POST" değerine sahip olacaktır. Gövde, yeni oluşturulan veri nesnesinin JSON.stringify biçimine ayarlanacaktır. Başlıklar "Content-Type" değerine sahip olacaktır: "application/json; charset=UTF-8".
Başlıklar arayüzü, HTTP istek ve yanıt başlıkları üzerinde eylemler gerçekleştirmenize olanak tanıyan Fetch API'nin bir özelliğidir.
Bu kodu yerleştirerek, Fetch API'sini kullanarak bir POST isteği yapılabilir. Fetch POST isteğinize URL'yi, fetchData'yı ve argümanları eklersiniz:
// ...
fetch(url, fetchData)then() fonksiyonu, JSONPlaceholder API'sinden alınan yanıtı işleyen kodu içerir:
// ...
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});Oluşturduğunuz istek için tam kod şudur:
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let fetchData = {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the API
});Ayrıca fetch() fonksiyonunu bir Request nesnesine de geçirebilirsiniz.
const url = 'https://jsonplaceholder.typicode.com/users';
let data = {
name: 'Sammy'
}
let request = new Request(url, {
method: 'POST',
body: JSON.stringify(data),
headers: new Headers({
'Content-Type': 'application/json; charset=UTF-8'
})
});
fetch(request)
.then(function() {
// Handle response you get from the API
});Bu yaklaşımla, istek fetch()'e tek argüman olarak kullanılabilir ve url ve fetchData'nın yerini alabilir.
Artık Fetch API ile POST istekleri oluşturmanın ve yürütmenin iki yolunu biliyorsunuz.
Sonuç
Fetch API henüz tüm tarayıcılar tarafından desteklenmese de XMLHttpRequest'e harika bir alternatiftir.
