1.jQuery ajax
Ajax tradizionale si riferisce a XMLHttpRequest(XHR), la prima tecnologia di back-end request apparsa nel js originale, e il core utilizza l'oggetto XMLHttpRequest.
JQuery ajax è un'incapsulazione del nativo XHR e aggiunge il supporto per JSONP. Dopo anni di aggiornamenti e manutenzione, è davvero molto comodo, e i vantaggi non vanno espressi; Se insisti a elencare alcune carenze, potrebbero essere solo:
1. È una programmazione per MVC, che non si conforma all'attuale ondata di MVVM front-end
2. Basandosi sullo sviluppo nativo di XHR, l'architettura stessa di XHR non è chiara.
3. L'intero progetto JQuery è troppo grande, ed è molto irragionevole introdurre l'intero JQuery usando solo ajax (adottando una soluzione di packaging personalizzata e non godendo dei servizi CDN)
4. Non è conforme al principio di separazione delle preoccupazioni
5. La configurazione e l'invocazione sono molto confuse, e il modello asincrono basato su eventi non è amichevole.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Come mostrato nella figura seguente:
2. Axios
Dopo Vue2.0, You Yuxi ha consigliato di sostituire JQuery ajax con axios, che deve aver fatto entrare axios negli occhi di molte persone.
Axios è un client HTTP basato su Promises for browser e NODEJS, che è essenzialmente un'incapsulazione di XHR nativo, tranne per il fatto che è un'implementazione di Promises conforme alle ultime specifiche ES, e possiede esso stesso le seguenti caratteristiche:
1. Crea una XMLHttpRequest dal tuo browser
2. API di supporto Promise
3. Il supporto clienti impedisce la CSRF
4. Fornire alcune interfacce per richieste concorrenti (funzionamento importante e molto più conveniente)
5. Creare una richiesta HTTP da node.js
6. Intercettare richieste e risposte
7. Trasformare i dati di richiesta e risposta
8. Cancellazione della richiesta
9. Convertire automaticamente i dati JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3.riporto.
Fetch viene presentato come un'alternativa a AJAX, che apparve in ES6 e utilizza l'oggetto promise in ES6. Il ritiro è progettato basandosi sulle promesse. La struttura del codice di Fetch è molto più semplice rispetto ad ajax, e i parametri sono un po' come jQuery ajax. Tuttavia, ricordafetch non è un'ulteriore incapsulazione di ajax, ma di js nativo e non utilizza l'oggetto XMLHttpRequest。
Vantaggi del fetch:
1. Rispettare la separazione del focus e non mescolare input, output e stati tracciati dagli eventi in un unico oggetto
2. Modo migliore e più comodo di scrivere
Francamente, le ragioni sopra non mi convincono affatto, perché sia Jquery che Axios ci hanno aiutato a incapsulare abbastanza bene xhr e sono abbastanza facili da usare, perché dobbiamo comunque spendere così tanto impegno per imparare a riferire il porto?
Penso che i principali vantaggi del riporto-porta siano:
1. La sintassi è concisa e più semantica
2. Basandosi sull'implementazione standard della promessa, supportare async/await
3. Comodità isomorfa, usando [isomorfo-riporto](https://github.com/matthew-andrews/isomorphic-fetch)
4. Più di livello base, fornendo API ricche (richiesta, risposta)
5. Separarsi da XHR è una nuova implementazione nella specifica ES
fetch è un'API di basso livello che puoi considerare come un XHR nativo, quindi non è molto comodo da usare e va incapsulato.
Per esempio:
1) fetch segnala solo errori per le richieste di rete, e considera 400 e 500 come richieste riuscite, e il server non rifiuterà quando restituisce codici di errore 400 o 500.
2) fetch non trasporta i cookie di default, devi aggiungere un elemento di configurazione: fetch(url, {credentials: 'include'})
3) fetch non supporta l'aborto, non supporta il controllo del timeout, e il controllo di timeout implementato da setTimeout e Promise.reject non può impedire al processo di richiesta di continuare a essere eseguito in background, causando sprechi di traffico
4) il fetch non ha modo di monitorare nativamente l'avanzamento delle richieste, mentre XHR può
|
Pubblicato su 16/05/2019 13:28:28
|
|
|
|
Pubblicato su 17/05/2019 18:16:39
|
Padrone di casa|
Pubblicato su 20/02/2025 10:08:01
|
