Express.js y fetch: API REST con JavaScript

Por si les causan dudas los .then

1. fetch(url) hace un GET (una petición para obtener algo) a la URL que se le especifique
2. Esta función nos retornará algo (lo que sea que se haya definido en el código del servidor).
3. No podemos trabajar con lo que nos retorne directamente, ya que el servidor se tomará un tiempo en responder.
4. Para eso utilizaremos el .then(func), que ejecutará el código de la función que le demos (en este caso, func), pasándole la respuesta del servidor como parámetro.
5. El .then suele ir por debajo de la función que hayamos llamado (fetch en este caso) e indentado, por pura estética nada más. Nótese que se puede hacer fetch(url).then(func) sin dejar ningún espacio.

Así, un ejemplo de código podría ser:

function decirHola(res) {
	if (res.ok) {
		console.log("¡Todo bien!");
	}
}

fetch("https://google.com")
	.then(decirHola)

Este código enviaría un request a https://google.com y, una vez tuviera una respuesta del servidor, haría decirHola(respuesta), siendo respuesta la respuesta que haya dado el servidor de esa URL.

Lo que pasa es que muchas veces la función que usamos (en este caso decirHola) no se define aparte, sino que se crea al instante. Este concepto es conocido como función anónima y se ve así:

fetch("https://google.com")
	.then(function(res) { // abrimos la función anónima
		// aquí el código de la función
		if (res.ok) {
			console.log("¡Todo bien!");
		}
	}) // el corchete cierra la función, el paréntesis cierra al .then

Este concepto es oro en polvo, son las promesas de JavaScript, así que les invito a investigar sobre ello.

No olviden que el objeto “Class Jugador” se escribe con la J mayúscula, por ese error no pude avanzar y perdí tiempo, un saludo, espero les sirva.

Estoy viendo que ya vamos por la clase 76, a este punto muchas personas de las que comenzaron, no llegan, se dan cuenta que tal vez no es lo de ellos o x razones. pero aprovecho para felicitarnos por haber llegado a este punto y yo solo digo… "no te acabes cursoooo!!! " jajajaja

Wooooooooooooooowww!!! Me toy enamorando :3

cuando estén en la parte de poner ${Math.random} asegúrense que son las comillas EXACTAS que son estas: ``
se las dejo para que las copien o si no con el comando Ctrl + alt + (la tecla que tenga la comilla), ya que yo estuve como media hora para encontrar el error y eran esas comillas xd

La verdad uno queda loco…
El asunto radica en que no se nos explica realmente la finalidad de lo que hacemos, muestran todo el procedimiento pero hasta ahi.

si empezaran por mostrar que es lo que se busca con los que haremos quiza uno tendria mejor asociación con los conceptos

Me paso que habia cerrado todo al terminar la clase pasada, al abrirlo de nuevo quice seguir con el contro + c del sgundo 50 y continuar a la par, no lo logre por que debia ubicarme de nuevo en la carpeta donde tengo mis archivos, tal cual como el inicio del video pasado, dejo el aportesito por si a alguien mas le pasa, casi no doy con el chiste

Si no os sale el console.log() en la pagina del html aseguraos que cuando llamáis la función unirseAlJuego() tengáis puestos los paréntesis ()

Que tengan un buen día 🎈

Yo dandome cuenta que aun está ahí el typo del profe Diego, bueno creo que el fue, que colocó Mokepono, en lugar de Mokepon.

Les quiero contar que había dejado el curso parado y lo he retomado 2 meses después. Es todo un reto retomar pero aquí estoy, necesito terminarlo para poder continuar. Este curso se llama básico pero se que tiene cosas muy avanzadas que seguramente vamos a ver más adelante con mayor detenimiento.

Para posibles futuros errores:
Acordaros de tener el servidor funcionando. Si no lo está, os dará error y no os dará el número de jugador. (30’ intentando ver porque no me salía)

No sabía que el res.text y res.json también eran promesas, lol

me quedo con frontend !!!

Por si no saben sacar (``) o no lo encuentran… Pueden usar Alt + 96 y ahí les saldrá las comillas 😃

Me pregunto . que tiene de basico la enseñanza de back end que nos estan dando ? … jaja yo esperaba explicaciones y enseñanzas basicas , pensando en alguien que de verdad esta partiendo en esto , no creo que esta parte de la enseñanza este pensado en gente que recien comienza . 😦 la verdad desmotiva un poco que se salten tantos conceptos y que den por hecho que los dominaramos , si veo mucha gente comentando con conocimientos previos pero para alguien que recien parte en la programacion esto es mas desmotivante que motivante en si , por que va todo rapido y con apenas explicacion como si ya los de conocimiento basico lo supieramos , esperaba que aqui es cuando nos explican conceptos basicos o usos de los comandos en forma basica , no por que no quiera avanzar sino que por que primero pensaba que seteariamos las bases , pero veo que todo ya se da por hecho . Frustracion y estar perdido es poco! bueno como sea como dijo alguien por ahi!! vamos que queda poco!! por algo llegamos hasta aqui , solo que aburre un poco y cansa hacer todo copy paste sin entender mucho ni recibir explicaciones contextuales 🤷

