fetch(), XMLHttpRequest'e (XHR) benzer ağ istekleri yapmanıza olanak tanır. Temel fark, Fetch API'sinin Promises kullanmasıdır. Promises, XMLHttpRequest API'sindeki karmaşık geri çağırmalardan kaçınmanıza yardımcı olmak için daha basit bir API'ye sahiptir.
Promise'i daha önce kullanmadıysanız JavaScript Promise'lere Giriş konusuna göz atın.
Temel Getirme İsteği
XMLHttpRequest ve ardından fetch ile uygulanan bir örneği aşağıda bulabilirsiniz. Bir URL istemek, yanıt almak ve bunu JSON olarak ayrıştırmak istiyoruz.
XMLHttpRequest
XMLHttpRequest öğesinin, başarı ve hata durumlarını ele almak için iki işleyiciye ve open() ile send() çağrılarına ihtiyacı vardır.
MDN dokümanlarından örnek.
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Getirme
Getirme isteğimiz şöyle görünür:
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
fetch() isteğinin XHR örneğiyle aynı işi yapması için yalnızca bir çağrıya ihtiyacı vardır. Yanıtı işlemek için ilk olarak yanıt durumunun 200 olup olmadığını kontrol ederiz, ardından yanıtı JSON olarak ayrıştırırız. fetch() isteği yanıtı Stream nesnesidir. Bu, json() yöntemini çağırmamızın ardından bir Promise döndürüldüğü anlamına gelir.
Akış eşzamansız olarak gerçekleşir.
Yanıt Meta Verileri
Önceki örnekte, Response nesnesinin durumu ve yanıtın JSON olarak nasıl ayrıştırılacağı gösterilmiştir. Üstbilgiler gibi erişmek isteyebileceğiniz diğer meta verileri şu şekilde işleyebilirsiniz:
fetch('users.json').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
Yanıt Türleri
Bir getirme isteğinde bulunduğumuzda, yanıta response.type "basic",
"cors" veya
"opaque" verilir.
Bu types, kaynağın nereden geldiğini gösterir ve bunları,
yanıt nesnesinin nasıl ele alınacağını belirlemek için kullanabilirsiniz.
Tarayıcı aynı kaynakta bir kaynak isteğinde bulunduğunda yanıt, yanıttan görüntüleyebileceğiniz öğelerle ilgili kısıtlamalar içeren basic türüne sahip olur.
Başka bir kaynaktaki kaynak için istek yapılırsa ve bu kaynak COR üst bilgilerini döndürürse tür cors olur. cors yanıtları basic yanıta benzer ancak görüntüleyebileceğiniz üst bilgileri Cache-Control, Content-Language, Content-Type, Expires, Last-Modified ve Pragma ile kısıtlar.
opaque yanıtları, CORS üst bilgileri döndürmeyen farklı bir kaynaktan gelir. Opak bir yanıt kullanıldığında, döndürülen verileri okuyamayız veya isteğin durumunu görüntüleyemeyiz. Diğer bir deyişle, isteğin başarılı olup olmadığını kontrol edemezsiniz.
Yalnızca belirli istek türlerinin çözümlenmesi amacıyla bir getirme isteği için mod tanımlayabilirsiniz. Ayarlayabileceğiniz modlar şunlardır:
same-originyalnızca aynı kaynaktaki öğe istekleri için başarılı olur ve diğer tüm istekleri reddeder.cors, aynı kaynak ve uygun COR üst bilgilerini döndüren diğer kaynaklardaki öğeler için isteklere izin verir.cors-with-forced-preflight, herhangi bir istekte bulunmadan önce ön kontrol gerçekleştirir.no-cors, CORS başlıkları olmayan veopaqueyanıtıyla sonuçlanan diğer kaynaklara istek göndermek için tasarlanmıştır ancak belirtildiği gibi , bu işlem şu anda pencere global kapsamında mümkün değildir.
Modu tanımlamak için fetch isteğindeki ikinci parametre olarak bir options nesnesi ekleyin ve bu nesnede modu tanımlayın:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});
Zincirleme söz verme
Vaatlerin en iyi özelliklerinden biri bunları bir araya getirebilme olanağıdır. fetch() için bu, mantığı getirme istekleri arasında paylaşmanıza olanak tanır.
Bir JSON API ile çalışıyorsanız durumu kontrol etmeniz ve her yanıt için JSON'u ayrıştırmanız gerekir. Vaat döndüren ayrı işlevlerde durum ve JSON ayrıştırmasını tanımlayarak kodunuzu basitleştirebilir ve getirme isteğini yalnızca son verileri ve hata durumunu işlemek için kullanabilirsiniz.
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
Bu örnekte, response.status öğesini kontrol edip çözümlenmiş bir Promise'i Promise.resolve() veya reddedilen bir Promise'i Promise.reject() olarak döndüren bir status işlevi tanımlanmaktadır.
Bu, fetch() zincirinde çağrılan ilk yöntemdir.
Promise çözümlenirse komut dosyası json() yöntemini çağırır. Bu yöntem, response.json() çağrısından ikinci bir Promise döndürür ve ayrıştırılan JSON'ı içeren bir nesne oluşturur. Ayrıştırma başarısız olursa Promise reddedilir ve yakalama ifadesi yürütülür.
Bu yapı, mantığı tüm getirme istekleriniz arasında paylaşmanıza olanak tanıyarak kodun bakımını, okunmasını ve test edilmesini kolaylaştırır.
POST İsteği
Bazen bir web uygulamasının POST yöntemiyle bir API'yi çağırması ve isteğin gövdesine bazı parametreler eklemesi gerekir. Bunu yapmak için fetch() seçeneklerinde method ve body parametrelerini ayarlayın:
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
Getirme isteğiyle kimlik bilgisi gönder
Çerezler gibi kimlik bilgileriyle bir getirme isteğinde bulunmak için isteğin credentials değerini "include" olarak ayarlayın:
fetch(url, {
credentials: 'include'
})