Peticiones, una guía sencilla de JavaScrip

Cuando queremos realizar peticiones a un servidor es muy sencillo perderse y frustrarse, sin embargo, hoy voy a darte una muy sencilla explicación de cómo realizarlas de 2 formas y cómo funcionan.

Para mostrar cómo funcionan vamos a consultar todos los datos de Rick Sánchez utilizando el API de Rick and Morty: https://rickandmortyapi.com/

- AJAX

Es la forma más común de realizar peticiones, solo debemos realizar 4 pasos.

1. Instanciar XMLHttpRequest.
   const request = new XMLHttpRequest

2. Indicar qué va a suceder cuándo recibamos la respuesta del servidor.
   Usamos el método .onreadystatechange:
   request.onreadystatechange = ()=>{
   //Aquí vamos a procesar la respuesta del servidor, lo explico más adelante
   }

3. Utilizamos el método .open.
   Necesitamos de mínimo 2 parámetros
   • El método con el que vamos a realizar la petición.
   • La URL donde se encuentra la información de Rick.
   request.open(“GET”, “https://rickandmortyapi.com/api/character/1”)
   En este caso vamos a utilizar el método GET, sin embargo aquí te dejo una tabla con la diferencia de métodos.

4. Enviar la petición al servidor con el método .send():
   request.send()

   Para procesar la respuesta del servidor:

Para procesar la respuesta del servidor solo debemos realizar 3 pasos:

1. Revisar el estado de la petición:

Cuando ejecutamos el método .onreadystatechange lo que estamos haciendo es preguntar, como va mi petición al servidor, podemos tener 5 respuestas numéricas a esa pregunta:
0: La petición aún no se ha iniciado
1: Nos hemos conectado con el servidor
2: El servidor recibió nuestra petición
3: El servidor está procesando nuestra petición
4: El servidor termino de procesar nuestra petición y nos tiene una respuesta
Por lo que el código quedaría así:

if(request.readystate === 4){
	//Paso 2
}

1. Revisar qué respuesta nos dio el servidor:

El servidor nos va a enviar un número indicando si nuestra petición fue exitosa o si hubo algún error, el número para verificar si todo salió bien es 200, por lo que el código quedaría así:

if(request.status === 200){
	//Paso 3
}

1. Utilizar el resultado:

Ya que comprobamos que se realizo la petición y todo salió bien podemos utilizar el resultado guardándolo en una variable:

var resultado = request.responseText

Sin embargo, si la petición que hicimos es un objeto debemos convertir el resultado a JSON:

var resultado_en_objeto = JSON.parse(resultado)
console.log(resultado_en_objeto)

Y listo, ya tendríamos toda la información de Rick Sánchez

Juntando todo el código quedaría así:

const URL = "https://rickandmortyapi.com/api/character/1"constrequest = new XMLHttpRequest()
request.onreadystatechange = ()=>{
    if(request.readyState === 4){
        if(request.status === 200){
            var resultado = request.responseText
            var resultado_en_objeto = JSON.parse(resultado)
            console.log(resultado_en_objeto)
        }
    }
}
request.open("GET",URL)
request.send()

Y así obtenemos todos los datos de Rick Sanchez

- Fetch

Es una mejor alternativa a XMLHttpRequest ya que tiene una sintaxis más limpia y sencilla, solamente escribimos:

const URL = "https://rickandmortyapi.com/api/character/1"
fetch(URL) //Fetch es una promesa, por lo que debemos usar .then
.then(response => response.json()) //Cuando fetch es resuelto no nos devuelve los datos que solicitamos, por lo que debemos ejecutar el método .json() que nos devuelve una promesa 
.then(data => console.log(data)) //Cuando se resuelve la promesa de .json ahora sí podemos acceder a los datos de Rick Sánchez.

Como es evidente, Fetch es mucho más fácil y sencillo, sin embargo entender AJAX te permite entender cómo funciona Fetch, ya que funcionan de forma casi similar.
Si tienes alguna duda o no te quedó del todo puedes escribirme en Twitter@Ulises5G

Nunca pares de aprender ❤️