JavaScript’te bir HTTP isteği oluşturma
JavaScript’te HTTP isteği
Web, mobil veya başka türlü modern uygulamalar geliştirirken, neredeyse her zaman, genellikle HTTP aracılığıyla uzak web hizmetleriyle etkileşime girme ihtiyacı vardır. Angular, Vue ve React gibi çerçevelerle çalışırken, HTTP istekleri yapmak için farklı işlevler vardır, peki ya JavaScript kullanıyorsanız veya yerleşik olanları kullanmamayı tercih ediyorsanız? Bu derste, JavaScript’te HTTP istekleri yapmak için bazı seçenekleri incelemek istiyoruz. Özellikle, modern JavaScript getirmenin yanı sıra Axios adlı üçüncü taraf paketini kullanarak JavaScript’teki klasik XHR isteklerini ve HTTP isteklerini ele alacağız .
JavaScript’te HTTP istek oluşturma yöntemi nasıl seçilir
JavaScript’te HTTP isteklerinin nasıl yapılacağına karar verirken performansına dikkat etmeli ve istenilen performansa göre mevcut çözümlerden birini seçmeliyiz. Bahsedilen her şeyin kendine özgü güçlü ve zayıf yönleri vardır.
Başlangıçta, sayfayı yenilemeden sunucudan veri almanın bazı yöntemleri vardı, ancak bunlar genellikle karmaşık tekniklere dayanıyordu. Microsoft, Outlook e-posta istemcisinin yerine tarayıcı olarak XMLHttpRequest’i sundu. XMLHttpRequest 2006 yılında bir web standardı haline geldi.
Fetch API, 2015 yılında ES6 ile tanıtıldı. Genel arayüzler istek ve yanıt uyumluluğu sağlarken, sözler daha kolay zincirleme sağlar ve geri aramalar olmadan çağrıyı eşzamansız durumda tutar. Getirme temiz, güzel ve basittir ancak bu makalede kısaca inceleyeceğimiz başka iyi seçenekler de vardır ve ardından bunlardan birkaçını ayrıntılı olarak açıklayacağız. JavaScript’te istek oluşturma yöntemleri aşağıdakileri içerir:
- XMLHttpRequest
- ajax
- Qbatı
- Süper Ajan
- Http istemcisi
- Aksiyos
- Gidip getirmek
Aşağıdaki kod, çeşitli seçenekleri kullanan temel bir HTTP GET ve POST örneğini gösterir.
XMLHttpRequest
XMLHttpRequest, bir web sunucusundan veri istemek için kullanılabilir. Bu, bu karşılaştırmanın en eski yöntemidir ve diğer seçenekler onu aşmış olsa da hala tutarlı ve etkilidir.
ELDE ETMEK
var req = new XMLHttpRequest();//onreadystatechange özelliği
//olacak fonksiyonu belirtiyoruz
// durum her defasında yürütülür
//XMLHttpRequest değişikliklerinin
req.onreadystatechange = işlev() {
if (this.readyState == 4 && this.status == 200) {
//responseText özelliği
//bir metin dizisi döndürür
console.log(xhttp.responseText)
//Bazı şeyler yapalım
}
};req.open("GET", "http://dataserver/users", true);
req.send();
POSTALAMAK
var formData = new FormData();
formData.append("isim", "Milad");
var req = new XMLHttpRequest();
req.open("POST", "http://dataserver/update");
req.send(formData);
JQuery.ajax
Bu kütüphane yakın zamana kadar asenkron HTTP istekleri yapmak için yaygın olarak kullanılıyordu.
Tüm jQuery Ajax yöntemleri geniş bir XMLHTTPRequest nesnesi dizisi döndürür
ELDE ETMEK
$.ajax({
url: 'http://dataserver/data.json'
}).done(işlev(veri) {
// ...verilerle ilgili bazı şeyler yapın
}).başarısız(işlev() {
// Hataları ele al
});
POSTALAMAK
$.ajax({
şunu yazın: "POST",
url: 'http://dataserver/update',
veri: veri,
başarı: başarıCallBack,
hata: errorCallBack,
veri türü: veri türü
});
Qbatı
Qwest, vaatlere dayalı basit bir Ajax kütüphanesidir ve ArrayBuffer, Blob ve FormData gibi benzersiz XmlHttpRequest2 verilerini destekler.
ELDE ETMEK
qwest.get('http://dataserver/data.json')
.then(function(xhr, yanıt) {
// ...verilerle ilgili bazı şeyler yapın
});
POSTALAMAK
qwest.post('http://dataserver/update', {
Soyadı: 'Milad',
Yaş: 30
})
.then(function(xhr, yanıt) {
// Bazı yararlı eylemler gerçekleştirin
})
.catch(function(e, xhr, yanıt) {
// Hatayı işle
});
Süper Ajan
SuperAgent esneklik, okunabilirlik ve düşük öğrenme eğrisi için oluşturulmuş bir ajax API’sidir. Ayrıca Node.js ile de çalışır.
ELDE ETMEK
request('GET', 'http://dataserver/data.json').then(
başarı, başarısızlık);
yöntem query(), GET yöntemiyle kullanıldığında bir sorgu dizesi oluşturacak nesneleri kabul eder. Aşağıdaki yol/veri sunucusu/arama? name = Manny & lastName = Peck & order = desc değerini üretir.
rica etmek
.get('/verisunucusu/arama')
.query({ isim: 'Templeton' })
.query({ soyadı: 'Peck' })
.query({ sipariş: 'desc' })
.then(res => {console.dir(res)}
});
POSTALAMAK
rica etmek
.post('http://dataserver/update')
.send({ isim: 'Milad' })
.set('Kabul et', 'uygulama/json')
.then(res => {
console.log('sonuç' + JSON.stringify(res.body));
});
ELDE ETMEK
//ES6 modüllerini kullanma
'http-client'ten { createFetch, base, Accept, parse }'ı içe aktar const fetch = createFetch(
temel('http://dataserver/data.json'),
kabul et('uygulama/json'),
ayrıştırma('json')
)fetch('http://dataserver/data.json').then(yanıt => {
console.log(response.jsonData)
})
POSTALAMAK
//ES6 modüllerini kullanma
'http-client'ten { createFetch, method, params }'ı içe aktar const fetch = createFetch(
parametreler({isim: '' }),
base('http://dataserver/update')
)
Aksiyos
Tarayıcıda ve Nodejs’de HTTP istekleri yapmak için söze dayalı bir HTTP kitaplığı
ELDE ETMEK
aksiyomlar({
url: 'http://dataserver/data.json',
yöntem: 'al'
})
POSTALAMAK
axios.post('http://dataserver/update', {
isim: ''
})
.then(işlev (yanıt) {
console.log(yanıt);
})
.catch(işlev (hata) {
console.log(hata);
});
GİDİP GETİRMEK
Fetch, XMLHttpRequest’i bir istekle değiştirmek için kullanılan yerel bir tarayıcı API’sidir. Fetch, ağ isteklerini XMLHttpRequest’ten daha kolay yapmanızı sağlar. Fetch API, XMLHttpRequest yanıt hatasını önlemek için vaatleri kullanır.
ELDE ETMEK
//ES6 getirme ile
getir('http://dataserver/data.json')
.then(veri => {
// ...verilerle ilgili bazı şeyler yapın
}).catch(hata => {
// Hataları ele al
});
POSTALAMAK
fetch('http://dataserver/update', {
yöntem: 'gönder',
başlıklar: {
'Kabul et': 'uygulama/json, metin/düz, */*',
'İçerik Türü': 'uygulama/json'
},
gövde: JSON.stringify({name: 'Milad'})
}).then(res=>res.json())
.then(res => console.log(res));//VEYA ES2017 ile örneğin(async () => {
const yanıt = wait fetch('http://dataserver/update', {
yöntem: 'POST',
başlıklar: {
'Kabul et': 'uygulama/json',
'İçerik Türü': 'uygulama/json'
},
gövde: JSON.stringify({name:''})
}); const sonuç = bekleme yanıtı.json(); console.log(sonuç);
})();
Ancak yukarıda bahsettiğimiz birkaç yöntem için alan ve script isteme yöntemini detaylı olarak açıkladığımız bu yazının en önemli kısmına geçelim:
XHR javascript isteği
Uzun süredir JavaScript ile çalışıyorsanız, muhtemelen XMLHttpRequest’in (XHR) JavaScript’teki istek yöntemlerinden biri olduğunu duymuşsunuzdur. XHR yöntemi oldukça güçlüdür çünkü uzak bir kaynaktan veri talep edebilir, uzak bir kaynaktan veri alabilir veya uzak bir kaynağa veri gönderebilirsiniz. Yukarıdakilerin tümü benzer görünebilir ancak bunlar HTTP sürecinin farklı parçalarıdır.
Şimdi bu isteklerden birine bir göz atalım:
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "http://httpbin.org/get", true);
xhr.send();
Yukarıdaki örnekte yeni bir XMLHttpRequest nesnesi oluşturuyoruz. Eğer isteğin sonucuyla bir şeyler yapmak istiyorsak dinleyiciyi değiştirmeyi öğrenmemiz gerekiyor. Bahsi geçen örnekte öncelikle isteğin tamamlanıp tamamlanmadığını kontrol etmemiz gerekiyor yani ReadyState değeri 4’e eşitse kodumuz başarılı bir şekilde çalışmış ve kod doğrudur.
XHR istekleri için MDN belgelerinde dört farklı ReadyState değeri bulunabilir; bu nedenle öncelikle bu dört değere aşina olmaya zaman ayırın. Belgeleri kontrol ederseniz, sunucudan döndürülebilecek pek çok durum kodu vardır. Gerçekçi bir senaryoda muhtemelen en iyi kullanıcı deneyimi için tüm özellikleri dahil etmek istersiniz.
Bu örnekte istek yanıtı yalnızca günlük bölümünde görünecektir. URL, istek açıldığında belirtilir.
Şimdi XHR isteğini biraz daha karmaşık hale getirelim. Aşağıdakileri yapalım:
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
if(xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
xhr.open("POST", "http://httpbin.org/post?key=123", true);
xhr.send(JSON.stringify({ "ad": "", "soyadı": "Vahidi" }));
Yukarıdaki kodda artık sorgu parametreleri ve istek gövdesiyle bir POST isteği oluşturduk. İstek parametrelerini url olarak kodlamamız ve ayrıca istek gövdesini serileştirmemiz gerektiğini unutmayın.
XMLHttpRequest güçlüdür ancak değerinden daha fazla sorun olduğunu düşünüyorum. Bu bizi JavaScript ile HTTP isteklerine daha modern yaklaşımlara yönlendiriyor.
JavaScript Getirme İsteği aracılığıyla istek oluştur
Getirme işlevi istek bilgilerinizi alır ve söz olarak bilinen bir sonuç döndürür.
XHR isteğine bir göz atalım, ancak burada veri getirmeyi kullanıyoruz.
fetch("http://httpbin.org/get")
.then(yanıt => yanıt.json())
.then(yanıt => {
console.log(yanıt);
}, hata => {
console.error(hata);
});
Bir dinleyici oluşturma veya yanıt durum kodu konusunda endişelenmek yerine, sözün başarılı olup olmadığını veya reddedildiğini kontrol edebiliriz. Getirme işlevi, JSON’a, metne veya başka bir şeye dönüştürülmesi gereken ham verileri içeren bir söz döndürür. Bu nedenle söz zinciri kullanılır. Bu özel kodun nihai sonucu JSON olarak döndürülür, bu nedenle onu söz zincirindeki yeni bir döngüye zincirlemeden önce olduğu gibi dönüştürürüz.
Getirme birçok durumda çok güçlü olsa da bazen biraz ustalık gerektirebilir. İsteğimizde bazı şeyleri değiştirelim:
fetch("http://httpbin.org/post?key=123", {
"yöntem": "POST",
"gövde": JSON.stringify({
"ilk adı": "",
"soyadı": "Vahidi"
})
})
.then(yanıt => yanıt.json())
.then(yanıt => {
console.log(yanıt);
});
Yukarıdaki istekte GET’ten POST’a geçiyoruz ve sorgu parametrelerinin yanı sıra istek gövdesini de enjekte ediyoruz. Sorgu parametrelerinin doğrudan URL ile satır içi olduğunu ve istek gövdesinin serileştirilmiş bir JSON nesnesi olduğunu unutmayın.
İşleri iyileştirmek için JavaScript uygulamalarımızda kullanılan üçüncü taraf bir kitaplığa başvurabiliriz.
Axios JavaScript Kütüphanesi ile HTTP istekleri
HTTP istekleri oluşturmak için önemli kütüphanelerden biri axios kütüphanesidir.
NPM kullanıyorsanız aşağıdaki komutu çalıştırabilirsiniz:
npm aksios kurulumu –save
Node.js veya Webpack veya benzerini içeren modern bir çerçeve kullanıyorsanız yukarıdaki komut harika çalışacaktır, ancak JavaScript ile tarayıcı tabanlı bir uygulama oluştururken pek yardımcı olmayacaktır. Alternatif olarak kitaplığı aşağıdaki etiketle içe aktarabilirsiniz:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Bu, JavaScript’teki temel ve temel bir konuya örnek olduğundan, tagscript kullanmak iyidir, NPM yaklaşımını kullanıyorsanız kütüphaneyi JavaScript dosyasına dahil etmeyi unutmayın.
Aşağıdaki kodu kullanarak axios’u kullanabilirsiniz:
aksiyomlar({
"yöntem": "AL",
"url": "http://httpbin.org/get"
}).sonra(yanıt => {
console.log(yanıt.data);
});
Yukarıdaki kod, fetch işlevini veya XMLHttpRequest’i kullanmanın orijinal sürümüdür. Getirme işlevi gibi, aksiyos yaklaşımının çıktısı da bir vaattir.
Örneğin aşağıdakileri göz önünde bulundurun:
aksiyomlar({
"yöntem": "POST",
"url": "http://httpbin.org/post",
"paramlar": {
"anahtar": "123"
},
"veri": {
"ilk adı": "",
"soyadı": "Vahidi"
}
}).sonra(yanıt => {
console.log(yanıt.data);
});
Bu sefer istek yöntemini POST isteği olarak değiştirdiğimizi unutmayın. Bu bölümde, URL’deki arama parametrelerinin params nesnesi aracılığıyla eklenmesini ve veri nesnesine bir istek gövdesi eklenmesini zorunlu kılmaya karar verdik. Elbette, özellikle çok sayıda isteğiniz veya çok sayıda arama parametreniz olduğunda, bu parametreleri url olarak kodlamanıza veya istek metnini serileştirmenize gerek yoktur. Bu bölüme başlık bilgilerini bile ekleyebilirsiniz.
Çözüm
JavaScript uygulamalarında HTTP istekleri yapmak için birkaç seçenek gördünüz. Bahsedilen yaklaşımların bazı durumlarda web uygulamalarının ötesine geçmesi gerekmektedir. Bu, tarayıcı tabanlı uygulamalarda, arka uç uygulamalarda, platformlar arası mobil uygulamalarda ve daha fazlasında bahsedilen yaklaşımları kullanabilmeniz gerektiği anlamına gelir.
Genel olarak daha karmaşık bir istek gerektiğinde üçüncü taraf kitaplığı yerine axios kullanmak daha iyidir.
