fetch()
, XMLHttpRequest (XHR)'ye benzer ağ istekleri göndermenize olanak tanır. İlgili içeriği oluşturmak için kullanılan
Temel fark, Getirme API'sinin bir
karmaşık geri çağırmalardan kaçınmanıza yardımcı olacak,
XMLHttpRequest API'si.
Daha önce Promises kullanmadıysanız JavaScript Promises'e Giriş başlıklı makaleyi inceleyin.
Temel Getirme İsteği
Aşağıda, XMLHttpRequest
ile ve ardından fetch
ile uygulanan bir örnek verilmiştir. URL istemek, yanıt almak ve URL'yi
JSON olarak göstereceğim.
XMLHttpRequest
XMLHttpRequest
, başarı ve hata durumlarını işlemek için iki dinleyiciye ve open()
ile send()
çağrısına ihtiyaç duyar.
MDN dokümanlarından örnek.
function reqListener () {
const data = JSON.parse(this.responseText);
console.log(data);
}
function reqError (err) {
console.log('Fetch Error :-S', err);
}
const oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Getir
Getirme isteğimiz şu şekilde görünür:
fetch('./api/some.json')
.then(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(err => {
console.log('Fetch Error :-S', err);
});
fetch()
isteğinin, XHR ile aynı işi yapması için yalnızca bir çağrı olması gerekir
örneğine bakalım. Yanıtı işlemek için önce yanıt durumunun 200 olup olmadığını kontrol eder, ardından yanıtı JSON olarak ayrıştırırız. fetch()
isteğine verilen yanıt
Akış nesnesi. Bu,
json()
yöntemini çağırdığımızda bir Promise döndürülür.
Akış eşzamansız olarak gerçekleşir.
Yanıt Meta Verileri
Önceki örnekte, Yanıt nesnesi ve yanıtı JSON olarak ayrıştırır. Erişmek isteyebileceğiniz diğer meta verileri (ör. üstbilgi) nasıl işleyeceğiniz aşağıda açıklanmıştır:
fetch('users.json').then(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
Getirme isteği yaptığımızda yanıta response.type
verilir
"basic
",
"cors
" veya
"opaque
".
Bu types
, kaynağın nereden geldiğini gösterir ve şu amaçlarla kullanabilirsiniz:
yanıt nesnesinin nasıl ele alınacağını belirler.
Tarayıcı aynı kaynakta bir kaynak istediğinde, yanıtta, yanıttan görüntüleyebileceğiniz öğelerle ilgili kısıtlamalar içeren bir basic
türü bulunur.
Başka bir kaynaktaki bir kaynak için istek yapılırsa ve bu kaynak CORs üst bilgilerini döndürürse tür cors
olur. cors
.
yanıtlar basic
yanıtlara benzer, ancak bunları yalnızca
Cache-Control
, Content-Language
, Content-Type
, Expires
,
Last-Modified
ve Pragma
.
opaque
yanıtları, CORS üstbilgileri döndürmeyen farklı bir kaynaktan geliyor. Opak bir yanıtta,
döndürülen verileri okuması veya isteğin durumunu görüntülemesi (yani bu durumu kontrol edemezsiniz)
olup olmadığını kontrol edin.
Getirme isteği için bir mod tanımlayabilirsiniz. Böylece yalnızca belirli istek türleri çözer. Ayarlayabileceğiniz modlar şunlardır:
same-origin
yalnızca aynı kaynaktaki öğe istekleri için başarılı olur ve diğer tüm istekleri reddeder.cors
, aynı kaynak ve diğer kaynaklardaki öğe isteklerine izin verir: uygun COR başlıklarını döndürün.cors-with-forced-preflight
, herhangi bir istek yapmadan önce ön uç kontrol gerçekleştirir.no-cors
, CORS'si olmayan diğer kaynaklara istekte bulunmak için kullanılır veopaque
yanıtıyla sonuçlanır, ancak belirtildiği gibi bu olanak tanıyor.
Modu tanımlamak için fetch
isteğinde ikinci parametre olarak bir seçenekler nesnesi ekleyin ve modu bu nesnede tanımlayın:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(response => response.text())
.then(text => {
console.log('Request successful', text);
})
.catch(error => {
log('Request failed', error)
});
Söz zincirleme
Promise'lerin en iyi özelliklerinden biri, bunları birbirine zincirleme olarak bağlayabilmenizdir. Örneğin,
fetch()
, getirme istekleri arasında mantığı paylaşmanıza olanak tanır.
JSON API ile çalışıyorsanız her yanıt için durumu kontrol etmeniz ve JSON'u ayrıştırmanız gerekir. Durumu ve durumunu tanımlayarak kodunuzu basitleştirebilirsiniz: Vaatler döndüren ayrı işlevlerde JSON ayrıştırma ve getirme yöntemini kullanan yalnızca nihai verileri ve hata durumunu işleme isteğinde bulunabilir.
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(data => {
console.log('Request succeeded with JSON response', data);
}).catch(error => {
console.log('Request failed', error);
});
Bu örnekte response.status
vestatus
ya da tanımlanmış bir Promise’ı
Promise.resolve()
,
ya da reddedilen bir Vaat
Promise.reject()
.
Bu, fetch()
zincirinde çağrılan ilk yöntemdir.
Promise sorunu çözülürse komut dosyası json()
yöntemini çağırır. Bu yöntem
response.json()
çağrısından ikinci bir Promise değeri döndürür ve
ayrıştırılan JSON'ı içeren nesne. Ayrıştırma başarısız olursa Promise reddedilir ve catch ifadesi yürütülür.
Bu yapı, mantığı tüm getirme isteklerinizde paylaşmanıza olanak tanır. Böylece kodun bakımı, okunması ve test edilmesi kolaylaşır.
POST isteği
Bazen bir web uygulamasının POST yöntemi olan bir API'yi çağırması ve
parametrelerinden birini kullanmayın. 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(data => {
console.log('Request succeeded with JSON response', data);
})
.catch(error => {
console.log('Request failed', error);
});
Getirme isteğiyle kimlik bilgisi gönderme
Çerezler gibi kimlik bilgileriyle getirme isteği göndermek için isteğin credentials
değerini "include"
olarak ayarlayın:
fetch(url, {
credentials: 'include'
})