Bu makale makine çevirisi ayna makalesidir, orijinal makaleye geçmek için lütfen buraya tıklayın.

Görünüm: 11130|Yanıt: 2

[JavaScript] ajax ile axios ve fetch arasındaki fark

[Bağlantıyı kopyala]
Yayınlandı 16.05.2019 13:28:28 | | | |
1.jQuery ajax

Geleneksel Ajax, orijinal js'de ortaya çıkan en eski arka uç istek teknolojisi olan XMLHttpRequest(XHR)'ye atıfta bulunur ve çekirdek XMLHttpRequest nesnesini kullanır.

JQuery ajax, yerel XHR'nin kapsüllenmesidir ve JSONP desteği ekler. Yıllarca süren güncelleme ve bakımdan sonra, gerçekten çok pratik ve avantajları söylenmeye gerek yok; Birkaç eksikliği belirtmekte ısrar ediyorsanız, bu sadece şu olabilir:

1. MVC için programlanıyor, ancak mevcut ön uç MVVM dalgasına uymuyor
2. Yerel XHR geliştirme temelinde, XHR'nin mimarisi net değildir.
3. Tüm JQuery projesi çok büyük ve tüm JQuery'yi sadece ajax kullanarak tanıtmak (kişiselleştirilmiş bir paketleme çözümü benimsemek ve CDN hizmetlerinden yararlanmamak) çok mantıksız olur.
4. Şirketlerin ayrılması ilkesine uymaz
5. Yapılandırma ve çağırma çok kafa karıştırıcı ve olay tabanlı asenkron model dostça değildir.

PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。

Aşağıdaki şekilde gösterildiği gibi:




2.axios

Vue2.0'dan sonra You Yuxi, JQuery ajax'ı Axios ile değiştirmeni önerdi, ki bu da birçok kişinin gözüne Axios'un girmesine neden olmuş olmalı.

Axios, tarayıcılar ve nodeJ'ler için Promises'e dayalı bir HTTP istemcisidir; esasen yerel XHR'nin kapsüllenmesidir, ancak en son ES spesifikasyonlarına uygun bir Promises uygulamasıdır ve kendisi aşağıdaki özelliklere sahiptir:

1. Tarayıcınızdan bir XMLHttpRequest oluşturun
2. Destek Promise API'si
3. İstemci desteği CSRF'yi engeller
4. Eşzamanlı istekler için bazı arayüzler sağlamak (önemli, çok daha pratik işlemler)
5. node.js'dan bir HTTP isteği oluşturun
6. İstekleri ve yanıtları ele geçirmek
7. İstek ve yanıt verilerini dönüştürün
8. Talebin iptali
9. JSON verilerini otomatik olarak dönüştürün

PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。

3.getir


Fetch, ES6'da yer alan ve ES6'da promise nesnesini kullanan AJAX'a alternatif olarak sunuluyor. Fetch vaatlere dayanarak tasarlandı. Fetch'in kod yapısı ajax'tan çok daha basit ve parametreleri jQuery ajax'a biraz benziyor. Ancak, unutmayınfetch, ajax'ın daha fazla kapsüllenmesi değil, yerel js'dir ve XMLHttpRequest nesnesini kullanmaz

Getirmenin avantajları:

1. Odak ayrımına uyun ve tek bir nesnedeki olaylarla takip edilen giriş, çıktı ve durumları karıştırmayın
2. Daha iyi ve daha pratik yazma yolu
Açıkçası, yukarıdaki nedenler bana hiç ikna edici gelmiyor, çünkü hem Jquery hem de Axios xhr'yi yeterince iyi kapsayabilmemize yardımcı oldu ve kullanımı kolay, neden getirme öğrenmek için hâlâ çok çaba harcamamız gerekiyor?

Bence getirmenin başlıca avantajları şunlar:


1. Sözdizimi kısa ve daha anlamsaldır
2. Standart vaat uygulamasına dayanarak, asenkron/bekleme desteği
3. [isomorfik-getirme]( kullanılarak izomorfik kolaylık.https://github.com/matthew-andrews/isomorphic-fetch)
4. Daha alt seviyede, zengin API'ler (istek, yanıt) sağlar
5. XHR'den ayrılan ES spesifikasyonunda yeni bir uygulama
Son zamanlarda, fetch kullanırken birçok sorunla da karşılaştım:
Fetch, düşük seviyeli bir API ve yerel bir XHR olarak düşünebilirsiniz, bu yüzden kullanımı pek rahat değil ve kapsüllenmesi gerekiyor.
Mesela:


1) fetch yalnızca ağ istekleri için hata raporlar ve 400 ile 500 başarılı istek olarak kabul eder; sunucu 400 veya 500 hata kodlarını döndürdüğünde reddetmez.
2) fetch varsayılan olarak çerezler taşımaz, bir yapılandırma öğesi eklemeniz gerekir: fetch(url, {credentials: 'include'})
3) fetch iptal desteği sağlamaz, zaman aşımına bağlı kontrolü desteklemez ve setTimeout ile Promise.reject tarafından uygulanan zaman aşımı kontrolü, istek sürecinin arka planda çalışmaya devam etmesini engelleyemez, bu da trafiğin boşa gitmesine neden olur
4) fetch isteklerin ilerleyişini yerel olarak izlemeye yol yokken, XHR bunu yapabiliyor
Özet: Axios, eşzamanlı kapsülleme sağlar, getirme sorunları olmadan ve küçük boyuttadır, bu da onu şu anda en uygun talep yöntemi yapar.




Önceki:Pure CSS3 radyo düğmelerini güzelleştirir
Önümüzdeki:BIO ve NIO'nun Anlaşılması
Yayınlandı 17.05.2019 18:16:39 |
Öğrendim,
 Ev sahibi| Yayınlandı 20.02.2025 10:08:01 |
Yerel XMLHttpRequest talebi

AL






YAYINLA



Feragatname:
Code Farmer Network tarafından yayımlanan tüm yazılım, programlama materyalleri veya makaleler yalnızca öğrenme ve araştırma amaçları içindir; Yukarıdaki içerik ticari veya yasa dışı amaçlarla kullanılamaz, aksi takdirde kullanıcılar tüm sonuçları ödemelidir. Bu sitedeki bilgiler internetten alınmakta olup, telif hakkı anlaşmazlıklarının bu siteyle hiçbir ilgisi yoktur. Yukarıdaki içeriği indirmeden sonraki 24 saat içinde bilgisayarınızdan tamamen silmelisiniz. Programı beğendiyseniz, lütfen orijinal yazılımı destekleyin, kayıt satın alın ve daha iyi orijinal hizmetler alın. Herhangi bir ihlal olursa, lütfen bizimle e-posta yoluyla iletişime geçin.

Mail To:help@itsvse.com