Peticiones a APIs usando Callbacks

Aclaraciòn de varias cosas que quizás no entiendas si estas empezando:

1. XMLHttpRequest es la forma antigua de hacer llamados, como el profesor lo menciona usa ese y no Fetch que es el actual, por que no conocemos aùn las promesas y fecth es con promesas, para saber por que el profesor uso OPEN y todas esas funciones aqui està la forma de usar XMLHttpRequest : https://developer.mozilla.org/es/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest.

2. " new Error " que el profesor crea, es una nueva instancia de la clase Error que tiene Javascript, son clases ya implicitas que tiene javascript en este caso es para monstrar bien un mensaje de error podemos usarla, màs informaciòn aqui : https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Error.

3. Para los que son fron-end y están aprendiendo de Back, el profesor uso GET por que hace parte de los método http, en este caso necesitamos pedir información a las url ,màs información: https://developer.mozilla.org/es/docs/Web/HTTP/Methods

4. Por ultimo recomiendo una escucha atenta a lo que dice el profesor por que el explica el por que de cada cosa que hace y si no la conoces recomiendo buscarlas en Internet y asì avanzas en el curso.

Saludos espero les sirva

Aquí les dejo mis apuntes espero les sirva :

// Implementación de una API con XMLHttpRquest

// Instanciando el request.
//Permite hacer peticiones a algun servidor en la nube
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback){
    //referencia al objeto XMLHttpRequest
    let xhttp = new XMLHttpRequest();
    /* 
    A nuestra referencia xhttp le pasamos un LLAMADO 'open'
    donde: parametro1 = el metodo, parametro2 = la url,
    parametro3 = verificación si es asincrono o no, valor por defecto true
    */
    xhttp.open('GET', url_api, true);
    //Cuando el estado del objeto cambia, ejecutar la función:
    xhttp.onreadystatechange = function (event){
        /*
        los estados que puede tener son:
        estado 0: inicializado
        estado 1: cargando
        estado 2: ya se cargó
        estado 3: ya hay información
        estado 4: solicitud completa
        PD: recuerda estas trabajando con una API externa osea un servidor por lo que
        depende del servidor cuanto demore en cada estado haces un pedido por datos
        (request) y solo es aplicar lógica.
        */
        if(xhttp.readyState === 4){
            //Verificar estado, aqui un resumen de los casos mas comunes:
            /*
            ESTADO 1xx (100 - 199): Indica que la petición esta siendo procesada.
            ESTADO 2xx (200 - 299): Indica que la petición fue recibida, aceptada y procesada correctamente.
            ESTADO 3xx (300 - 399): Indica que hay que tomar acciones adicionales para completar la solicitud. Por lo general indican redireccionamiento.
            ESTADO 4xx (400 - 499): Errores del lado del cliente. Indica se hizo mal la solicitud de datos.
            ESTADO 5xx (500 - 599): Errores del Servidor. Indica que fallo totalmente la ejecución.
            */
            if(xhttp.status === 200){
                //Estandar de node con callbacks, primer parametro error, segundo el resultado
                callback(null, JSON.parse(xhttp.responseText))
            } else {
                const error = new Error('Error ' + url_api);
                return callback(error, null)
            }
        }
    }
    //Envio de la solicitud.
    xhttp.send();
}

Para ver mejor los datos de la API también se podría utilizar esta extensión para el navegador ➡️JSON Viewer

Los estados de un request de acuerdo a la documentacion:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

Para probar y consultar API sin utilizar postman puede usar una extension en VScode que se llama REST Client REST Client, con esta puedes consumir y enviar parametros a la api desde el editor de codigo

dia 5 viendo el mismo video…sigo volando .-.

Uff gracias a Dios existe fetch y Axio…

Les paso mis apuntes por si les es de utilidad

// instanciamos el XML Sx: require('nombre_consola').nombre_archivo;
// guardo en la variable el valor del archivo XMLHttpRequest
let request = require("xmlhttprequest").XMLHttpRequest;

// API, guardamos la api en una variable 
const API = 'https://rickandmortyapi.com/api/character/';

// funcion que nos permite traer la informacion desde nuestra API, recibe un callback y desencadena los llamados que necesitamos.
function fetchData(url_api, callback) {
    // construimos la peticion por xmlhttprequest generando la referencia al objeto que necesito
    let datos = new request();
    // hacemos el llamado a una url 
    datos.open('GET', url_api, true); /* el true activa el asincronismo  */
    // escucho lo que hace la conexion 
    datos.onreadystatechange = function (e) {
        // validamos para saber si fue exitoso todo
        if (datos.readyState === 4) {
            // saber el status 
            if (datos.status === 200) {
                // regresamos el callback si todo sale bien, responseText me lo convierte de object a string
                callback(null, JSON.parse(datos.responseText));
            } else { /* si las cosas no salen bien le pasamos la url y el estado */
                const error = new Error('Error' + url_api + ' paso esto: ' + datos.status);
                // al final retornamos el callback con un msj de error y un null ya que no se desencadena nada 
                return callback(error, null);
            }
        }
    }
    // enviamos la solicitud con send().
    datos.send();
}

