La diferencia entre ajax, axios y fetch, terminando

Ajax（xhr）

AJAX Ajax es "AsynchronousJavascriptAndXML" (JavaScript asíncrono y XML), que se refiere a una tecnología de desarrollo web para crear aplicaciones web interactivas. Es una técnica para actualizar partes de una página web sin recargar toda la página web. Ajax permite que las páginas web se actualicen de forma asíncrona intercambiando pequeñas cantidades de datos con el servidor en segundo plano. Esto significa que partes de una página web se pueden actualizar sin recargar toda la página web. Las páginas web tradicionales (que no usan Ajax) deben recargar toda la página web si es necesario actualizar el contenido. Sus desventajas son las siguientes:

Está dirigido a la programación MVC y no se ajusta a la ola de front-end MVVM
Basado en el desarrollo nativo de XHR, la estructura de XHR en sí no está clara
No cumple con el principio de Separación de Asuntos
Los métodos de configuración y llamada son muy confusos y el modelo asíncrono basado en eventos no es amigable.

Ajax es un concepto, un estándar y un método. Por ejemplo, jQuery tiene un método Ajax encapsulado para enviar solicitudes de obtención y publicación. El principio subyacente es utilizar el objeto XMLHttpRequest. Ya existe Xhr2, que puede transferir archivos, calcular el progreso de carga, etc. Por supuesto, Xhr puede implementar ajax por sí mismo, pero es un poco problemático:

// 1. Crear una instancia de XMLHttpRequest 
let xhr = XMLHttpRequest() 
// 2. Abrir una conexión con el servidor 
xhr.open('get', 'URL') 
// 3. Enviar 
xhr.send() 
// 4 .Recibir cambios. 
xhr.onreadystatechange = () => { 
    if(xhr.readyState == 4 && xhr.status == 200){ // readyState: estado de ajax, estado: estado de la solicitud http 
        console.log(xhr.responseText); // respuesta tema 
    } 
}

TIPS (suplemento: MVC y MVVM):

1. MVC (Model View Controller) es un patrón de arquitectura de software en ingeniería de software, que divide el sistema de software en tres partes básicas: modelo, vista y controlador . Organice el código con un método para separar la lógica empresarial, los datos y la visualización de la interfaz, y reúna la lógica empresarial en un solo componente. Mientras mejora y personaliza la interfaz y la interacción del usuario, no es necesario volver a escribir la lógica empresarial.

2. MVVM es la abreviatura de Model-View-ViewModel, que se compone de tres partes de MV-VM. Es esencialmente una versión mejorada de MVC. MVVM es para abstraer el estado y el comportamiento de la Vista, donde ViewModel separa la interfaz de usuario de la vista de la lógica comercial. Puede sacar los datos del Modelo y ayudar a lidiar con la lógica comercial involucrada en la Vista debido a la necesidad de mostrar contenido. Con el enlace de datos bidireccional, los cambios de datos en la vista se reflejarán automáticamente en el modelo de vista y viceversa, los cambios de datos en el modelo también se mostrarán automáticamente en la página. El ViewModel es lo que asocia el Modelo con la Vista. ViewModel es responsable de sincronizar los datos del modelo con la vista para su visualización, y también es responsable de sincronizar la modificación de la vista con el modelo. imagen

axios

Axios es un cliente HTTP basado en la encapsulación Promise, que es más ligero que ajax en jq.Tiene dos interceptores en su interior, a saber, el interceptor de solicitudes y el interceptor de respuestas. En las aplicaciones SPA, los tokens generalmente se usan para la autenticación de la identidad del usuario, lo que requiere que cada solicitud lleve la información de identidad del usuario. Para este requisito, a fin de evitar el procesamiento por separado en cada solicitud, podemos empaquetar una función de solicitud unificada para Agregar información del token. uniformemente para cada solicitud. Esto es lo que hacen los interceptores. Sus características son las siguientes:

El navegador inicia una solicitud XMLHttpRequests
El lado del nodo inicia una solicitud http
API de promesa de soporte
Escuche solicitudes y devoluciones
Convierta solicitudes y devoluciones, convierta automáticamente datos json
El cliente admite la defensa contra ataques CSRF

Los métodos comúnmente utilizados de axios son get, post, put, patch, deleteetc. Donde gety postdevueltos son promiseobjetos, promisese pueden usar métodos. En la actualidad, hay muchos extraños que se usan en vue. Ejemplo de método get:

axios.get('apiURL', {
    param: {
        id: 1
    }
    // param 中的的键值对最终会 ? 的形式，拼接到请求的链接上，发送到服务器。
}).then(res => {
    console.log(res);
})
.catch( error => {
    console.log(error)
}

Puntos de conocimiento sobre axios:

Secuencia de ejecución del interceptor Axios:

//添加两个请求拦截，看到时候先执行哪个
axios.interceptors.request.use(config => {
  console.log(`请求1`);
  return config;
});
axios.interceptors.request.use(config => {
  console.log(`请求2`);
  return config;
});

//添加两个响应拦截，看到时候先执行哪个
axios.interceptors.response.use(response => {
  console.log(`响应1`);
  return response.data;
});
axios.interceptors.response.use(response => {
  console.log(`响应2`);
  return response;
});

// 发送请求 
axios.get('/posts')
  .then(response => {
    console.log('success');
  }) 

//**************结果*********************//
console.log("请求2");
console.log("请求1");
console.log("响应1");
console.log("响应2");
console.log("success");
//原因，请求拦截使用的是数组的unshift方法，响应拦截使用的是push方法

buscar

fetch afirma ser un sustituto de AJAX, que apareció en ES6 y usa el objeto de promesa en ES6. Fetch está diseñado en base a promesas. La estructura del código de Fetch es mucho más simple que la de ajax. fetch no es una encapsulación adicional de ajax, sino js nativo, sin usar el objeto XMLHttpRequest. fetchEs la forma de solicitar datos de http, usa Promise, pero no usa la función de devolución de llamada. fetchAdopta un diseño modular y procesa datos a través de flujos de datos, lo que es muy útil para solicitudes de archivos grandes o velocidades de red lentas. Por defecto, fetch no recibirá ni enviará cookies.

Sintaxis concisa, más semánticamente basada en estándares
Implementación de promesa, soporte async/await
Es más de bajo nivel y proporciona API ricas (solicitud, respuesta)
Separado de XHR, es una nueva implementación en la especificación ES

defecto:

Demasiado bajo nivel, muchos códigos de estado no están encapsulados. Solo informe errores para solicitudes de red y trate 400 y 500 como solicitudes exitosas.
A diferencia de XHR, fetch no puede detectar el progreso de la solicitud.
La solicitud no se puede bloquear y el proceso de solicitud continúa ejecutándose en segundo plano, lo que genera una pérdida de tráfico. No admite anulación, no admite control de tiempo de espera, use setTimeout y Promise.reject para lograr el control de tiempo de espera.
mala compatibilidad