COMPARACIÓN
Compatibilidad con versiones anteriores, monitoreo del progreso de carga y más
En mi artículo anterior, “Información detallada sobre la API Fetch de JavaScript”, discutí los conceptos básicos de Fetch API. Pero vale la pena reconocer que fetch() no es siempre una solución ideally suited y, a veces, existen mejores alternativas para realizar solicitudes HTTP. Aquí describiré por qué Axios es mejor que fetch() en desarrollo. Este es mi artículo número 36 de Medium.
Ha podido recuperar
Fetch() es parte de un método de objeto de ventana de JavaScript dentro de Fetch API. Está integrado, por lo que los usuarios no tienen que instalarlo. Fetch() nos permite obtener datos de la API de forma asíncrona sin instalar bibliotecas adicionales.
El fragmento de código anterior es un easy fetch() obtener solicitud En el fetch() método, hay un argumento obligatorio, que es url. url es una ruta de la que el usuario desearía obtener datos. Después fetch() El método devuelve una promesa que puede resolver el objeto de respuesta o rechazarlo con un error.
Los segundos argumentos de la fetch() El método son opciones y son opcionales. Si el usuario no pasa las opciones, la solicitud siempre se recibe y descarga el contenido de la URL dada. Como mencioné antes, la promesa devuelve el objeto de respuesta y, por eso, los usuarios deben usar otro método para obtener el cuerpo de la respuesta. Existen algunos métodos diferentes que los usuarios pueden usar según el formato del cuerpo.
response.json()response.textual content()response.blob()response.formData()response.arrayBuffer()
El más common es response.json().
Desafortunadamente, el incorporado fetch() la función no está en Node.js, pero hay un polyfill como búsqueda de nodo. Entre node-fetch y el navegador fetch()existen varios conocidos variaciones.
Axios
Axios es una biblioteca de JavaScript para realizar solicitudes HTTP desde Node o XMLHttpRequest o un navegador. Como biblioteca moderna, se basa en la API de Promise. Axios tiene algunas ventajas, como la protección contra ataques de falsificación de solicitudes entre sitios (CSFR). Para poder utilizar la biblioteca de Axios, los usuarios deben instalarla e importarla a su proyecto mediante CDN, npm, Yarn o Bower.
El fragmento de código anterior es un método de obtención y una easy devolución de llamada para una respuesta y un error. Cuando los usuarios están creando un objeto de configuración, pueden definir un montón de propiedades. Los más comunes son url, baseURL, params, auth, headers, responseTypey information.
Como respuesta, Axios devuelve una promesa que se resolverá con el objeto de respuesta o un objeto de error. En el objeto de respuesta, hay los siguientes valores:
information: Cuerpo de respuesta actualstanding: código de estado HTTP de la llamada, como200o404statusText: estado HTTP como mensaje de textoheaders: Lo mismo que en la solicitudconfig: Solicitar configuraciónrequest: objeto XMLHttpRequest (XHR)
Los usuarios necesitan trabajar con dos promesas en fetch(). Los usuarios pueden evitar el modelo estándar y escribir un código más limpio y sucinto en Axios.
Axios utiliza el information propiedad, pero fetch() usa el physique propiedad para tratar los datos. fetch()‘s information está fibroso. En fetch()la URL se pasa como argumento, pero en Axios la URL se establece en el objeto de configuración.
Ha podido recuperar
Utilizando el fetch() método, los usuarios necesitan usar algún tipo de método en los datos de respuesta. Cuando los usuarios envían el cuerpo con la solicitud, los usuarios deben especificar los datos.
En el fragmento de código anterior, con la respuesta, los usuarios deben procesar el response.json() acción. Al tratar con los datos JSON en fetch(), hay un proceso de dos pasos. Los usuarios deben hacer la solicitud actual primero y luego llamar al .json() método en la respuesta.
Axios
En Axios, los usuarios pasan datos en la solicitud u obtienen datos de la respuesta, y los datos se clasifican automáticamente. Por lo tanto, no se requieren otras operaciones.
En el ejemplo anterior, puede ver que solo necesita uno then.
La transformación automática de datos es una buena característica de Axios.
Ha podido recuperar
Cada vez que recibe una respuesta del fetch() método, debe verificar si el estado es un éxito porque incluso si no lo es, obtendrá la respuesta. En el caso de fetch()una promesa no se resolverá si y solo si la solicitud no se completa.
Fetch() no arroja errores de pink. Por lo tanto, siempre debe verificar la response.okay propiedad cuando trabaja con fetch(). Puede extraer este error al verificar una función para que sea más fácil y más reutilizable.
Axios
En Axios, el manejo de errores es bastante fácil porque Axios genera errores de pink. Si habrá una mala respuesta como 404, la promesa será rechazada y devolverá un error. Por lo tanto, debe detectar un error y puede verificar qué tipo de error fue.
Al cargar activos grandes, los indicadores de progreso son muy útiles para los usuarios con una velocidad de Web lenta. En indicadores de progreso previamente implementados. los desarrolladores utilizaron XMLHttpRequest.onprogress como controlador de devolución de llamada.
Ha podido recuperar
Para seguir el progreso de la descarga en fetch()puede utilizar uno de los response.physique propiedades, un ReadableStream objeto. Proporciona datos del cuerpo fragmento por fragmento y le permite contar cuántos datos se consumen en el tiempo.
El ejemplo anterior demuestra el uso de ReadableStream para proporcionar a los usuarios comentarios instantáneos mientras descargan imágenes.
Axios
En Axios, también es posible implementar un indicador de progreso, y es aún más fácil porque existe un módulo listo que se puede instalar e implementar. Se llama Barra de progreso de Axios.
Ha podido recuperar
En fetch()no puedes monitorear el progreso de tus cargas.
Axios
En Axios, puede monitorear el progreso de sus cargas. Esto podría ser un issue decisivo si está desarrollando una aplicación para cargar movies o fotos.
La intercepción puede ser importante para usted cuando necesita verificar o cambiar su solicitud HTTP de la aplicación al servidor o viceversa, por ejemplo, autenticación, registro, and so forth.
Ha podido recuperar
Fetch() no proporciona la intercepción HTTP por defecto. Existe la posibilidad de sobrescribir el fetch() y definir lo que debe suceder durante el envío de la solicitud, pero requerirá más código y puede ser más complicado que usar las funcionalidades de Axios. Puede sobrescribir el international fetch() y defina su propio interceptor, como el siguiente código:
Axios
La interceptación HTTP de Axios es una de las características clave de esta biblioteca; es por eso que no tiene que crear código adicional para usarla.
En el código anterior, el axios.interceptors.request.use() y axios.interceptors.response.use() Los métodos se utilizan para definir el código que se ejecutará antes de enviar una solicitud HTTP.
Ha podido recuperar
Fetch() proporciona la funcionalidad de tiempo de espera de respuesta a través del AbortController interfaz.
En el código anterior, usando el AbortController.AbortController() constructor, necesita crear un AbortController objeto. Él AbortController El objeto le permite abortar la solicitud más tarde. Como mencioné en mi artículo anterior, “Información detallada sobre la API Fetch de JavaScript”, discutimos cómo sign es una propiedad de AbortControllerque es de solo lectura. sign proporciona una forma de comunicarse con una solicitud o abortar la solicitud. Si el servidor no responde en menos de cinco segundos, la operación finaliza llamando controller.abort().
Axios
Al usar la propiedad de tiempo de espera opcional en el objeto de configuración, puede establecer la cantidad de milisegundos antes de que finalice la solicitud.
Una de las razones por las que los desarrolladores de JavaScript eligen Axios en lugar de fetch() es la facilidad de establecer el tiempo de espera.
Ha podido recuperar
Para realizar varias solicitudes simultáneas, puede utilizar la función integrada Promise.all() método. Simplemente pase una serie de fetch() solicitudes a Promise.all() y luego un async función para manejar la respuesta.
Axios
Puede lograr el resultado anterior utilizando el axios.all() método proporcionado por Axios. Pase todas las solicitudes de búsqueda como una matriz al axios.all() método. Asigne las propiedades de la matriz de respuesta a las variables separadas mediante el axios.unfold() función, así:
La compatibilidad con versiones anteriores también se conoce como soporte del navegador.
Ha podido recuperar
Fetch() solo es appropriate con Chrome 42+, Safari 10.1+, Firefox 39+ y Edge 14+. La tabla appropriate completa está disponible en “Puedo usar?” Para implementar características similares a fetch() en navegadores internet que no son compatibles Fetch()puedes usar fetch() con un polyfill como home windows.fetch ().
Para usar fetch polyfill, instálelo a través de este comando npm:
npm set up whatwg-fetch --save
Si necesita acceder a la implementación de polyfill por algún motivo, está disponible a través de exportaciones:
Tenga en cuenta que es posible que también necesite un polyfill de promesa en algunos navegadores antiguos.
Axios
Axios no es como fetch(). Axios proporciona una amplia compatibilidad con navegadores. Incluso los navegadores más antiguos como IE11 pueden ejecutar Axios sin problemas. La tabla de compatibilidad completa está disponible a través de Axios’s documentación.
Para la mayoría de sus necesidades de comunicación HTTP, Axios proporciona una API fácil de usar en un paquete compacto.
Hay algunas bibliotecas alternativas para la comunicación HTTP, como Kentuckyun pequeño y elegante cliente HTTP basado en window.fetch; superagenteuna biblioteca de solicitud HTTP pequeña y progresiva del lado del cliente basada en XMLHttpRequest.
Pero Axios es una mejor solución para aplicaciones con muchas solicitudes HTTP y para aquellas que necesitan un buen manejo de errores o intercepciones HTTP.
En el caso de proyectos pequeños con solo unas pocas llamadas API simples, fetch() puede ser una buena solución.
