¿Qué son las peticiones HTTP?

Las peticiones HTTP son solicitudes que un cliente envía a un servidor para obtener recursos como archivos HTML, imágenes o datos JSON. En JavaScript, existen dos principales métodos para realizar estas solicitudes: XMLHttpRequest y la fetch API.

XMLHttpRequest

XMLHttpRequest ha sido la herramienta tradicional para realizar peticiones HTTP en JavaScript. Es compatible con todos los navegadores y proporciona una forma flexible de interactuar con servidores remotos.

Ejemplo de código:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error('Error:', xhr.statusText);
  }
};
xhr.onerror = function() {
  console.error('Error de red');
};
xhr.send();

Fetch API

La fetch API es una interfaz moderna para realizar solicitudes HTTP, que ofrece una sintaxis más limpia y promesas para un código más claro y conciso.

Ejemplo de código:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Error de red: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Manejo de respuestas

Al realizar una solicitud HTTP, es crucial manejar adecuadamente la respuesta del servidor. Esto implica verificar el estado de la respuesta (código de estado HTTP), procesar los datos devueltos y manejar cualquier error que pueda surgir durante el proceso.

• Verificar el estado de la respuesta: Antes de procesar los datos recibidos, es importante verificar el estado de la respuesta HTTP. Esto se logra revisando el código de estado HTTP, que indica si la solicitud fue exitosa, si se produjo un error o si se necesita alguna acción adicional.
• Procesar los datos devueltos: Una vez que se confirma que la respuesta es exitosa (generalmente con un código de estado en el rango 200-299), es hora de procesar los datos devueltos por el servidor. Esto puede implicar convertir los datos en el formato adecuado (como JSON), realizar operaciones en los datos o mostrarlos en la interfaz de usuario.
• Manejar errores: Es importante anticipar y manejar posibles errores que puedan surgir durante el proceso de solicitud. Esto puede incluir errores de red, errores del servidor (códigos de estado HTTP en el rango 500-599) o errores en el cliente. Para manejar estos errores de manera efectiva, puedes utilizar bloques 'catch' en las promesas o el evento 'onerror' en XMLHttpRequest para capturar y manejar cualquier excepción o error que ocurra durante la solicitud.
• Mostrar retroalimentación al usuario: En aplicaciones web interactivas, es útil proporcionar retroalimentación al usuario sobre el estado de la solicitud. Esto puede ser en forma de mensajes de éxito para solicitudes exitosas, mensajes de error para solicitudes fallidas o indicadores de carga para solicitudes en progreso. Proporcionar una retroalimentación clara ayuda a mejorar la experiencia del usuario y a mantenerlos informados sobre lo que está sucediendo en la aplicación.

Optimización del rendimiento

Optimizar el rendimiento de nuestras solicitudes HTTP es fundamental para garantizar una experiencia de usuario fluida. Algunas técnicas incluyen el uso de cachés, compresión de datos y la minimización de solicitudes redundantes.