¿Conoces la diferencia entre Ajax, Fetch y Axios?

¡Acostúmbrate a escribir juntos! Este es el cuarto día de mi participación en el "Nuggets Daily New Plan·Desafío de actualización de abril",Haga clic para ver los detalles del evento。

prefacio

Los socios de desarrollo front-end deben ser inseparables de la palabra "solicitud", ¡que es la forma más importante para que interactuemos con el back-end! En las entrevistas de los últimos años, una de las preguntas que les gustaba hacer a los entrevistadores es dejar que rompieran el código para implementar Ajax. Creo que muchos socios pequeños deben haberlo encontrado. Hasta el día de hoy, ha habido muchos sustantivos nuevos sobre solicitudes, y hoy discutiremos las diferencias entre estos sustantivos nuevos.

Lo que estos sustantivos tienen en común: todos se usan para enviar solicitudes de red.

1.Ajax

Su nombre completo es: JavaScript y XML asíncronos, que se traduce como "Javascript y XML asíncronos".

Muchos socios pequeños pueden pensar erróneamente que Ajax es una forma de enviar solicitudes, o equiparar XMLHttpRequest con Ajax. De hecho, esto es incorrecto y unilateral.

respuesta correcta:

Ajax es un término general para tecnologías y un modelo conceptual. Incluye muchas tecnologías y no se refiere a una tecnología en particular. Una de sus características importantes es permitir que las páginas se actualicen parcialmente.

Características:

Actualizar la página parcialmente sin recargar toda la página.

En pocas palabras, Ajax es una idea y XMLHttpRequest es solo una forma de implementar Ajax. Entre ellos, el módulo XMLHttpRequest es una buena manera de implementar Ajax, que también es uno de los códigos que a muchos entrevistadores les gusta dejar que los entrevistadores rasguen a mano.

Ajax se implementa utilizando el módulo XMLHttpRequest.

Código de muestra:

<body>
  <script>
    function ajax(url) {
      const xhr = new XMLHttpRequest();
      xhr.open("get", url, false);
      xhr.onreadystatechange = function () {
        // 异步回调函数
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.info("响应结果", xhr.response)
          }
        }
      }
      xhr.send(null);
    }
    ajax('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

Resultado de salida:

Aquí, se implementa una solicitud de red de obtención más simple utilizando el módulo XMLHttpRequest.

Nota: Cuando usamos este método para implementar solicitudes de red, si la solicitud contiene una solicitud dentro del ciclo, habrá un infierno de devolución de llamada, lo que también es una crítica, y luego nació un método de solicitud más elegante.

2. Obtener

Fetch apareció en ES6 y utiliza el objeto de promesa propuesto por ES6. Es un reemplazo para XMLHttpRequest.

很多小伙伴会把它与 Ajax 作比较，其实这是不对的，我们通常所说的 Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。

正解：

Fetch 是一个 API，它是真实存在的，它是基于 promise 的。

特点：

使用 promise，不使用回调函数。
采用模块化设计，比如 rep、res 等对象分散开来，比较友好。
通过数据流对象处理数据，可以提高网站性能。

所以这里就和 Ajax 又很大不同了，一个是思想，一个是真实存在的 API，不过它们都是用来给网络请求服务的，我们一起来看看利用 Fetch 实现网络请求。

示例代码：

<body>
  <script>
    function ajaxFetch(url) {
      fetch(url).then(res => res.json()).then(data => {
        console.info(data)
      })
    }
    ajaxFetch('https://smallpig.site/api/category/getCategory')
  </script>
</body>
复制代码

输出结果：

上段代码利用 Fetch 发送了一个最简单的 get 请求，其中最重要的特点之一就是采用了.then 链式调用的方式处理结果，这样不仅利于代码的可读，而且也解决了回调地狱的问题。

3.Axios

Axios 是随着 Vue 的兴起而被广泛使用的，目前来说，绝大多数的 Vue 项目中的网络请求都是利用 Axios 发起的。当然它并不是一个思想，或者一个原生 API，它是一个封装库。

正解：

Axios 是一个基于 promise 封装的网络请求库，它是基于 XHR 进行二次封装。

特点：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

所以说，Axios 可以说是 XHR 的一个子集，而 XHR 又是 Ajax 的一个子集。既然说它是一个库，那么我们在使用的时候就需要引入它。

示例代码：

// 发送 POST 请求
axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
复制代码

总结

Ajax、Fetch、axios三者之间的关系可以用一张图来清晰的表示，如图：

三者做个对比：

网络请求	特点
Ajax	一种技术统称，主要利用XHR实现网络请求
Fetch	具体API，基于promise，实现网络请求
Axios	一个封装库，基于XHR封装，较为推荐使用