Peticiones HTTP en JS Vainilla

Peticiones HTTP y HTTPS a servidores Web

XHR

XMLHttpRequest es un objeto JavaScript que fue diseñado por Microsoft (1999) y adoptado por Mozilla, Apple y Google. Actualmente es un estándar de la W3C. Proporciona una forma fácil de obtener información de una URL sin tener que recargar la página completa. Una página web puede actualizar sólo una parte de la página sin interrumpir lo que el usuario está haciendo. XMLHttpRequest es ampliamente usado en la programación AJAX.

A pesar de su nombre, XMLHttpRequest puede ser usado para recibir cualquier tipo de dato, no solo XML, y admite otros formatos además de HTTP (incluyendo file y ftp). MDN

GET

// Definimos la URL de la petición
var urlRequest = "https://api.github.com/users/cristofer-dev/repos"

// Creamos una instancia del objeto XMLHttpRequest
var xhr = new XMLHttpRequest()

// Inicializamos pa peticion indicando metodo y url
xhr.open("GET", urlRequest)

// Un EventHandler que es invocado cada vez que cambia el atributo readyState del xhr
xhr.onreadystatechange = function(dump) {
  // Evaluamos el estado de la petición, cuando sea === 4 (complete)
  if (xhr.readyState === 4) {
    // Validando que recibamos un responseText
    if (this.responseText !== "") {
      // Convirtiendo el JSON a Objeto
      var res = JSON.parse(this.responseText)
      console.log(res)
    }
  } // if state == 4
} //onreadystatechange

// Enviamos la petición
xhr.send()

También podemos validar el status retornado por el servidor, bastara con poner después de la validación del readyState lo siguiente:

if (xhr.readyState === 4) {
  if (xhr.status === 200) {
    // Instrucciones
  }
}

FETCH

Fetch proporciona una alternativa mejor (y mas reciente que xhr) que puede ser empleada fácilmente por otras tecnologías como Service Workers y Fetch también aporta un único lugar lógico en el que definir otros conceptos relacionados con HTTP como CORS y extensiones para HTTP. MDN

GET

Hacer un get simple y sin parámetros extras es tan sencillo como:

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Como una petición a un servicio externo es asíncrona, es recomendable encapsular la petición en una función reutilizable y manejar internamente la sincronía.

exports.get = async ({path, params}) => {
  const url = new URL(`${host}${path}`);
  const options = {
    method: "GET",
    headers: 'Content-Type': 'application/json',
  };

  const response = await fetch(url, options)
    .then((data) => data)
    .catch((error) => {
      console.error("Error al intentar ejecutar llamado GET", error);
      return error;
    });
  return response;
};

Así obtenemos un método reutilizable

const request = await api.get(path);