Una de las tareas fundamentales de cualquier aplicación web es comunicarse con los servidores a través del protocolo HTTP. Esto se puede lograr fácilmente usando Fetch o Axios. Fetch y Axios son muy similares en funcionalidad. Algunos desarrolladores prefieren Axios a las API integradas por su facilidad de uso. Fetch API es perfectamente capaz de reproducir las funciones clave de Axios.
Fetch: la API Fetch proporciona un método fetch() definido en el objeto de la ventana. También proporciona una interfaz de JavaScript para acceder y manipular partes de la canalización HTTP (requests y respuestas). El método de obtención tiene un argumento obligatorio: la URL del recurso que se va a obtener. Este método devuelve una Promesa que se puede usar para recuperar la respuesta de la solicitud.
- Programa:
javascript
fetch('path-to-the-resource-to-be-fetched')
.then((response) => {
// Code for handling the response
})
.catch((error) => {
// Code for handling the error
});
Axios: Axios es una biblioteca de Javascript que se utiliza para realizar requests HTTP desde node.js o XMLHttpRequests desde el navegador y es compatible con la API de Promise que es nativa de JS ES6. Se puede usar para interceptar requests y respuestas HTTP y permite la protección del lado del cliente contra XSRF. También tiene la capacidad de cancelar requests.
- Programa:
javascript
axios.get('url')
.then((response) => {
// Code for handling the response
})
.catch((error) => {
// Code for handling the error
})
Diferencias entre Axios y Fetch:
| Axios | Buscar |
|---|---|
| Axios tiene una URL en el objeto de solicitud. | Fetch no tiene URL en el objeto de solicitud. |
| Axios es un paquete independiente de terceros que se puede instalar fácilmente. | Fetch está integrado en la mayoría de los navegadores modernos; no se requiere instalación como tal. |
| Axios disfruta de protección XSRF integrada. | Buscar no lo hace. |
| Axios utiliza la propiedad de datos . | Fetch usa la propiedad del cuerpo . |
| Los datos de Axios contienen el objeto . | El cuerpo de Fetch tiene que ser encordado . |
| La solicitud de Axios está bien cuando el estado es 200 y statusText es ‘OK’ . | La solicitud de recuperación está bien cuando el objeto de respuesta contiene la propiedad ok . |
| Axios realiza transformaciones automáticas de datos JSON . | Fetch es un proceso de dos pasos cuando se manejan datos JSON: primero, para realizar la solicitud real; segundo, llamar al método .json() en la respuesta. |
| Axios permite cancelar la solicitud y solicitar el tiempo de espera . | Buscar no lo hace. |
| Axios tiene la capacidad de interceptar requests HTTP . | Fetch, de forma predeterminada, no proporciona una forma de interceptar requests. |
| Axios tiene soporte incorporado para el progreso de la descarga . | Fetch no admite el progreso de carga. |
| Axios tiene una amplia compatibilidad con navegadores . | Fetch solo es compatible con Chrome 42+, Firefox 39+, Edge 14+ y Safari 10.1+ (esto se conoce como compatibilidad con versiones anteriores). |
Publicación traducida automáticamente
Artículo escrito por verma_anushka y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA