AJAX, ancak daha basit: yeni Fetch API



  1. AJAX, ancak daha basit: yeni Fetch API

AJAX tabanlı sorgular, jQuery gibi yardımcı kitaplıklar eklemezseniz oldukça beceriksizce formüle edilebilir. Yeni Fetch API, kullanımı kolay, taahhüt tabanlı bir alternatif vaat ediyor.


Bunu bir web geliştiricisi olarak kim bilmiyor? JQuery veya benzeri bir şeye başvurmadan basit bir AJAX isteği formüle etmek istiyorsunuz ve ardından gerekli kodu yazmanın sandığınız kadar kolay olmadığını hemen anlıyorsunuz. Birkaç geri çağırmanın tanımlanması, birkaç özelliğin ayarlanması ve birkaç yöntemin (doğru sırada) çağrılması istenmektedir:

var request = null;
request.responseType = 'json';
request.onload = function() {
console.log(request.response);
};
request.onerror = function() {
console.error('Fehler beim Laden der Projekte');
};
request.open('GET', './api/projects', true);
request.send(null);

Daha sonra Internet Explorer’ın önceki sürümlerini dahil etmek isterseniz, işler çok karmaşık bir hal alır:

if (window.XMLHttpRequest) {
request = new XMLHttpRequest();
} else if (window.ActiveXObject) {
try {
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {}
}
}
Yeni Getirme API’sı


Yeni Fetch API’sinin çözdüğü tam da bu sorun – en azından vaatler kavramına aşina iseniz – oldukça rahat kullanılabilir.

Başlangıç noktası küreseldir (veya pencereler-Nesne tanımlı) işlevi alacak()tüm eşzamansız istek türlerini (GET, POST, vb.) özetler ve söz konusu Promise nesnesini döndürür. Yöntemler daha sonra her zamanki gibi bunun üzerinde kullanılabilir. Daha sonra() Ve kriko() sonuç işleme ve hata işleme için geri aramaları tanımlama çağrısı.


Örneğin, önceki örnek, Fetch API kullanılarak aşağıdaki gibi formüle edilebilir:

fetch('./api/projects')
.then(function(response) {
return response.json();
})
.then(function(data) {
console.log(data);
})
.catch(function(error) {
console.error(error);
});

çağrısı yanıt.akım() HTTP yanıt içeriğini JSON olarak okumak için kullanılabilecek sözde bir akış oluşturur. JSON akışlarına ek olarak, dizi arabellekleri için başka akışlar da vardır (matrixBuffer()), İkili Büyük Nesneler (lekeler ()), form verisi (form verisi()) ve düz metin (metin()) mevcut.

Gösterilen gösterim, ES6’dan bilinen ok işlevleri ve ES7 için beklenen eşzamansız işlevler kullanılarak daha da sıkıştırılabilir.

GÖNDERİ istekleri


İşlev alacak() daha önce de belirtildiği gibi POST istekleri için de kullanılabilir. URL’ye ek olarak, HTTP yöntemini, başlıkları ve içeriği belirtmek için kullanılabilecek karşılık gelen bir yapılandırma nesnesini iletmeniz yeterlidir. Aşağıdaki listede bir örnek gösterilmektedir:

fetch('./api/projects',
{
method: 'post',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'Beispielprojekt',
url: 'http://www.example.com',
})
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.error(error);
});
Sonuç ve perspektifler


Fetch API, AJAX tabanlı isteklerin gönderilmesini basitleştirir. Şu anda hala API’ye yönelik eleştiriler var çünkü şu anda bir isteği iptal etme, örneğin yöntemi kullanmak gibi bir olasılık yok. iptal() itibaren XMLHttp İsteği Mümkün. API’nin Git deposunda buna karşılık gelen bir sorun zaten var ve şu anda geniş çapta tartışılıyor.

Şu anda Fetch API, Chrome (sürüm 42’den itibaren), Firefox (sürüm 39’dan itibaren) ve Opera (sürüm 29’dan itibaren) tarafından desteklenmektedir. Daha eski tarayıcılar için bir çoklu doldurma mevcuttur.


()



Haberin Sonu
 
Üst