5.1 Fetch API
Para realizar solicitudes HTTP en JavaScript, a menudo se utilizan dos bibliotecas: la función incorporada fetch y la biblioteca externa Axios. Ambas ofrecen potentes y flexibles capacidades para interactuar con API y otros recursos web.
Fetch API — es una forma incorporada en el navegador para realizar solicitudes HTTP. Se basa en promesas y ofrece un enfoque moderno y flexible para trabajar con solicitudes de red.
Sintaxis de una solicitud fetch simple:
let promise = fetch(url, {method, headers,
body})
Conceptos básicos de Fetch:
fetch(url, options): método principal para realizar solicitudes HTTP- Devuelve una promesa que se resuelve en un objeto Response
Ejemplo de una solicitud GET simple usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
if (!response.ok) {
throw new Error('Error de red: respuesta incorrecta del servidor');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error al realizar la solicitud: ', error);
});
Ejemplo de una solicitud POST usando Fetch:
fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1
})
})
.then(response => response.json())
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error al realizar la solicitud: ', error);
});
Configuración de Fetch
Fetch API permite configurar varios parámetros de solicitud a través del objeto options, tales como método, cabeceras, cuerpo de la solicitud y otros.
const options = {
method: 'GET', // o 'POST', 'PUT', 'DELETE', etc.
headers: {
'Content-Type': 'application/json'
},
// body: JSON.stringify(data) // se usa para solicitudes POST y PUT
};
fetch('https://jsonplaceholder.typicode.com/posts/1', options)
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error al realizar la solicitud: ', error));
5.2 Biblioteca Axios
Axios — es una biblioteca popular para realizar solicitudes HTTP en JavaScript. Proporciona una API más conveniente y funcional en comparación con el nativo Fetch API, y también admite muchas características adicionales, como conversión automática de JSON, manejo de tiempos de espera, cancelación de solicitudes y soporte para navegadores antiguos.
Instalación de Axios
Axios se puede instalar a través de npm o conectarse a través de CDN.
Instalación a través de npm:
npm install axios
Integración en Node.js o al usar empaquetadores de módulos (por ejemplo, Webpack):
// Para CommonJS
const axios = require('axios');
// Para módulos ES6
import axios from 'axios';
Conexión a través de CDN en el navegador:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Sintaxis de una solicitud GET simple:
let promise = axios.get(url)
Sintaxis de una solicitud POST simple:
let promise = axios.post(url, data, config)
Conceptos básicos de Axios:
- axios(config): método principal para realizar solicitudes HTTP
- Acepta un objeto de configuración, que puede incluir
url,method,headers,datay otros parámetros. - Métodos shorthand: Axios proporciona métodos para cada método HTTP (
axios.get,axios.post,axios.put,axios.delete, etc.), lo que simplifica la realización de las solicitudes correspondientes. - Promesas: todos los métodos de Axios devuelven una Promesa (promise), que se resuelve en un objeto de respuesta o se rechaza en caso de error.
Sintaxis de una solicitud GET simple con manejo de respuesta y errores:
axios.get(url)
.then(response => {
// Manejo de respuesta exitosa
})
.catch(error => {
// Manejo de error
});
Sintaxis de una solicitud POST simple con manejo de respuesta y errores:
axios.post(url, data, config)
.then(response => {
// Manejo de respuesta exitosa
})
.catch(error => {
// Manejo de error
});
Ejemplo de una solicitud GET simple usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error al realizar la solicitud: ', error);
});
Ejemplo de una solicitud POST usando Axios:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'foo',
body: 'bar',
userId: 1
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error al realizar la solicitud: ', error);
});
5.3 Configuración de Axios
Configuración de Axios
Axios permite configurar las solicitudes HTTP mediante un objeto config, que incluye parámetros como url, method, headers y datos (data). A continuación se muestra un ejemplo básico de configuración de consulta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
const config = {
method: 'get', // puede ser 'get', 'post', 'put', 'delete', etc.
url: 'https://jsonplaceholder.typicode.com/posts/1',
headers: {
'Content-Type': 'application/json' // Cabecera para indicar el tipo de datos
},
// data: JSON.stringify(data) // Se utiliza para solicitudes POST y PUT para enviar el cuerpo de la solicitud
};
axios(config)
.then(response => console.log(response.data))
.catch(error => console.error('Error al realizar la solicitud: ', error));
Características adicionales de Axios:
- Parámetros de consulta: se pueden pasar parámetros de consulta en la URL.
- Cancelación de solicitudes: usando
AbortController. - Tiempos de espera: configuración del tiempo de espera para la solicitud.
Ejemplo de uso de parámetros de consulta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1 // Los parámetros de consulta se pasan a través del objeto params
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error al realizar la solicitud: ', error);
});
5.4 Comparación entre Fetch y Axios
Ahora consideremos Fetch y Axios en comparación por factores clave:
1. Facilidad de uso:
- Fetch: fácil de usar para operaciones básicas, pero requiere procesamiento adicional para escenarios complejos (por ejemplo, conversión de JSON, manejo de tiempos de espera).
- Axios: ofrece una API más conveniente y poderosa para realizar solicitudes complejas.
2. Soporte para JSON:
- Fetch: requiere llamada explícita a
response.json()para convertir el cuerpo de la respuesta en JSON. - Axios: convierte automáticamente las respuestas JSON.
3. Tiempos de espera:
- Fetch: no tiene soporte incorporado para tiempos de espera. Para implementar un tiempo de espera, se requiere el uso de
AbortControllero envoltorios. - Axios: soporta la configuración de tiempos de espera a través de la configuración.
4. Interceptores:
- Fetch: no soporta interceptores de solicitudes y respuestas.
- Axios: permite usar interceptores para ejecutar lógica antes y después de enviar la solicitud.
Ejemplo con interceptores en Axios
Interceptors (interceptores) permiten realizar acciones específicas antes de enviar una solicitud o después de recibir una respuesta:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
// Añadiendo un interceptor para solicitudes
axios.interceptors.request.use(config => {
console.log('Solicitud enviada al servidor: ', new Date());
return config;
}, error => {
return Promise.reject(error);
});
// Añadiendo un interceptor para respuestas
axios.interceptors.response.use(response => {
console.log('Respuesta recibida del servidor: ', new Date());
return response;
}, error => {
return Promise.reject(error);
});
// Ejemplo de solicitud con interceptores
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(response => console.log(response.data))
.catch(error => console.error('Error al realizar la solicitud: ', error));
Solicitudes paralelas usando Axios
Con Axios, es fácil realizar solicitudes paralelas y manejar los resultados con Promise.all():
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Promise.all([
axios.get('https://jsonplaceholder.typicode.com/todos/1'),
axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(responses => {
responses.forEach(response => {
console.log(response.data);
});
})
.catch(error => console.error('Error al realizar la solicitud: ', error));
GO TO FULL VERSION