El profe Oscar explica excelente

Para los que no entendieron Nada o muy poco como yo, les recomiendo seguir poco a poco. eventualmente las cosas tendrán sentido si no ahora en un futuro. ya me ha pasado

Como recomendación, en el error también agrego el status que regresa para saber que esta pasando

const error = new Error('Error ' + url_api + ' status: ' + xhttp.status) ;

Para instalar xmlHttpRequest como dependencia de desarrollo

npm install xmlhttprequest --save-dev

• Creamos una instancia con el objeto XMLHttpRequest que incluye diversos metodos y atributos que nos permiten manejar la solicitud.

  • con el método object.open() inicializamos el pedido. Recibe los parametros (method, url, async, user, password).

  • object.onreadystatechange define una funcion que se ejecutará cada vez que el atributo readyState cambie.

    • los valores de readyState pueden ser los siguientes:

      • 0: request no inicializado,
      • 1: conexion con el servidor establecida,
      • 2: solicitud recibida,
      • 3: solicituid siendo procesada,
      • 4: solicitud finalizada y respuesta lista.

    • Los atributos status y statusText llevan el stado de el objeto XMLHttpRequest.

      • 200: “OK”
      • 403: “Forbidden”
      • 404: “Page not found”

      Estos son los códigos más comunes.

  • El atributo responseText lleva la respuesta en al pedido como texto, en el caso de nuestra solicitud a la API debemos convertirla a un documento JSON para poder acceder a sus elementos usando `JSON.parse(object.responseText).

  • El método object.send() envia la solicitud.

En esta clase, estoy pensando seriamente en cambiar de profesion jajaja :v

Después de esta clase tan nutritiva, date un descanso conociendo los status HTTP con memes de gatos 🐱‍💻
Link: https://http.cat/

No entendi ni papa

/* Instanciamos la dependencia con require() */
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback) {
  let xhttp = new XMLHttpRequest(); // Referencia del objeto que necesitamos.
  /* Hacemos un llamado a una url */
  xhttp.open('GET', url_api, true) // El último parámetro hace referencia al asincronismo. Por defecto es true, pero lo ponemos para referencia.
  /* 'Escuchamos' lo que hará la conexión (Referente a los 5 estados que comenta el profesor) */
  xhttp.onreadystatechange = event => {
    if (xhttp.readyState === 4) { // Validar si la petición se completó. (Estado 5 pero contamos desde 0 como en un array)
      if (xhttp.status === 200) { // Validar el estado en el que se encuentra la petición. (200 = todo bien, 400 = no encontró algo, 500 = error en el servidor)
        /* Regresar el callback (primer valor que pasamos es el error y el segundo es el resultado del llamado a la API) */
        callback(null, JSON.parse(xhttp.responseText)) // Como el resultado viene en formato de texto de JSON, lo tenemos que convertir a un objeto para trabajar con él
      } else {
        /* Definimos y retornamos un error en caso de obtenerlo (buena práctica) */
        const error = new Error('Error ' + url_api)
        return callback(error, null)
      }
    }
  }
  xhttp.send(); // Enviamos la petición.
}

Denso pero si se pudo entender, aqui les dejo mis anotaciones por si se perdieron en algun punto:

const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback) {
  let xhttp = new XMLHttpRequest();

  // Hacer un llamado a la URL
  //         Metodo   URL   Async
  xhttp.open('GET', url_api, true);
  // Escuchamos los cambios de la conexion
  xhttp.onreadystatechange = event => {  // hay 5 estados
    if (xhttp.readyState === 4) {  // validamos si la conexion a sido exitosa
      if (xhttp.status === 200) {  // validamos si nuestra peticion fue aceptada http 200
        callback(null, JSON.parse(xhttp.responseText)); // En los callback, el primet parametro se pasa el
      } else {                                          // error y en el segundo la respuesta
        const error = new Error('Error' + url_api);
        callback(error, null)
      }
    }
  }
  xhttp.send();  //Enviamos la solicitud

Aquí les dejo mis apuntes con algunos otros links de conceptos que desconocía espero les sirvan.

// Reto:
// 1.-crear una funcion que nos permitira traer info desde la api
// 2.-Le pasaremos un callback
// 3.- hacer el llamado de los que necesitamos


//Instanciamos la funcionalidad XMLhttprequest para poder usarla en el proyecto
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;


// Aqui vemos como utlizar XMLHttpRequest, la vieja escuela
function fetchData(url_api, callback) {     //creacion de la funcion pasandole como parametros url_api y un callback
    let xhttp = new XMLHttpRequest();       //generar la referecia al objeto que necesito 
    xhttp.open('GET', url_api, true);       //abrir una url o un llamado a una url usando.open(http request method to use, url_api, indicar si se hace de forma asincrona la funcion)
    xhttp.onreadystatechange = function (event) {     //escuchar lo que hace la conexion con la url si sucede algun cambio y se usa una funcion para saber este dato
        if(xhttp.readyState === 4) {        //se hace la validacion para saber si el resultado en el que se encuentra tu peticion es satisfactoria. Saber si se completo la peticion
            if(xhttp.status === 200) {      //Saber el estatus en la que se encuentra la peticion, si bien se completó la peticion, queremos saber si es correcta en el sentido de si encontro el servidor. Necesitamos un 200
                callback(null, JSON.parse(xhttp.responseText)); //primer valor del callback dentro de node es el error (se deja error en null), luego el resultado del llamado a la Api. Parsear el JSON 
            } else {        //mandar a llamar a error cuando no suceda todo correctamente
                const error = new Error('Error' + url_api) //creacion de la constate error la cual genera un objeto error que contiene un string Error y la url de la api
                return callback(error, null)        //retornar el collback ahora si pasando el objeto error antes creado para que me lo muestre.
            }
        }
    }
    xhttp.send(); //mandar la solicitud con .send()
}

// Links y referecias
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/onreadystatechange
// https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState
// https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/JSON/parse

maestro creo que no es nesesario tocar nodejs packetes npm , para poder explicar que es async ,callbacks, y promesas…por todo esto lo ase confuso , y se pierde la claridad para poder aprender

Código con comentarios. 😃

Con ES6 podemos hacer peticiones mas sencillas como

// Basic blueprint
fecth(url)
  .then(response.something) // Define response type (JSON, Headers, Status codes)
  .then(data) // get the response type 

// Practical example
fetch('https://jsonplaceholder.typicode.com/todos')
  .then(response => response.json())
  .then(data => console.log(JSON.stringify(data)))

En muchos lados escucho hablar de JSON y tenia una vaga idea de que es, pero mejor me puse al día, aquí se los dejo para quienes estén en la misma situación que yo.

JSON (JavaScript Object Notation)

Es un formato de texto, es ligero, sencillo de leer, sencillo de escribir y ideal para intercambio de datos (por ejemplo con una API), utiliza convenciones. Esté es independiente del lenguaje.

Tal vez sea algo muy simple pero me queda la duda, ¿Que es una API y para que sirve en el desarrollo?

Totalmente confusa esta clase.
Se explican temas que poseen una profundidad mucho mayor a la linea de cursos que se han venido tomando (teniendo en cuenta la ruta de la escuela de JavaScript).
Quedo absolutamente perdido con esta clase

sinceramente no entendí una goma

Al inicio al instalar la dependencia dices de “desarrollo” pero sólo fue instalada con “-S” no con “-D”. 😃

¿Qué curso se puede hacer para conocer desde las bases lo que el profe hizo hoy? Vengo siguiendo la ruta de la Escuela de JS, y esto que estamos viendo hoy apenas lo mencionaron superficialmente en el curso de Fundamentos de JS.

Gracias.

Solo una pregunta con respecto al uso de los callback por que no llamar directamente a la funcion sin pasarla como parametro?,
cual es la ventaja extra que ofrecen?
asi:

const value = () => { return 10; }

// Sin callback
const withOutCallback = () => {
	let x = 2;
	return x + value();
}

// Con callback
const withCallback = (callback) => {
	let x = 2;
	return x + callback();
}

withOutCallback();
withCallback (value);

Extenso en comentarios pero entendible para que no se olvide nunca

// Requerir desde node
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

//crear una funcion para traer la informacion desde la api 
functionfetchData(url_api,callback){
  // Se instancia el objeto a una variable
  let xhtpp = new XMLHttpRequest()

  /*Tipo Petición a enviar (metodo, url y valor true para asegurar asincronismo
    true: las notificaciones de cambios y final de petición serán manejadas por listener de eventos
    false: metodo send() solo retornara respuesta al final de la petición */
  xhtpp.open('GET',url_api,true)

  // Escuchar el cambio de acciones durante el envio de petición
  xhtpp.onreadystatechange = function (event){
    //validar state finalizado 4 y status 200 para ejecución de acciones
    if(xhtpp.readyState === 4 && xhtpp.status === 200){
      //ejecutar callback para parsear string resultante a json
        callback(null, JSON.parse(xhtpp.responseText))
    } 
    else {
   //Si no se cumplen las condiciones del if entonces retornará error callback
        const error = newError('Error' + url_api)
        return callback(error, null)
      }
    }
  }
  //Se ejecuta llamado de petición
  xhtpp.send()

Ojo para los que se les hace un poco complejo aqui hay un complemento muy bueno con ejercicios acerca de ajax que es la tecnologia que se esta usando en este tutorial, ahi tocan con mas calma muchos temas de ajax, que siempre es bueno saber ajaxya

hay una extensión en Google que permite ver el JSON desde la misma web se llama JSON Viewer

As of npm 5.0.0, installed modules are added as a dependency by default, so the --save option is no longer needed.

Hola amigos, hice un tutorial explicando todo el proceso de este pequeño proyecto del curso, para que puedas comprender mejor los callbacks

Resumen de la clase:
XMLHttpRequest es un objeto de JS que permite hacer peticiones hacia servicios en la nube(URLs o APIs).

Existen 5 estados en un llamado XMLHttpRequest:

• 0 Se ha inicializado
• 1 Loading
• 2 Se ha cargado
• 3 Procesamiento si existe alguna descarga
• 4 Completado

También es necesario conocer el Status de los llamados, se destacan:

• 200 Correcto
• 400 No se encontró algo
• 500 Algo falló

Por que en este curso se utiliza npm? Se que npm es un administrador de paquetes de node. No entiendo para que nos sirve en lo que estamos haciendo? Sirve para traer los paquetes de XMLHTTPRequest?

Métodos y propiedades vistos en la clase:

• xmlhttp.open() Prepara la petición para ser enviada tomando tres parámetros: prótocolo, url, asíncrono.

• xmlhttp.readyState Retorna el estado de la petición.

• xmlhttp.onreadystatechange Un eventHandler que es llamado cuando la propiedad readyState cambia.

• xmlhttp.status Retorna el estado de la respuesta de la petición. (200,400)

• **xmlhttp.send() **Envía la petición.

• Otra forma de conseguir la respuesta en Json es usar la propiedad responseType = ‘json’

 xmlhttp.open('GET', url, true);
    xmlhttp.responseType = 'json'
    xmlhttp.onreadystatechange = function (event) {
        if (xmlhttp.readyState === 4) {
            if (xmlhttp.status === 200) {
                callback(null,xmlhttp.responseText);
            }

https://http.cat/ sirve para entender el estado de las respuestas http con imagenes de gatos

Si desean observar lo datos de una petición GET ordenados directamente en Chrome para no tener que instalar Postman, les recomiendo esta extensión para el navegador llamada JSON Viewer

// importamos el modulo xmlhttprequest
const XMLHTTPRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback) {
  const xhttp = new XMLHTTPRequest();

  //abrimos una conexion al api
  xhttp.open('GET', url_api, true);
  // escuhamos los cambios de la conexion
  xhttp.onreadystatechange = function(event) {
    // validamos la conexicon exitosa
    if (xhttp.readyState === 4) {
      // validamos el estado http 200
      if (xhttp.status === 200) {
        // convertimos la respuesta a json e iniciamos el callback que hara uso de la info
        callback(null, JSON.parse(xhttp.responseText));
      } else {
        // Enviamos el error que en caso de haber problemas
        const error = new Error('Error' + url_api);
        return callback(error, null);
      }
    }
  };
  // enviamos la solicitud
  xhttp.send();
}```

