Explique la diferencia entre Ajax, Fetch y Axios

¡Continúe creando, acelere el crecimiento! Este es el quinto día de mi participación en el "Nuggets Daily New Plan · June Update Challenge", haz clic para ver los detalles del evento

Explique la diferencia entre Ajax, Fetch y Axios

Creo que como front-end experimentado, todos Ajax、Fetch、Axioslo conocen bien, pero ¿cuál es la diferencia específica entre los tres?

Para los que Ajax、Fetch、Axiosno saben de caquis, solo pueden salir a la calle. Aquí hablaremos primero sobre la diferencia entre los tres sobre la base de la comprensión.

Diferencia de versión principal

Los tres se utilizan para solicitudes de red, pero con diferentes latitudes. Al igual que las pilas, las colas y los arreglos, las pilas y las colas son estructuras lógicas y los arreglos son estructuras de datos; cosas bidimensionales.

• Ajax ( JavaScript asíncrono y XML): término general para una tecnología .
  • AJAX no es un nuevo lenguaje de programación, sino una nueva forma de utilizar los estándares existentes. Se hizo popular gradualmente con web2.0
• Fetch : es una API específica
  • Proporciona una interfaz de JavaScript para acceder y manipular partes específicas de la canalización HTTP, como solicitudes y respuestas.

• Axios : es una biblioteca de terceros axios-http.com/docs/intro

Avanzado

Ajax usando XMLHttpRequest

Este es un tema muy básico, así que no lo presentaré, solo vaya al código

/**
 * 
 * @param {*} url 请求地址
 * @param {*} successFn 回调参数
 */
function mockAjax(url, successFn) {
  const xhr = new XMLHttpRequest()
  xhr.open("GET", url, false)
  xhr.onreadystatechange =  () => {
    if(xhr.readyState == 4){
      if(xhr.status == 200){
        successFn(xhr.responseText)
      }
    }
  }
  xhr.send(null)
}
复制代码

Aquí usamos XMLHttpRequest para implementar Ajax, XMLHttpRequest es en realidad una API global similar a Fetch

Buscar

• API nativa del navegador para solicitudes de red
• Un nivel con XMLHttpRequest, ambos son api
• La sintaxis de Fetch es más concisa, fácil de usar y admite Promise

demostración de código

function ajax2(url) {
  return fetch(url).then(res => res.json())
}
复制代码

Efectivamente, las cosas que salieron más tarde son mejores para usar, ¿verdad? . . Ja ja ja ja

Podemos usar XMLHttpRequest para implementar Ajax o Fetch para implementar Ajax; por lo tanto, Ajax es un término general para tecnología, pero tenga en cuenta que XMLHttpRequest y Fetch son una API básica.

Axios

• La biblioteca de solicitudes de red más utilizada (con la popularidad de Vue)
• XMLHttpRequest disponible internamente, Obtener para lograr
• biblioteca de terceros axios-http.com/docs/intro

Concéntrate en eso (tos tos tos)

De hecho, cuando se trata de la diferencia entre Ajax, Fetch y Axios, debe saber cómo responderla.

• Tecnología Ajax colectivamente
• Obtener API nativa
• Bibliotecas de terceros de Axios

Todos ellos están relacionados con las solicitudes de red, es decir, diferentes dimensiones