Con async y await queda mas legible el código

const unriseAlJuego = async () => {
  let response = await fetch(http://localhost)
  let userData = await response.json();

  console.log(userData)
}

sin embargo es bueno saber como funciona una petición con .then ✌️

éramos cientos todos animados :C, quedamos pocos

La prf me parece muy buena y se nota que está muy clara en lo que habla, pero, su clase la da (a mi parecer), tipo repaso, ignorando que muchos aca no estamos tan empapados en el tema que imparte… Estaria genial que se tome un poco mas de tiempo y explicar el paso a paso de lo que hace…

Me salia error y tenia el servidor apagado jajajajjajaj

Si no les carga la página de localhost deben poner esto en la consola: node index.js

Créditos a @ric.arellano92!!!
Para evitar el error “mokepon.js:448 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘nombre’)” lo que hice fue agregar un if que evalué si el mokepon existe o no, esta validación también se aplica en la parte de pintar mokeponEnemigo:

//____---------------------Al recuperar enemigos--------------------------
                mokeponesEnemigos = enemigos.map(function (enemigo)
                {
                    let mokeponEnmigo = null
                    if(enemigo.mokepon != undefined)
                    {
                        const mokeponNombre = enemigo.mokepon.nombre 
                        switch (mokeponNombre)
                        {
                        case "Hipodoge":
                            mokeponEnmigo = newMokepon('Hipodoge', './assets/mokepons_mokepon_hipodoge_attack.png', 5, './assets/hipodoge.png', enemigo.id)
                                break
                            case "Capipepo":
                                mokeponEnmigo = newMokepon('Capipepo', './assets/mokepons_mokepon_capipepo_attack.png', 5, './assets/capipepo.png', enemigo.id)
                                break
                            case "Ratigueya":
                                mokeponEnmigo = newMokepon('Ratigueya', './assets/mokepons_mokepon_ratigueya_attack.png', 5, './assets/ratigueya.png', enemigo.id)
                                break
                            default:
                                break
                        }

                        mokeponEnmigo.x = enemigo.x
                        mokeponEnmigo.y = enemigo.y
                    }
                        return mokeponEnmigo
                })

//---------------------------------Al tratar de pintar enemigos----------------------------------------
        mokeponesEnemigos.forEach(function (mokepon)
        {
            if(mokepon != undefined){
                mokepon.pintarMokepon()
                revisarColision(mokepon)
            }
        })

Re subí la respuesta de @ric.arellano92 porque estuve rompiéndome la cabeza durante una semana y quiero que otros lo puedan solucionar, ya que desde las carpetas del curso da error.

Sé que probablemente necesitaría el curso que tienen de backend en los recursos para entenderlo 100%, pero sí consigo seguir la clase y ya apenas quedan 6 vídeos para terminar este proyecto. 🫡 Estoy muy orgullosa de mí y de todos los que estamos llegando hasta aquí con nuestros mokepones.

Se puso bastante complejo el curso ajajajaj

Gracias a los dioses del internet que dejamos CSS atrás y nos pusimos serios😍

Buenas noches, tengo un problema cuando trato de hacer el localhost:8080/inirse en el navegador me sale unas lineas y me dice que hay una referencia de erro ya compare mi codigo y creo tenerlo bien. si alguien lo puede revisar y me decir cual es el erro.

<code> const express = require("express")

const app = express()

const Jugadores = []

class Jugador {
    constructor (id) {
        this.id = id
    }
}

app.get("/unirse", (req, res) => {
    const id = `${Math.random()}`

    const Jugador = new Jugador(id)
    Jugadores.push(Jugador)

    res.send(id)
})

app.listen(8080, () => {
    console.log("servidor funcionando")
})

Dos cosas:

1. En recursos de la clase esta la solución del CORS.
2. Como ya trabajamos en el servidor hay que tener todos los archivos dentro de la carpeta que se instaló el servidor.

cuando inicio el local host me sale Cannot GET /unirse

Funcionando✅

