1.jQuery ajax
Tradisjonell Ajax refererer til XMLHttpRequest (XHR), den tidligste backend-forespørselsteknologien som dukket opp i den opprinnelige js, og kjernen bruker XMLHttpRequest-objektet.
JQuery ajax er en innkapsling av native XHR og legger til støtte for JSONP. Etter år med oppdatering og vedlikehold er det virkelig veldig praktisk, og fordelene trenger ikke å nevnes; Hvis du insisterer på å liste opp noen få svakheter, kan det bare være:
1. Det programmerer for MVC, som ikke følger den nåværende bølgen av front-end MVVM 2. Basert på native XHR-utvikling er arkitekturen til XHR i seg selv uklar. 3. Hele JQuery-prosjektet er for stort, og det er svært urimelig å introdusere hele JQuery kun ved hjelp av ajax (ved å adoptere en personlig pakkeløsning og ikke nyte CDN-tjenester) 4. Den samsvarer ikke med prinsippet om separasjon av interesser 5. Konfigurasjonen og påkallelsen er veldig forvirrende, og den hendelsesbaserte asynkrone modellen er ikke vennlig.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller(MVC)模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离,极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层,它就像是一个中转站(value converter),负责转换 Model 中的数据对象来让数据变得更容易管理和使用,该层向上与视图层进行双向数据绑定,向下与 Model 层通过接口请求进行数据交互,起呈上启下作用。View 层展现的不是 Model 层的数据,而是 ViewModel 的数据,由 ViewModel 负责与 Model 层交互,这就完全解耦了 View 层和 Model 层,这个解耦是至关重要的,它是前后端分离方案实施的最重要一环。
Som vist i følgende figur:
2. Axios
Etter Vue2.0 anbefalte You Yuxi at du erstattet JQuery ajax med axios, noe som må ha gjort axios kjent for mange.
Axios er en HTTP-klient basert på Promises for nettlesere og NodeJS, som i hovedsak er en innkapsling av native XHR, bortsett fra at det er en implementering av Promises som oppfyller de nyeste ES-spesifikasjonene, og den har selv følgende egenskaper:
1. Opprett en XMLHttpRequest fra nettleseren din 2. Support Promise API 3. Kundestøtte forhindrer CSRF 4. Tilby noen grensesnitt for samtidige forespørsler (viktig, mye mer praktisk drift) 5. Opprette en HTTP-forespørsel fra node.js 6. Avskjæringsforespørsler og svar 7. Transformér forespørsler- og svardata 8. Tilbaketrekking av forespørselen 9. Konverter automatisk JSON-data
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
3. hent
Fetch markedsføres som et alternativ til AJAX, som dukket opp i ES6 og bruker promise-objektet i ES6. Hent er designet basert på løfter. Fetchs kodestruktur er mye enklere enn ajax, og parameterne er litt som jQuery ajax. Men husk å huskeFetch er ikke en videre innkapsling av ajax, men native JS og bruker ikke XMLHttpRequest-objektet。
Fordeler med henting:
1. Følg fokusseparasjon, og bland ikke innganger, utganger og tilstander som spores av hendelser i ett objekt 2. Bedre og mer praktisk måte å skrive på Ærlig talt, de ovennevnte grunnene er ikke overbevisende for meg i det hele tatt, fordi både Jquery og Axios har hjulpet oss å innkapsle xhr godt nok og er enkle å bruke, hvorfor må vi fortsatt bruke mye krefter på å lære hent?
Jeg tror hovedfordelene med henting er:
1. Syntaksen er konsis og mer semantisk 2. Basert på standard løfteimplementering, støtte asynkron/await 3. Isomorf bekvemmelighet, ved bruk av [isomorf-hent](https://github.com/matthew-andrews/isomorphic-fetch) 4. Mer bunnnivå, med rike API-er (forespørsel, respons) 5. Å bryte med XHR er en ny implementering i ES-spesifikasjonen Nylig, når jeg bruker hent, har jeg også støtt på mange problemer: fetch er et lavnivå API som du kan tenke på som en native XHR, så det er ikke så komfortabelt å bruke og må kapsles inn. For eksempel:
1) hent rapporterer kun feil for nettverksforespørsler, og behandler 400 og 500 som vellykkede forespørsler, og serveren vil ikke avvise når den returnerer 400 eller 500 feilkoder. 2) Fetch bærer ikke informasjonskapsler som standard, du må legge til et konfigurasjonselement: fetch(URL, {credentials: 'include'}) 3) fetch støtter ikke avbryting, støtter ikke timeout-kontroll, og timeout-kontrollen implementert av setTimeout og Promise.reject kan ikke hindre forespørselsprosessen i å fortsette å kjøre i bakgrunnen, noe som resulterer i bortkastet trafikk 4) fetch har ingen måte å overvåke fremdriften av forespørsler på nativt, mens XHR kan Sammendrag: Axios tilbyr samtidig innkapsling, uten problemene med henting, og er liten i størrelse, noe som gjør det til den mest egnede forespørselsmetoden nå.
|