1.jQuery ajax
Ajax tradicional se refiere a XMLHttpRequest(XHR), la tecnología de peticiones de backend más antigua que apareció en el js original, y el núcleo utiliza el objeto XMLHttpRequest.
JQuery ajax es una encapsulación de XHR nativo y añade soporte para JSONP. Después de años de actualizaciones y mantenimiento, es realmente muy cómodo, y no hace falta mencionar sus ventajas; Si insistes en enumerar algunas carencias, puede que solo seas:
1. Es programación para MVC, que no se ajusta a la actual oleada de MVVM front-end
2. Basado en el desarrollo nativo de XHR, la arquitectura de XHR en sí no está clara.
3. Todo el proyecto JQuery es demasiado grande, y es muy poco razonable introducir todo JQuery usando solo ajax (adoptando una solución de empaquetado personalizado y sin disfrutar de servicios CDN)
4. No se ajusta al principio de separación de las preocupaciones
5. La configuración y la invocación son muy confusas, y el modelo asíncrono basado en eventos no es amigable.
PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。
Como se muestra en la siguiente figura:
2.axios
Después de Vue2.0, You Yuxi recomendó reemplazar JQuery ajax por axios, lo que debió hacer que los axios entraran en la mirada de mucha gente.
Axios es un cliente HTTP basado en Promises para navegadores y NoDEJs, que es esencialmente una encapsulación de XHR nativo, salvo que es una implementación de Promises que cumple con las últimas especificaciones de ES, y a su vez posee las siguientes características:
1. Crea una solicitud XMLHttp desde tu navegador
2. API de Promesa de Soporte
3. El soporte al cliente impide CSRF
4. Proporcionar algunas interfaces para solicitudes concurrentes (operación importante y mucho más conveniente)
5. Crear una solicitud HTTP desde node.js
6. Interceptar solicitudes y respuestas
7. Datos de solicitud y respuesta de transformación
8. Cancelación de la solicitud
9. Convertir automáticamente los datos JSON
PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
3.buscar
Fetch se presenta como una alternativa a AJAX, que apareció en ES6 y utiliza el objeto promise en ES6. El traer está diseñado basándose en promesas. La estructura del código de Fetch es mucho más sencilla que la de ajax, y los parámetros son un poco como jQuery ajax. Sin embargo, asegúrate de recordarfetch no es una encapsulación adicional de ajax, sino js nativo y no utiliza el objeto XMLHttpRequest。
Ventajas del fetch:
1. Cumplir con la separación de enfoque y no mezclar entradas, salidas y estados seguidos por eventos en un solo objeto
2. Mejor y más cómoda forma de escribir
Francamente, las razones anteriores no me convencen en absoluto, porque tanto Jquery como Axios nos han ayudado a encapsular xhr lo suficientemente bien y son fáciles de usar, ¿por qué seguimos teniendo que esforzarnos tanto en aprender a buscar objetos?
Creo que las principales ventajas de traer la pelota son:
1. La sintaxis es concisa y más semántica
2. Basado en la implementación estándar de promesas, soportar async/await
3. Conveniencia isomorfa, usando [isomorfo-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
4. Más básico, proporcionando APIs ricas (solicitud, respuesta)
5. Separarse de XHR es una nueva implementación en la especificación ES
fetch es una API de bajo nivel que puedes considerar como un XHR nativo, así que no es muy cómodo de usar y necesita ser encapsulado.
Por ejemplo:
1) fetch solo informa de errores para las solicitudes de red, y trata las solicitudes 400 y 500 como exitosas, y el servidor no rechazará al devolver códigos de error 400 o 500.
2) fetch no lleva cookies por defecto, necesitas añadir un elemento de configuración: fetch(url, {credentials: 'include'})
3) fetch no soporta abortar, no soporta control de tiempo de espera, y el control de tiempo de espera implementado por setTimeout y Promise.reject no puede impedir que el proceso de solicitud continúe ejecutándose en segundo plano, lo que resulta en tráfico desperdiciado
4) el fetch no tiene forma de monitorizar nativamente el progreso de las solicitudes, mientras que XHR sí
|
Publicado en 16/5/2019 13:28:28
|
|
|
|
Publicado en 17/5/2019 18:16:39
|
Propietario