g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Savaş! JavaScript ile HTTP istekleri oluşturmanın farklı yolları

Tam metin 2678 kelime ve beklenen öğrenme süresi 15 dakikadır

Kaynak: unsplash

JavaScript kullanırken, her zaman bir arama talebinde bulunulması gereken çeşitli durumlar olacaktır.Ajax aramaları için hangi teknoloji daha uygundur?

Başlangıçta, sayfayı yenilemeden sunucudan veri çıkarma yöntemleri olsa da, genellikle beceriksiz teknolojiye güvenirler. Microsoft, Outlook e-posta istemcisine alternatif bir tarayıcı olarak XMLHttpRequest'i geliştirene kadar. 2006 yılında bir Web standardı haline geldi.

2015 yılında Fetch API, ES6 ile tanıtıldı. Ortak İstek ve Yanıt arayüzleri tutarlılık sağlarken, Promises, geri arama olmadan daha kolay bağlantı ve eşzamansız / beklemeye izin verir. Getirme özlü, zarif ve anlaşılması kolaydır, ancak başka iyi seçenekler de vardır. Bu makale kısaca anlamı, sözdizimi ve artıları ve eksileri açıklayacaktır.

Aşağıdaki kod, farklı alternatif yöntemler kullanan temel HTTP GET ve POST örneklerini gösterir. Şimdi başlayalım ~

XMLHttpRequest

XMLHttpRequest nesnesi, bir web sunucusundan veri talep etmek için kullanılabilir. Bu karşılaştırmada en eski yöntemdir, diğer seçenekler ondan daha iyi olsa da geriye dönük uyumluluğu ve olgunluğu nedeniyle hala etkili ve kullanışlıdır.

almak:

var req = new XMLHttpRequest (); // onreadystatechange özelliği // olacak bir işlevi belirtir // durum her defasında yürütülür // XMLHttpRequest değişiklikleri req.onreadystatechange = function () { eğer (this.readyState == 4 this.status == 200) { // responseText özelliği // bir metin dizesi döndürür console.log (xhttp.responseText) // Bir şeyler yapın } }; req.open ("GET", "http: // dataserver / kullanıcılar", doğru); req.send ();

gönder:

varformData = new FormData (); formData.append ("ad", "Murdock"); var req = new XMLHttpRequest (); req.open ("POST", "http: // dataserver / update"); req.send (formData);

avantaj:

· Harici kaynaklardan yüklemeye gerek yok

Geriye dönük uyumluluk

· Olgun / kararlı

· Tüm tarayıcılarda mevcuttur

· Yerel bir tarayıcı API'sidir

Dezavantajları:

Geri arama cehennemini destekleyin

· Beceriksiz ve uzun sözdizimi

Getir, doğal olarak değiştirebilir

Kaynak: unsplash

Qwest

Qwest, ArrayBuffer, Blob ve FormData gibi XmlHttpRequest2'nin bağımsız verilerini destekleyen Promise'a dayalı basit bir ajax kitaplığıdır.

almak:

