Ten artykuł jest lustrzanym artykułem tłumaczenia maszynowego, kliknij tutaj, aby przejść do oryginalnego artykułu.

Widok: 11130|Odpowiedź: 2

[JavaScript] Różnica między Ajaxem a Axios i fetchem

[Skopiuj link]
Opublikowano 16.05.2019 13:28:28 | | | |
1.jQuery ajax

Tradycyjny Ajax odnosi się do XMLHttpRequest(XHR), najwcześniejszej technologii zaplecza żądań w oryginalnym js, a rdzeń wykorzystuje obiekt XMLHttpRequest.

JQuery ajax to enkapsulacja natywnego XHR i dodaje wsparcie dla JSONP. Po latach aktualizacji i konserwacji jest to naprawdę bardzo wygodne, a zalety nie trzeba wymieniać; Jeśli uparcie wymieniasz kilka wad, mogą to być tylko następujące dane:

1. Jest to programowanie dla MVC, które nie odpowiada aktualnej fali front-end MVVM
2. Na podstawie natywnego rozwoju XHR, architektura XHR sama nie jest jasna.
3. Cały projekt JQuery jest zbyt duży i bardzo nierozsądne jest wprowadzanie całego JQuery wyłącznie przy użyciu Ajaxu (przyjmując spersonalizowane rozwiązanie opakowań i nie korzystając z usług CDN)
4. Nie jest zgodny z zasadą rozdzielenia interesów
5. Konfiguracja i wywołanie są bardzo mylące, a model asynchroniczny oparty na zdarzeniach nie jest przyjazny.

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

Jak pokazano na poniższym rysunku:




2.axios

Po Vue2.0 You Yuxi zalecił zastąpienie JQuery ajax axios, co musiało sprawić, że axios trafiły do oczu wielu osób.

axios to klient HTTP oparty na obietnicach dla przeglądarek i nodejs, który jest zasadniczo enkapsulacją natywnego XHR, z tą różnicą, że jest implementacją obietnic zgodną z najnowszymi specyfikacjami ES i sam posiada następujące cechy:

1. Stwórz XMLHttpRequest z przeglądarki
2. Wspieraj API Promise
3. Wsparcie klienta uniemożliwia CSRF
4. Zapewnienie kilku interfejsów dla żądań współbiednych (ważne, znacznie wygodniejsze działanie)
5. Utworzenie zapytania HTTP z node.js
6. Prośby o przechwycenie i odpowiedzi
7. Przekształc dane dotyczące żądań i odpowiedzi
8. Anulowanie wniosku
9. Automatyczna konwersja danych JSON

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

3. aportowanie


Fetch jest reklamowany jako alternatywa dla AJAX, który pojawił się w ES6 i wykorzystuje obiekt promise w ES6. Fetch jest zaprojektowany na podstawie obietnic. Struktura kodu w Fetch jest znacznie prostsza niż w Ajax, a parametry są trochę podobne do jQuery ajax. Jednak pamiętaj o tymfetch nie jest dalszą enkapsulacją ajax, lecz natywnym js i nie używa obiektu XMLHttpRequest

Zalety fetch:

1. Przestrzegać rozdzielania fokusów i nie mieszać wejść, wyjść i stanów śledzonych przez zdarzenia w jednym obiekcie
2. Lepszy i wygodniejszy sposób pisania
Szczerze mówiąc, powyższe powody wcale mnie nie przekonują, bo zarówno Jquery, jak i Axios pomogły nam dobrze zahalić xhr i są wystarczająco łatwe w użyciu, to dlaczego wciąż musimy wkładać dużo wysiłku, żeby nauczyć się fetch?

Myślę, że główne zalety fetchu to:


1. Składnia jest zwięzła i bardziej semantyczna
2. Na podstawie standardowej implementacji Promise, wsparcie async/await
3. Wygoda izomorficzna, używając [izomorfic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Bardziej niższy, oferując bogate API (zapytanie, odpowiedź)
5. Odejście od XHR to nowa implementacja w specyfikacji ES
Ostatnio, korzystając z pobierania, napotkałem też wiele problemów:
fetch to niskopoziomowe API, które można traktować jako natywne XHR, więc nie jest zbyt wygodne w użyciu i wymaga enkapsulacji.
Na przykład:


1) pobieranie raportuje tylko błędy dla żądań sieciowych i traktuje 400 oraz 500 jako udane żądania, a serwer nie odrzuci kodów błędów 400 lub 500.
2) fetch domyślnie nie przenosi plików cookie, musisz dodać element konfiguracyjny: fetch(url, {credentials: 'include'})
3) pobieranie nie obsługuje abortu, nie obsługuje sterowania timeoutem, a kontrola timeoutu implementowana przez setTimeout i Promise.reject nie uniemożliwia dalszego działania procesu żądania w tle, co skutkuje marnowaniem ruchu
4) pobieranie nie ma możliwości natywnego monitorowania postępu żądań, podczas gdy XHR może
Podsumowanie: Axios zapewnia enkapsulację współbieżną, bez problemów pobierania, i jest niewielki pod względem rozmiaru, co czyni go obecnie najbardziej odpowiednią metodą żądań.




Poprzedni:Pure CSS3 upiększa przyciski radia
Następny:Zrozumienie BIO i NIO
Opublikowano 17.05.2019 18:16:39 |
Uczony,
 Ziemianin| Opublikowano 20.02.2025 10:08:01 |
Natywne żądanie XMLHttpRequest

POBIERZ






POST



Zrzeczenie się:
Całe oprogramowanie, materiały programistyczne lub artykuły publikowane przez Code Farmer Network służą wyłącznie celom edukacyjnym i badawczym; Powyższe treści nie mogą być wykorzystywane do celów komercyjnych ani nielegalnych, w przeciwnym razie użytkownicy ponoszą wszelkie konsekwencje. Informacje na tej stronie pochodzą z Internetu, a spory dotyczące praw autorskich nie mają z nią nic wspólnego. Musisz całkowicie usunąć powyższą zawartość z komputera w ciągu 24 godzin od pobrania. Jeśli spodoba Ci się program, wspieraj oryginalne oprogramowanie, kup rejestrację i korzystaj z lepszych, autentycznych usług. W przypadku naruszenia praw prosimy o kontakt mailowy.

Mail To:help@itsvse.com