si no les sale el local host cambien las comillas dobles ("") por comillas simples(’ ‘)
ejemplo =>
app.get(’/unirse’, (req, res) => {
const id = ${Math.random()}
const jugador = new Jugador(id)
jugadores.push(jugador)

recuerden siempre checar que estén en la carpeta correcta.

Esto es increíble.

extrañamente como es la tecnologia muchas veces ,no me cargaba el numero aleatorio que sesupone que tiene que arrojar cuando vamos al server en “htt://localhost:8080/unirse” …etonces lo que hice es apagar la terminal con “Ctrl +C” y luego la encendi con “node index.js” luego fui a cargar nuevamente en “htt://localhost:8080/unirse” y ahi si me arrojo el numero aleatorio , la tecnologia y el resetear jaja nunca falla …un clasico!

vengo a dar mi aporte.

Yo tenia el error Access-Control-Allow-Origin pero ya tenia la clase en curso, la repase varias veces, descrague el codigo lo compare con vs todo estaba bien y me salia el mismo error, y en el mokepon de la clase que descargue tambien tenia el mismo error.

A prueba y error y gracias a el comentario en la comunidad dev de discord de platzi, instale la extension live-server en vs y bualaaaaa

Funciona.
Ahora me pregunto que pasoo y como sirve esto.
si algun profe lee este comentario o estudiante que sepa, le agradezco la aclaracion.

Antes de poder recibir una respuesta de nuestro servidor, primero se debe verificar si esta permitido llamar al servicio desde este origen (nuestro frontend) y para eso revisaremos que nos pasa como parametro la variable res en la consola, de esta denegarse por un error seria momento de crear una cabecera desde nuestro backend para permitirnos utilizar servicios desde este origen

localhost --> servidor local

get --> permite solicitar recursos

post --> permite enviar datos

.then --> recibe una funcion

res.setheader() --> permite que se realicen solicitudes desde el lugar especificado

fetch --> permite acceder y manipular solicitudes

Me cuesta seguirle el ritmo a la profesora. Debe ser porque backend no es lo mío 😦

recuerden poner el Math.random de manera correcta — Math.random()

Me encanta la manera de explicar de la profe Diana Martinez. Bastante clara la informacion que es bastante compleja! Felicidades 😄

La función fetch() en JavaScript puede recibir uno o dos parámetros:
.
1 - La URL de la solicitud: Este es el único parámetro obligatorio que se debe proporcionar a la función fetch(). Representa la dirección web de la cual se espera obtener una respuesta.
.
2 - Las opciones de configuración: Este es un parámetro opcional que se utiliza para proporcionar configuraciones adicionales para la solicitud. Este parámetro es un objeto que puede tener los siguientes atributos:
.

• method: El método HTTP de la solicitud, como GET, POST, PUT, DELETE, etc.
  .
• headers: Los encabezados HTTP de la solicitud, como “Content-Type” y “Authorization”. Este es un objeto con pares clave-valor.
  .
• body: El cuerpo de la solicitud, como una cadena de texto, un objeto FormData, un objeto Blob, un objeto BufferSource, o un objeto URLSearchParams, entre otros.
  .
• mode: El modo de la solicitud, como “cors”, “same-origin”, o “no-cors”.
  .
• cache: El modo de caché de la solicitud, como “default”, “no-store”, “reload”, o “no-cache”.
  .
• redirect: El modo de redireccionamiento de la solicitud, como “follow”, “error”, o “manual”.
  .
• referrer: El valor del encabezado Referer de la solicitud.
  .
• referrerPolicy: La política de referer de la solicitud, como “no-referrer”, “no-referrer-when-downgrade”, o “origin”.
  .
• integrity: El valor de integridad de la solicitud, como un hash criptográfico.

.
En resumen, fetch() puede recibir la URL de la solicitud como único parámetro obligatorio, pero también puede recibir un objeto con opciones de configuración adicionales para personalizar la solicitud y la respuesta.

Si quieren entender mas acerca de este tema de las** Promesas en JS** recomiendo mucho este video https://www.youtube.com/watch?v=ppzrpTjwEC8&ab_channel=jonmircha . En este canal tambien podran encontrar muchos otros videos de varios temas de Javascript para reforzar.

Que increible, me estoy enamorando mas y mas de la ptogramacion

Me parecio increible el como se utiliza un API Rest en un FrontEnd como JS, me quede impresionado. Y la forma que se declara para obtener el resultado de su funcionamiento. Espero seguir aprendiendo mas.

creditos a :Chema Ferrández

Para posibles futuros errores:
Acordaros de tener el servidor funcionando. Si no lo está, os dará error y no os dará el número de jugador. (30’ intentando ver porque no me salía)

Para sacar el “console.log” de manera rápida, solo escriban “log” se van a la segunda opcion del vscode y le dan a enter o tabulan

Al principio no me tomada el ID aleatorio y salia error, lo corregi pero aun asi salia el mismo error, luego reinicie el servidor y ahi si funciono correctamente por si les pasa a ustedes

asíncrona : quiere decir que no sabemos cuanto tardar en darnos la respuesta el servidor por eso es asíncrona.

puenden instalarse :

npm i nodemon

para no tener que sacar y volver a inciar el servidor en cada cambio.

para usarlo solo tienen que escribir nodemo index.js dentro de la carpeta donde esta index.js

Para detener el Servidor Crtl + C…

media hora viendo que significa ‘function random() { [native code] }’ para darme centa que no le coloque los parentesis a Math.random 😂

estoy muy trabada , se rompio mi juego , no se porque , aparecieron varios archivos mokepon html en mu cpu , desde q estoy utilizando la terminal y ahora es como que toma un codigo que esta incompleto y no funciona el juego

Siento ya que llevo el apellido “Back End”, tal como la Von Der Layen o mejor dicho la Von Der Guerris

Hola me aparece este error, pero no logro identificar la solución.!

Si a alguno le ocurre como a mí que no puede apagar el servidor usen este comendo en la consola:

killall node

todo perfecto pero me cuesta seguirle el codigo a la profe! xq tiene abierta la terminal y casi no se ve! de resto todo OK

Esto esta muy divertido 😅