qwest.get ('http: //dataserver/data.json') .then (function (xhr, yanıt) { // ... verilerle bazı şeyler yapın });

gönder:

qwest.post ('http: // dataserver / update', { ad: 'Murdock', yaş: 30 }) .then (function (xhr, yanıt) { // Bazı yararlı eylemler yapın }) .catch (function (e, xhr, yanıt) { // Hatayı işleyin });

avantaj:

· Talep limitleri oluşturulabilir

· Söze Dayalı

Dezavantajları:

· XmlHttpRequest2 tüm tarayıcılarda mevcut değildir

· Yerli olmayan

· Harici bir kaynaktan yüklenmelidir

JQuery.ajax

Bu kitaplık, uzun zaman önce HTTP eşzamansız istekleri yapmak için yaygın olarak kullanıldı. JQuery'nin tüm Ajax yöntemleri XMLHTTPRequest nesnesinin bir üst kümesini döndürür

almak:

$ .ajax ({ url: 'http: //dataserver/data.json' }). done (function (data) { // ... verilerle bazı şeyler yapın }). fail (function () { // Hatayı işleme });

gönder:

$ .ajax ({ tür: "POST", url: 'http: // dataserver / update', veri: veri, başarı: successCallBack, hata: errorCallBack, dataType: dataType });

avantaj:

· İyi destek ve belgeler

· Yapılandırılabilir nesneler

· Birçok projede kullanıldı

· Düşük öğrenme eğrisi

· Bir XMLHttpRequest nesnesi döndürür, böylece istek iptal edilebilir

Dezavantajları:

· Yerli olmayan

· Harici bir kaynaktan yüklenmelidir

· Promises ile birleştirilmez

· Yerel ES6 Getirme için gerekli değildir.

Aksiyolar

Kaynak: unsplash

Tarayıcı ve Nodejs üzerinde HTTP isteklerini yürütmek için söz tabanlı HTTP kitaplığı.

almak:

axios ({ url: 'http: //dataserver/data.json', yöntem: 'get' })

gönder:

axios.post ('http: // dataserver / update', { adı: 'Murdock' }) .then (function (yanıt) { console.log (yanıt); }) .catch (function (hata) { console.log (hata); });

avantaj:

Geri arama cehenneminden kaçınmak için sözler kullanın

· Tarayıcı ve Nodej'lerde kullanılabilir

· Yükleme ilerlemesini destekleyin

· Tepki zaman aşımı ayarlanabilir

· Yapılandırma nesnesini ona ileterek isteği yapılandırın

· Axios, geri alınabilir bir vaat önerisi uyguladı

· Verileri otomatik olarak JSON'a dönüştürün

Dezavantajları:

· Yerli olmayan

· Harici bir kaynaktan yüklenmelidir

SuperAgent

SuperAgent, esneklik, okunabilirlik ve düşük bir öğrenme eğrisi sağlamak için tasarlanmış bir ajax API'sidir. Node.js ile de kullanılabilir.

almak:

istek ('GET', 'http: //dataserver/data.json'). sonra ( başarı, başarısızlık);

.Query () yöntemi, GET yöntemiyle kullanıldığında bir sorgu dizesi oluşturacak nesneleri kabul eder. Aşağıdaki kod, yol / dataserver / search? name = Manny & lastName = Gagalama & sipariş = azalan.

istek .get ('/ dataserver / search') .query ({name: 'Templeton'}) .query ({soyadı: 'Gagalama'}) .query ({order: 'desc'}) . sonra (res = > {console.dir (res)} });

gönder:

istek .post ('http: // dataserver / update') .send ({isim: 'Murdock'}) .set ('Kabul Et', 'uygulama / json') . sonra (res = > { console.log ('sonuç' + JSON.stringify (res.body)); });

avantaj:

· Söze Dayalı

· Node.js ve tarayıcıda kullanılabilir

· Talebi iptal etmek için request.abort () numaralı telefonu arayabilirsiniz

· Toplumda tanınmış kütüphaneler

HTTP istekleri yapmak için sorunsuz arayüz

· Arıza durumunda yeniden deneme isteği desteği

Dezavantajları:

· XMLHttpRequest biçiminde yükleme ilerlemesinin izlenmesini desteklemez

· Yerli olmayan

· Harici bir kaynaktan yüklenmelidir

Kaynak: unsplash

HTTP istemcisi

Http-client, bir HTTP istemcisi oluşturmak için JavaScript bellek erişim API'sinin kullanılmasına izin verir.

almak:

// ES6 modüllerini kullanarak içe aktar {createFetch, base, accept, parse} from'http-client'const fetch = createFetch ( taban ('http: //dataserver/data.json'), kabul et ('application / json'), ayrıştır ('json') ) getir ('http: //dataserver/data.json'). sonra (yanıt = > { console.log (response.jsonData) })

gönder:

// ES6 modüllerini kullanarak {createFetch, method, params} içe aktarın 'http-client'const fetch = createFetch ( parametreler ({name: 'Murdock'}), base ('http: // dataserver / update') )

avantaj:

· Node.js ve tarayıcıda kullanılabilir

· Sunucu tarafı personel tarafından kullanılır

· Söze Dayalı

· CORS'un güvenliğini artırmak için baş koruma cihazı sağlayın

Dezavantajları:

· Harici bir kaynaktan yüklenmelidir

· Yerli olmayan

Getir

Fetch, XMLHttpRequest yerine istekte bulunmak için kullanılan yerel bir tarayıcı API'sidir. XMLHttpRequest ile karşılaştırıldığında Fetch, ağ isteklerini kolaylaştırır. Fetch API, XMLHttpRequest geri çağırma cehenneminden kaçınmak için Promises kullanır.

almak:

// WithES6 getirme getirme ('http: //dataserver/data.json') .then (veri = > { // ... verilerle bazı şeyler yapın }). catch (hata = > { // Hatayı işleme });

gönder:

fetch ('http: // dataserver / update', { yöntem: 'post', başlıklar: { 'Kabul Et': 'application / json, text / plain, * / *', 'İçerik Türü': 'uygulama / json' }, gövde: JSON.stringify ({ad: 'Murdock'}) }). sonra (res = > res.json ()) . sonra (res = > console.log (res)); // VEYA örneğin ES2017 ile (async () = > { const response = awaitfetch ('http: // dataserver / update', { yöntem: 'POST', başlıklar: { 'Kabul Et': 'uygulama / json', 'İçerik Türü': 'uygulama / json' }, gövde: JSON.stringify ({name = 'Murdock'}) }); sabit sonuç = awaitresponse.json (); console.log (sonuç); }) ();

avantaj:

· Yerel bir tarayıcı API'sidir

· Getirme temelde tam bir XMLHttpRequest

· Arkadaş canlısı ve öğrenmesi kolay

· En son kullanılan tarayıcılarla uyumlu

· Yerel XMLHttpRequest nesnesinin doğal yerine geçer

· Düşük öğrenme eğrisi

· Harici kaynaklardan yüklemeye gerek yok

Geri arama cehenneminden kaçınmak için sözler kullanın

· Artık bağımlılık yok

Dezavantajları:

· JSON verilerini işleme süreci iki adıma bölünmüştür. Birincisi bir istekte bulunmak, ikincisi ise yanıt olarak .json () yöntemini çağırmaktır. Axios için, varsayılan olarak bir JSON yanıtı alınır.

· Fetch () 'den döndürülen Promise, yalnızca bir ağ arızası veya isteğin tamamlanmasını engelleyen herhangi bir durumda reddedilir. Yanıt HTTP 404 veya 500 olsa bile, HTTP hata durumu reddedilmeyecektir.

· Diğer kitaplıkların bazı yararlı işlevlerinin eksikliği, örneğin: isteği iptal etme.

· Getirme varsayılan olarak sunucudan çerez göndermez veya almaz.Site, kullanıcı oturumlarını korumaya dayanıyorsa, bu, kimliği doğrulanmamış isteklerle sonuçlanır. Ancak aşağıdakiler eklenerek etkinleştirilebilir:

{kimlik bilgileri: "aynı kaynak."}

Kaynak: unsplash

Getirme yeni bir standarttır, Chrome'un yeni sürümleri ve Firefox, başka herhangi bir kitaplık kullanmadan bunu destekleyebilir.

Ek olarak, Axios, SuperAgent veya diğer kitaplıklar uygun belgelere sahiptir, kullanımı kolaydır ve öğrenme eğrisi çok yüksek değildir. Bazı durumlarda, Getirme'nin sağlamadığı özellikleri sağlayabilirler.

Getirme, JavaScript'te yereldir ve projenin ihtiyaçlarını karşılamak için yeterlidir. Özel ihtiyaç yoksa, Getir'in en uygun seçim olduğunu düşünüyorum.