Šis straipsnis yra veidrodinis mašininio vertimo straipsnis, spauskite čia norėdami pereiti prie originalaus straipsnio.

Rodinys: 11130|Atsakyti: 2

[JavaScript] Skirtumas tarp "ajax" ir "axios" bei "fetch"

[Kopijuoti nuorodą]
Paskelbta 2019-05-16 13:28:28 | | | |
1.jQuery ajax

Tradicinis Ajax reiškia XMLHttpRequest(XHR), ankstyviausią back-end užklausų technologiją, kuri pasirodė originaliame js, o branduolys naudoja XMLHttpRequest objektą.

JQuery ajax yra vietinio XHR inkapsuliacija ir prideda JSONP palaikymą. Po daugelio metų atnaujinimo ir priežiūros tai tikrai labai patogu, o privalumų nereikia sakyti; Jei primygtinai reikalaujate išvardyti keletą trūkumų, tai gali būti tik:

1. Tai MVC programavimas, kuris neatitinka dabartinės priekinės MVVM bangos
2. Remiantis vietine XHR plėtra, pati XHR architektūra nėra aiški.
3. Visas JQuery projektas yra per didelis, ir labai neprotinga pristatyti visą JQuery naudojant vien ajax (priimant personalizuotą pakavimo sprendimą ir nesinaudojant CDN paslaugomis)
4. Jis neatitinka interesų atskyrimo principo
5. Konfigūracija ir iškvietimas yra labai painūs, o įvykiais pagrįstas asinchroninis modelis nėra draugiškas.

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

Kaip parodyta šiame paveikslėlyje:




2.AXIOS

Po Vue2.0, You Yuxi rekomendavo pakeisti JQuery ajax axios, dėl kurių axios turėjo patekti į daugelio žmonių akis.

axios yra HTTP klientas, pagrįstas pažadais naršyklėms ir nodejs, kuris iš esmės yra vietinio XHR inkapsuliavimas, išskyrus tai, kad tai yra pažadų įgyvendinimas, atitinkantis naujausias ES specifikacijas, ir pats turi šias savybes:

1. Sukurkite XMLHttpRequest iš savo naršyklės
2. Palaikymo pažado API
3. Klientų aptarnavimas apsaugo nuo CSRF
4. Pateikite kai kurias sąsajas vienalaikėms užklausoms (svarbu, daug patogesnis valdymas)
5. Sukurkite HTTP užklausą iš node.js
6. Perimti užklausas ir atsakymus
7. Pakeiskite užklausos ir atsakymo duomenis
8. Prašymo atšaukimas
9. Automatiškai konvertuokite JSON duomenis

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

3. Atnešti


"Fetch" apmokestinamas kaip alternatyva AJAX, kuris pasirodė ES6 ir naudoja pažado objektą ES6. "Fetch" sukurtas remiantis pažadais. Fetch kodo struktūra yra daug paprastesnė nei ajax, o parametrai yra šiek tiek panašūs į jQuery ajax. Tačiau būtinai atsiminkitefetch nėra tolesnis Ajax inkapsuliavimas, bet vietinis js ir nenaudoja XMLHttpRequest objekto

"Fetch" privalumai:

1. Laikykitės fokusavimo atskyrimo ir nemaišykite įėjimų, išėjimų ir būsenų, stebimų įvykių viename objekte
2. Geresnis ir patogesnis rašymo būdas
Atvirai kalbant, aukščiau pateiktos priežastys manęs visai neįtikina, nes tiek "Jquery", tiek "Axios" padėjo mums pakankamai gerai inkapsuliuoti xhr ir yra pakankamai paprasti naudoti, kodėl vis dar turime įdėti daug pastangų, kad išmoktume atnešti?

Manau, kad pagrindiniai "fetch" privalumai yra šie:


1. Sintaksė yra glausta ir semantiškesnė
2. Remiantis standartiniu pažado įgyvendinimu, palaikykite asinchroninį / laukti
3. Izomorfinis patogumas, naudojant [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Daugiau apatinio lygio, teikiant išsamias API (užklausa, atsakymas)
5. Atsitraukimas nuo XHR yra naujas ES specifikacijos įgyvendinimas
Pastaruoju metu, naudodamas "fetch", taip pat susidūriau su daugybe problemų:
"fetch" yra žemo lygio API, kurią galite laikyti vietiniu XHR, todėl ją naudoti nėra taip patogu ir ją reikia kapsuliuoti.
Pavyzdžiui:


1) "Fetch" praneša tik apie tinklo užklausų klaidas, o 400 ir 500 traktuoja kaip sėkmingas užklausas, o serveris neatsisakys grąžindamas 400 ar 500 klaidų kodų.
2) "Fetch" pagal numatytuosius nustatymus neperduoda slapukų, turite pridėti konfigūracijos elementą: fetch(url, {credentials: 'include'})
3) fetch nepalaiko nutraukimo, nepalaiko skirtojo laiko valdymo, o setTimeout ir Promise.reject įdiegta skirtojo laiko kontrolė negali užkirsti kelio užklausos procesui toliau vykdyti fone, todėl eikvojamas srautas
4) "fetch" neturi galimybės natūraliai stebėti užklausų eigos, o XHR gali
Santrauka: "Axios" teikia vienu metu inkapsuliavimą be gavimo problemų ir yra mažo dydžio, todėl dabar tai yra tinkamiausias užklausos būdas.




Ankstesnis:Pure CSS3 gražina radijo mygtukus
Kitą:BIO ir NIO supratimas
Paskelbta 2019-05-17 18:16:39 |
Išmoko,
 Savininkas| Paskelbta 2025-02-20 10:08:01 |
Vietinė XMLHttpRequest užklausa

PRIEITI






POST



Atsakomybės apribojimas:
Visa programinė įranga, programavimo medžiaga ar straipsniai, kuriuos skelbia Code Farmer Network, yra skirti tik mokymosi ir mokslinių tyrimų tikslams; Aukščiau nurodytas turinys negali būti naudojamas komerciniais ar neteisėtais tikslais, priešingu atveju vartotojai prisiima visas pasekmes. Šioje svetainėje pateikiama informacija gaunama iš interneto, o ginčai dėl autorių teisių neturi nieko bendra su šia svetaine. Turite visiškai ištrinti aukščiau pateiktą turinį iš savo kompiuterio per 24 valandas nuo atsisiuntimo. Jei jums patinka programa, palaikykite autentišką programinę įrangą, įsigykite registraciją ir gaukite geresnes autentiškas paslaugas. Jei yra kokių nors pažeidimų, susisiekite su mumis el. paštu.

Mail To:help@itsvse.com