1.jQuery ajax
Traditionell Ajax syftar på XMLHttpRequest(XHR), den tidigaste backend-förfrågningsteknologin som förekom i den ursprungliga js, och kärnan använder XMLHttpRequest-objektet.
JQuery ajax är en inkapsling av native XHR och lägger till stöd för JSONP. Efter år av uppdatering och underhåll är det verkligen mycket bekvämt, och fördelarna behöver inte nämnas; Om du insisterar på att lista några brister kan det bara vara:
1. Det är programmering för MVC, som inte följer den nuvarande vågen av front-end MVVM 2. Baserat på den inbyggda XHR-utvecklingen är arkitekturen för XHR själv oklar. 3. Hela JQuery-projektet är för stort, och det är mycket orimligt att införa hela JQuery enbart med ajax (genom att använda en personlig paketeringslösning och inte njuta av CDN-tjänster) 4. Den överensstämmer inte med principen om separation av intressen 5. Konfigurationen och anropandet är mycket förvirrande, och den händelsebaserade asynkrona modellen är inte vänlig.
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 visas i följande figur:
2.axios
Efter Vue2.0 rekommenderade You Yuxi att du skulle ersätta JQuery ajax med axios, vilket måste ha gjort axios till många människors ögon.
axios är en HTTP-klient baserad på löften för webbläsare och nodejs, vilket i grunden är en inkapsling av inbyggt XHR, förutom att det är en implementation av löften som följer de senaste ES-specifikationerna, och den har själv följande egenskaper:
1. Skapa en XMLHttpRequest från din webbläsare 2. Support Promise API 3. Klientsupport förhindrar CSRF 4. Tillhandahålla några gränssnitt för samtidiga förfrågningar (viktig, mycket mer bekväm operation) 5. Skapa en HTTP-förfrågan från node.js 6. Avlyssnade förfrågningar och svar 7. Transformera förfrågnings- och svarsdata 8. Upphävande av begäran 9. Konvertera automatiskt JSON-data
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略,假冒的网站是拿不到你cookie中得key的,这样,后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入,从而采取正确的策略。
3. hämta
Fetch marknadsförs som ett alternativ till AJAX, som förekom i ES6 och använder promise-objektet i ES6. Fetch är utformat baserat på löften. Fetchs kodstruktur är mycket enklare än ajax, och parametrarna är lite som jQuery ajax. Men kom ihåg detFetch är inte en vidare inkapsling av ajax, utan inbyggd JS och använder inte XMLHttpRequest-objektet。
Fördelar med fetch:
1. Följ fokusseparationen och blanda inte ingångar, utgångar och tillstånd som följs av händelser i ett enda objekt 2. Bättre och mer bekvämt sätt att skriva Ärligt talat är ovanstående skäl inte alls övertygande för mig, eftersom både Jquery och Axios har hjälpt oss att kapsla in xhr tillräckligt bra och är tillräckligt enkla att använda, varför måste vi ändå lägga ner mycket ansträngning på att lära oss apport?
Jag tror att de största fördelarna med apport är:
1. Syntaxen är koncis och mer semantisk 2. Baserat på standardimplementering av löften, stöd asynk/vänta 3. Isomorf bekvämlighet, med hjälp av [isomorf-hämta](https://github.com/matthew-andrews/isomorphic-fetch) 4. Mer bottennivå, med rika API:er (förfrågan, svar) 5. Att bryta sig loss från XHR är en ny implementation i ES-specifikationen På sistone, när jag använder apport, har jag också stött på många problem: fetch är ett lågnivå-API som du kan tänka dig som en inbyggd XHR, så det är inte så bekvämt att använda och måste kapslas in. Till exempel:
1) fetch rapporterar endast fel för nätverksförfrågningar och behandlar 400 och 500 som lyckade förfrågningar, och servern kommer inte att avvisa när den returnerar 400 eller 500 felkoder. 2) fetch bär inte cookies som standard, du behöver lägga till en konfigurationspunkt: fetch(url, {credentials: 'include'}) 3) fetch stöder inte avbrytning, stöder inte timeout-kontroll, och timeout-kontrollen som implementeras av setTimeout och Promise.reject kan inte förhindra att förfrågningsprocessen fortsätter köra i bakgrunden, vilket resulterar i bortkastad trafik 4) fetch har inget sätt att nativt övervaka förfrågningars framsteg, medan XHR kan göra det Sammanfattning: Axios erbjuder samtidig inkapsling, utan problemen med hämtning, och är liten till storleken, vilket gör det till den mest lämpliga förfrågningsmetoden nu.
|