Hola, aquí les dejo una forma divertida de estudiar los códigos de estado HTTP: CON GATOS 😄

https://http.cat/

Hay un curso básico previo a este? Siento que me salte algo y no entiendo muchas cosas que dice el profesor. Gracias

el asincronismo de por si es complicado y el profesor realmente no explica bien el porqué de cada cosa, simplemente se avanza asumiendo que tenemos conocimiento que venimos a aprender, estaría bueno un remake de este curso.
espero no lo tomen a mal 😃

La nueva forma de hacer peticiones a una API es el “fetch.”
“fetch” sirve para traer informacion, y hace “por debajo” el resolve y el reject.

Nota: Usar XMLHttpRequest de forma síncrona es una mala práctica según la documentación.

Por esto, viene por defecto el valor “true” en asincronía 😄

Firefox developer viene con esa version mas amigable para visualizar las API

https://www.mozilla.org/en-US/firefox/developer/

Para los que no entendimos que hace el .open
El método XMLHttpRequest open () inicializa una solicitud recién creada o reinicializa una existente.

Resumen de status para tenerlos presente
status 200: "OK"
403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference

readyState= conoce el estado del XmlHttprequest
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status
200: "OK"
403: "Forbidden"
404: “Page not found”

No sería mejor usar una librería un tanto más compacta, como axios, para simplificar un poco el proceso, algo así:

// npm i axios
const axios = require('axios');


let res = axios.get('https://rickandmortyapi.com/api/character/');

// todos los personajes en un array
let resultado = res.data;

//instanciar
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

//crear una funcion para traer la informacion desde la api 
function fetchData(url_api,callback){
  //Peticion por medio XMLHttpRequest
  let xhtpp = new XMLHttpRequest()
  //llamdo a url
  xhtpp.open('GET',url_api,true)
  // Generar o escuchar lo que va hacer la accion 
  xhtpp.onreadystatechange = function (event){
    //hacer una validacion 
    if(xhtpp.readyState === 4){
      //ejecutar una siguiente llamada para saber el status que se encuentra
      if(xhtpp.status === 200){
        callback(null, JSON.parse(xhtpp.responseText))
      } else {
        const error = new Error('Error' + url_api)
        return callback(error, null)
      }
    }
  }
  //se envia la funcion
  xhtpp.send()
}```

Hay que documentarce mas en “xmlhttprequest” para tener claridad del tema.

npm i xmlhttprequest --save

como alternativa de Postman les recomiendo** Insomnia**. Por aquí les dejo el link para que le cacharreen: https://insomnia.rest/

Para los que utilicen ubuntu

• sudo snap install postman
  😃 🌈 ✨

Aquí se explica de manera rápida sobre callbacks

Si es la primer vez que vez este curso y no estás entendiendo, te recomiendo que a la par que avances en este curso veas este otro en Youtube
https://www.youtube.com/watch?v=xOinGb2MZSk&t=26753s&ab_channel=SoyDalto
A partir del minuto 4:52:30 hasta que termina muestra los mismos temas pero con otra explicación, te van a servir para complementar lo que se está viendo aquí, te puedes guiar explorando los capítulos en Youtube, yo así lo hice y me facilito mucho el aprendizaje.

no entiendo nada, porque usa tantas cosas que no hemos visto en cursos pasados de la escuela de desarrolo web??

Muy mala clase, desde el comienzo que arrancó utilizando Postman sin explicar como llegó hasta ahí con todo lo que siguió hasta el final

Amo como estas clases desafían la relatividad del espacio-tiempo porque este video de 13 minutos me duro como 2hs

Sinceridad, no entendí nada, me toca repasar en Youtube

Esta clase deberá ser vista muchas veces, completamente confusa

XMLHttpRequest readyState status

• 0: Solicitud no inicializada
• 1: Conexión del servidor establecida
• 2: Solicitud recibida
• 3: Procesando solicitud
• 4: Solicitud terminada y respuesta lista

Busquen por aparte de esto o no lo van a entender por que este video explica como se hace pero no el por qué de las cosas.

XMLHttpRequest es un objeto como cualquier objeto de javascript y como tal tiene metodos y propiedades a los cuales accedemos.

var myObject = { property1: “chocolate”, property2: “cake”, property3: “brownies” }

Cada método y parámetro que le pase es para un acción diferente al usar un llamado API que prácticamente es traer información que alguien más tiene en una computadora(servidor) y que necesitas.

Es por eso que él usa let http = new XMLHttpRequest(); como cuando se crea un nuevo objeto, primero lo crea y luego tiene acceso a sus métodos. **open ** es uno de estos métodos y GET, el url_api, true son parámetros para leer la información y luego la pones en tu página como quieras. Son parámetros como cuando le pasas información a una función. Hay varios métodos y necesitan parámetros diferentes, a veces más, a veces menos.

**readystate **y los otros son valores que representan el estado de conección para el API y por eso usa if() que quiere decir si llega a este estado de conección haga esto.

Los API es información que le pertenece a otros y ellos deciden el formato en el cual pedirla y en que formato regresarla

el curso es bastante enredado, el echo es que debemos saber sobre la documentación de AJAX y saber que XMLHttpRequest es un objeto que ya esta por defecto en JavaScript, y que este posee los métodos para establecer la conexión bien sea con un servidor, API o URL, es un poco enredado, pero si esto no te es suficiente para entenderlo, de seguro con esta serie de videos lograrás entenderlo mejor, créanme estaba en la misma situación ahora lo entiendo mejor!

https://www.youtube.com/playlist?list=PLGfh-NC9-wCelQ4pKL8M90v1YrWkkxkGS

Sinceramente esta clase no entendi nada. Me parece que se incorporan un monton de conceptos que no se venian viendo en clases o cursos anteriores. Estoy siguiendo la ruta de la escuela de JS, y de pronto comienza a utilizar npm para probar codigo… eso distrae bastante del tema porque nunca se habia utilizado. Y me parece que hay ejemplos mas sencillos para entender el concepto de callbacks. Lo mismo me paso con el curso de ECMAScript 6+. No se lo tomen a mal pero desde el curso practico de JS a estos conceptos me parece que hay un abismo.

La verdad que es la primera vez que estoy motivado en los cursos de JS, siempre veo como lo utilizan en Frontend JS y creo que no me gusta esa forma, sin embargo creo que El backend es lo mio, en fin…

Mi aporte

El profe usa el cliente POSTMAN es un standar en la industria, sin embargo postman ya se esta quedando atras.
Descubri para mi mismo un nuevo cliente de manejo de Request HTTPS, Se llama HTTPIE, https://httpie.io/docs.
Es muy bueno y tan sencillo de usar, Si son nuevos invesitguen mucho sobre HTTP REQUEST, es un tema muy interesante y colocan las bases para los que quieran iniciarse en el hacking etico.
https://developer.mozilla.org/es/docs/Web/HTTP/Methods.
https://devdocs.io/http/
Eso es mucha de las cosas que consegui sobre el tema, la verdad si haces la tarea correctamente, te das cuenta que solo son respuestas del lado del servidor y que tu lo unico que tienes que hacer cuando de API se trate es manejar los datos y ver que hacer con ellos. Eso es todo, Espero ayude a alguien ❤️ se les quiere.

Entiendo que te hayas sentido perdido en la clase

Yo no me perdí del todo porque ya tengo nociones, sin embargo si me di cuenta que faltaron muchas cosas. Sería bueno que antes de esta clase explicaran un poco mejor el concepto de AJAX, con eso sería suficiente. En ese concepto está el 90% de lo que vimos hoy. De todas formas les comparto lo siguiente para que entiendan mejor:

Artículo de Ajax: este deja todo claro, sin embargo los estados de las peticiones AJAX son confusos y recomiendo esta página para aclarar lo de los estados.

Página con artículos y vídeos referentes a AJAX, APIs y todo lo relacionado con asincronismos en JavaScript

Hola! Como estan? Vengo del 2021 y Postman actualizo su interfaz grafica. Para llegar a donde esta el profe los pasos a seguir son:

1. iniciar sesion/registrarse en postman.
2. Ir a la parte de Workspace.
3. En workspace en la parte digamos como el “Main” de html, les aparecera un signo + un poco gris, deben tocar ahi, es como una nueva pestana de google, ahi llegaran a donde esta el profe! Exitos! y si no saben cmo llegar, respondan este comentario y estare ahi para responderles!

5. Peticiones a APIs usando Callbacks

Característica del protocolo http

Verbos

Los verbos, los verbos indican acciones, estás acciones están asociadas a peticiones y recursos. En línea general sirve para la manipulación de recursos cliente/servidor. Los códigos de estados, los códigos son valores números que tienen un valor semántico.
estos Verbos http son:

• GET, Sirve para solicitar recurso.
• HEAD, Sirve para solicitar recurso, pero este no retorna información, la estructura de esta petición e igual que get tanto en su headers como estatus. Es útil cuando vamos a utilizar API, para comprobar si lo que vamos a enviar esta correcto y puede ser procesado.
• POST, sirve para la creación de recursos en el servidor. Ejemplo un comentario en un blog.
• PUT, Sirve actualizar por completo un recurso. El modo PUT reemplaza todas las representaciones actuales del recurso de destino con la carga útil de la petición.
• PATCH, Sirve para actualizar parcialmente un recurso.
• DELETE, sirve para eliminar un recurso.

Los códigos de estados del servidor
Otra de las cosas que especifica el protocolo HTTP son el código de estado (status codes). Sirven para describir el estado de la petición hecha al servidor.

• 1xx, Indican que la petición fue recibida por el servidor, pero está siendo procesada por el servidor. es decir, no fue exitosa ni fue errónea, sino que está siendo procesada aun.
• 2xx, Indican que la petición fue recibida, aceptada y procesada correctamente.
• 3xx, Indican que hay que tomar acciones adicionales para completar la solicitud. Por lo general estos códigos indican redirección. En las API no se usan redirecciones porque no contienen estados, es decir, toda la información está contenida en una solicitud, no se guarda un estado en el servidor como una sesión por ejemplo.
• 4xx, Errores del lado del cliente, Indica que se hizo mal una solicitud, faltan datos o datos sobrantes, faltan headers o cualquier otro error que pueda ocurrir. Es decir se está haciendo una solicitud errónea al servidor
• 5xx, Indican errores del servidor. Suelen aparecer cuando existe un fallo en la ejecución en el servidor.

Los códigos más comunes a la hora de interactuar con una API son:

• 200: Toda está correcto.
• 201: Todo está correcto cuando se hizo una solicitud POST, el recurso se creó y se guardó correctamente.
• 204: Indica que la solicitud se completó correctamente pero no devolvió información. Este es común cuando, se hacen peticiones con el verbo DELETE.
• 400: Bad Request, algo está mal en la petición. Se nos olvidó enviar un dato o algo relacionado. Por lo general la respuesta nos especifica cuáles fueron los errores a la hora de hacer la petición.
• 401: Unauthorized, esto significa que antes de hacer una solicitud al servidor nos debemos autenticar.
• 403: Forbidden, no tenemos acceso a ese recurso aunque se esté autenticado.
• 404: Not Found, no existe el recurso que se está intentando acceder.
• 500: Interna Server Error, es un error que retorna el servidor cuando la solicitud no pudo ser procesada. Por lo general, si no tenemos acceso al backend, no tenemos control sobre los errores 500 que retorna un API.

Petición con xhttprequest

Instala la dependencia xhttprequest en modo desarrollador para poder ejecutar peticiones en node, verificamos la instalación. Se verifica que la terminal esté en la carpeta del proyecto

npm install xmlhttprequest --save

let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback) {
	let xhttp = new XMLHttpRequest();

	// Se abre una conexión para realizar una petición con el objeto xhttp
	// usando el método open los parametros son:
	// 1. verbo a utilizar
	// 2. es la url de consulta a la api
	// 3. se indica que el comportamiento será asincrono
	xhttp.open('GET', url_api, true);

	// Se está a la escucha de un cambio, si algo sucede, se
	// ejecuta una función. Esta función recibirá por parámetro
	// un evento (este, no siempre se usará) y el objetivo de esta
	// función es ejecutar el callback
	xhttp.onreadystatechange = function (event) {
		// El primer if se valida el estado de xhttp
		// 0: request not initialized
		// 1: server connection established
		// 2: request received
		// 3: processing request
		// 4: request finished and response is ready

		//El segundo if valida el status code  o respuesta
		// del servidor
		// 200: "OK"
		// 403: "Forbidden"
		// 404: "Page not found"
		if (xhttp.readyState === 4) {
			if (xhttp.status === 200) {
				// El entorno de node tiene un estándar para 
				// los callback el primer parámetro se envía
				// el error, como no hay se coloca null
				// segundo parámetro es el resultado  del
				// llamado de la api. y en este caso se parse a jason
				callback(null, JSON.parse(xhttp.responseText));
			} else {
				// si no es 200, entonces se envia el error y la información
                // como no hay información se coloca null
				const error = new Error('Erro ' + url_api);
				return callback(error, null);
			}
		}
	};
	// se envia la petición
	xhttp.send();
}

Referencia

• xhttprequest

A ver otra vez la clase por que lamentablemente entendi poco T-T jajaja

Con el navegador Firefox Developer edition, puedes ver en formato JSON la data de un API. Sin instalar nada adicional

Creo que a este curso le hace falta algo de profundización.

5. Peticiones a APIs usando Callbacks

Para abrir JSOn en el navegador Chrome podemos usar esta extensión: https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh

Les comparto el código de la clase:

//aquí llamamos al módulo xmlhttprequest que instalamos a través de npm
let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api, callback) {
    let xhttp = new XMLHttpRequest();
    xhttp.open('GET', url_api, true);
    xhttp.onreadystatechange = function (event) {
        if(xhttp.readyState === 4) {
            if(xhttp.status === 200) {
                callback(null, JSON.parse(xhttp.responseText))
            } else {
                const error = new Error('Error ' + url_api);
                return callback(error, null);
            }
        }
    }
    xhttp.send();
}

onreadystatechange
Defines a function to be called when the readyState property changes
readyState

Holds the status of the XMLHttpRequest.
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready

status
200: "OK"
403: "Forbidden"
404: "Page not found"
For a complete list go to the Http Messages Reference

Para hacer consultas de API rapidas sin usar Postman o alguna interfaz gráfica pueden ir a la consola y usar curl y jq así:

$ curl https://rickandmortyapi.com/api/character | jq

Para los que les haga falta más bases o necesiten una explicación bien detallada de XMLHttpRequest que se ve en esta clase les recomiendo leer lo que explica aquí en comentarios @alexagomezh, sus fuentes MDN son buenas, en caso de aún no entender como el mío, les recomiendo esta lista de reproducción https://www.youtube.com/playlist?list=PLGfh-NC9-wCelQ4pKL8M90v1YrWkkxkGS usen la velocidad 1.5 o 1.25 para entender mejor, o lo que les sirva, y repasen, también creo que pueden usar el Curso de API REST que aunque no usa AJAX de esta forma por lo que es solo complementario después de lo anterior, puede ayudar a entender el tema, pero no es necesario, al menos yo aún no lo tomo bien y ya entendí la clase del profesor con la playlist.

A experiencia personal, en el campo laboral hace al menos 6 o 7 años usé esta solución, sin saber su origen, muy interesante aporte.

También existe una extensión para google chrome que se llama JSONView, esto nos permite ver de forma “elegante” y precisa la data del JSON.

Sigo sin entender muy bien las callbacks, ¿Algún recurso interesante que me puedan recomendar?

El código de hoy

let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData (url_api, callback){
    let xhttp = new XMLHttpRequest();
    xhttp.open('GET', url_api, true);
    xhttp.onreadystatechange = function (event) {
        if(xhttp.readyState === 4){
            if(xhttp.status === 200){
                callback(null, JSON.parse(xhttp.responseText));
            } else {
                const error = new Error('Error' + url_api);
                return callback(error, null)
            }
        }
    }
    xhttp.send();
}

En la parte de los status solo tienen que saber que si les devuelve un 100 es que la petición fue recibida pero aún se está procesando. Si les devuelve un 200 es que está todo good. Si les devuelve un 400 es que nosotros como programadores estamos haciendo una petición errónea y si nos devuelve un 500 es porque algo sucedió en el servidor.

let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

function fetchData(url_api, callback) {
    let xhttp = new XMLHttpRequest()
    xhttp.open('GET', url_api, true) //tercer valor activar asincronismo
    xhttp.onreadystatechange = function (event) {
        if (xhttp.readyState === 4) {
            if (xhttp.status === 200) {
                callback(null, JSON.parse(xhttp.responseText))
            } else {
                const error = new Error('Error '+ url_api)
                return callbacke(error,null) // el primer parametro es ERROR
            }
        }
    }
    xhttp.send()

“cuando ta tenemos claro que vamos a hacer, lo que vamos a hacer es hacer eso”

let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;//Permite hacer las perticiones hacia algún servicio en la nube

function fetchData(url_api,callback){ //Permite traer informacion desde api, la cual se le pasara callback para desencadenar llamados que necesitamos
    let xhttp = new XMLHttpRequest(); // creacion de XMLHttpRequest object
    xhttp.open("GET", url_api, true);//Llamado a URL, open especifica tipo de request, para ello se define el metodo en este caso GET, url y async (true =>permite que js ejecute otros scripts mientras espera por respuesta del servidor)
    xhttp.onreadystatechange= (event)=>{ //Si el cambio sucede en readyStage que tiene estados 0,1,2,3,4
        if (xhttp.readyState===4){  // Request listo
            if(xhttp.status==200){ // estado de request 200 es decir Ok
                callback(null,JSON.parse(xhttp.responseText)) // Convierte el Texto (el string que pasa responseText) en objeto Js
            }else { //En caso de error
                const error = new Error ("Error"+ url_api)
                return callback(error,null)
            }
        }
    } //Escuchar lo que hace la conexión
    xhttp.send(); //Se envia la solicitud al servidor
}

let XMLHttpRequest = require ('xmlhttprequest').XMLHttpRequest;

function fetchData (url_api, callback) {
  let xhttp = new XMLHttpRequest(); //se hace el shortcut the la funcion XMLHttpRequest
  xhttp.open('GET', url_api, true); //se utiliza un llamado a una url diciendole la peticion
  xhttp.onreadystatechange = function (event) { //Debemos escuchar la url y se crea el espacio para hacer una validacion para ver si se encuentra
    if (xhttp.readyState === 4) { //se utiliza una validacion para ver si se ha completado
      if (xhttp.status === 200){
        callback(null, JSON.parse(xhttp.responseText)) //con "responseText" se hacel el llamado del parse de JSON
      } else { //Se crea un else para cuando haya errores los podamos visualizar
        const error = new Error('Errpr' + url_api);
        return callback(error,null)
      }
    }
  } 
  xhttp.send(); //Se envia la solicitud
}

/*Vamos a consumir una api https://rickandmortyapi.com/api/character/
el cual nos va a traer los personajes y asi mismo a traves de callback
nos va a traer informacion del planeta del personaje*/

let XMLHttpResquest = require('xmlhttprequest').XMLHttpRequest; //importamos para hacer las peticiones
//todo esto se utilizaba antes del ES6, hoy en dia se utiliza fetch
function fetchData(url_api, callback) {
    let xhttp = new XMLHttpResquest();
    xhttp.open('GET',url_api,true); //Abrimos una conexion... el valor True -> activa el asincronismo
    //el siguiente bloque realiza una validacion que todo este correcto
    xhttp.onreadystatechange = function (event) {
        if (xhttp.readyState === 4) {
            if (xhttp.status=== 200) {
                callback(null, JSON.parse(xhttp.responseText))
            }else{
                const error = new Error('Error ' + url_api);
                return callback(error, null);
            }
        }
    }
    xhttp.send();
}

Una explicación un poco mas profunda:

https://www.youtube.com/watch?v=4l0PELZZqAM

Hice el curso de postman para tener bases en esta clase, lo bueno es que esta en el link de archivos y enlaces

let XMLHttpRequest = require('xmlthttprequest').XMLHTTPREQUEST;

function fectData(url_api, callback) {
  let xhttp = new XMLHttpRequest();
  xhttp.open('GET', url_api, true);
  xhttp.onreadystatechange = function (event) {
    if (xhttp.readyState === 4) {
      if (xhttp.status === 200) {
        callback(null, JSON.parse(xhttp.readyText))
      } else {
        const error = new Error('Error' + url_api);
        return callback(error, null);
      }
    }
  }
  xhttp.send();
}

let XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest;

function fetchData(url_api,callback){
    let xhttp = XMLHttpRequest();
    xhttp.open('GET', url_api,true);
    xhttp.onreadystatechange = function (event){
        if(xhttp.readyState === 4){
            if(xhttp.status === 200){
                callback(null, JSON.parse(xhttp.responseText));
            }else{
                const error = new Error('Error' + url_api);
                return callback(error, null);
            }
        }
        xhttp.send();
    }
}

¿Podría usar && para no usar el if interno con xhttp.status? Así como en el código

function fetchData(url_api, callback){
    let xhttp = new XMLHttpRequest()
    xhttp.open('GET', url_api, true)
    xhttp.onreadystatechange = function(event){//se crea la función para eso se usa este método
        if(xhttp.readyState === 4 && xhttp.status === 200 ){//indica el estado del request
        // .status mensaje del estado del request
        callback(null, JSON.parse(xhttp.responseText))// con node callback tiene dos parametros, error o el resultado
        }else{//.responseText es el texto que se obtiene con el estado status
                const error = new Error('Error' + url_api)
                return callback(error, null)
        }
    } 
    return xhttp.send//Aquí se envia la petición
}

Una alternativa ** online** a POSTMAN, para quien no puede o quiere instalar programas por el momento

vaya…! soy nuevo por acá y creo que tendré que volver a ver la clase, no entendí casi nada.

Los Métodos de petición HTTP son los siguientes:

• GET
• HEAD
• POST
• PUT
• DELETE
• CONNECT
• OPTIONS
• TRACE
• PATCH

Usando template literals

const error = new Error(`Error en ${url_api}`);