Haciendo múltiples requests

Clase 34 de 55 • Fundamentos de JavaScript 2018

Clase anteriorSiguiente clase

Resumen

En esta clase accederemos a múltiples datos al mismo tiempo. Continuaremos trabajando con los jQuery y swapi.

Ivan Santiago

student•

Por fin lo entendi sin ninguna duda, esto es demasiado cool 😮 ❤️

Jonatan Padilla

student•

hahaha me too!

Pablo Elias Mercado Moreno

student•

Sin duda jajaja este vídeo fue la puntada final para entender asincronismo !

Juan David HernandezPosso

student•

Con la API dada por Sacha se me ocurrio que cada vez que colocara un nombre me saliera en que peliculas aparece el personaje y les cuento que desde las 2am hasta las 7:30am pude hacerlo por que tenia que hacer el mismo request y luego otros request dentro de un loop ahahah yo se que no les interesa pero me siento como elon musk lanzando gente al espacio ahahah comparto el codigo, pruebenlo :)

Santiago Prada Betancourt

student•

Hola Juan, una pregunta. Podrías dejar tu código como un comentario? Me encantaria ver como funciona en mi consola :D, gracias de antemano

Juan David HernandezPosso

student•

@sanprabet te comparto todo sin comentarios, me cuentas:

aqui: const URL_API = "https://swapi.dev/api/"; const PEOPLE_URL = "people/:id/"; const FILMS_URL = "films/:id/"; const LUKE_URL = ${URL_API}${PEOPLE_URL.replace(":id", 1)}; const opti = { crossDomain: true };

function optenerPersona(id) { const urlp = ${URL_API}${PEOPLE_URL.replace(":id", id)};

$.get(urlp, opti, function (person) { console.log( Mi nombre es ${person.name} y he participado en estas peliculas: ); let movies = person.films; for (let movie in movies) { let urlfilms = ${URL_API}${FILMS_URL.replace(":id", movie)};

if (urlfilms !== movies[movie]) { urlfilms = movies[movie];

$.get(urlfilms, opti, function (film) { console.log(${film.title}); }); } } }); }

optenerPersona(1);

Pablo Andres

student•

Resumen de la clase:

Requests en Paralelo

Creamos una nueva función y modificamos levemente el código para hacer el callback ingresando solamente el id:

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const opts = { crossDomain: true}
const onPeopleResponse = function(person){
    console.log(person.name)
}

function obtenerPersonaje(id){
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
    $.get(url, opts, onPeopleResponse)
}

Dado este código.
En qué orden nos llegarán las respuestas?

obtenerPersonaje(1)
obtenerPersonaje(2)
obtenerPersonaje(3)

//  3
//  2
//  1

En este request el resultado llegó en el orden inverso en el que los pedimos.
Por qué sucede esto?
Por el asincronismo de JS.
No sabemos en qué orden nos llegarán las respuestas, esto depende del servidor y de cada uno de los requests.
Iniciamos los requests en un determinado orden pero no sabemos en qué orden van a llegar.

Diana Yazmin

student•

Muy bueno, muchas gracias :)

Tatiana Karina Valencia Hernández

student•

Buen aporte, gracias por compartirlo

Noel Alejandro

student•

Les dejo un pequeño ejemplo que hice:

const API_URL = 'https://swapi.co/api/';
const PEOPLE = "people/:id";
const PLANETS = "planets/:id";
const FILMS = "films/:id";
const OBJ_CROSS = {crossDomain: true};


let idPelis = "";

let onResponsePeople = function(personaje){
    let pelis = personaje.films;
    let numFilms = pelis.length;
    for(var j=0; j < numFilms; j++){
        var tam = pelis[j].length;
        idPelis += pelis[j].charAt(tam - 2) + "}";
    }
    $(".listPersonajes").append("<li><a href='#' onclick='getPeliculas();' >"+personaje.name+"</a></li>");
}

let onResponseFilms = function(pelicula){
    $(".listPeliculas").append("<li><a href='#' >"+pelicula.title+"</a></li>");
}

function obtenerPersonaje(id){
    let url = API_URL + PEOPLE.replace(":id", id);
    $.get(url, OBJ_CROSS, onResponsePeople);
}

function obtenerPeliculas(id){
    let url = API_URL + FILMS.replace(":id", id);
    $.get(url, OBJ_CROSS, onResponseFilms);
}

function getPeliculas(){
    $(".listPersonajes").append("<ul class='listPeliculas'></ul>");
    let arrPelis = idPelis.split("}");
    for(var k = 0; k < arrPelis.length - 1; k++){
        obtenerPeliculas(arrPelis[k]);
    }
}

let numPersonaje = prompt("Introduce el número de tu personaje: ");
let msj = "Recargue la página:";
if(numPersonaje.length > 0){
    if(!isNaN(numPersonaje)){
        if(numPersonaje > 0)
            obtenerPersonaje(numPersonaje);
        else
            alert(`${msj} el personaje no existe.`);
    }else{
        alert(`${msj} el valor introducido no es un número.`);
    }
}else{
    alert(`${msj} introduzca un número.`);
}

Bryan Estiven Silva Mercado

student•

buen aporte

Jhonny Lenin Guamán Rivera

student•

Que estas haciendo con? $(.listPersonajes) que devuelve eso o como debes crear en el HTML

Jose L. Figueroa

student•

Asincronismo

Es llamar a uno o múltiples métodos asincrónicos, pero sin conocer en qué orden nos llegarán las respuestas, eso depende del servidor y de cuanto tarda cada uno de los requests.

Básicamente, conocemos en qué orden lanzamos los requests, pero no sabemos en qué orden nos llegarán.

Rodrigo Ortiz Moreno

student•

Un pequeño aporte utilizando un ciclo for para hacer multiples llamados

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const opts = { crossDomain: true }

const onPeopleResponse = function(persona){
   console.log(`Hola yo soy, ${persona.name}`)
}

function obtenerPersonaje (id){
   const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
   $.get(url, opts, onPeopleResponse)
}

for (var i =1; i <10; i++){
   id = i
   obtenerPersonaje(id)
}

Jose Manuel Carreiro Galicia

student•

Hola, ¿por que no pasas directamente la i de tu ciclo for en lugar de asignarlas?

ObtenerPersonaje(i)

Ginnio Sarabia

student•

No sabemos en que orden van a llegar las respuesta, depende del servidor.

EL ASINCRONISMO A SU MÁXIMA EXPRESIÓN

Angel David Castiblanco Sepulveda

student•

Mismo condigo con Javascript Vanilla:

const API_URL = 'https://swapi.dev/api/'
const API_USER_ID = 'people/:id';

var obtenerPersonaje = async function(id) {
    let request = await fetch(`${API_URL}${API_USER_ID.replace(':id', id)}`)
    let data = await request.json()
    console.log(data.name)
}
obtenerPersonaje(1)
obtenerPersonaje(2)
obtenerPersonaje(3)```

Cesar Israel Aguilar Carrera

student•

excelente muchas gracias, por esos aportes

Juan David Puertas Vargas

student•

Que es Vanilla?

Simón Arenas

student•

He aprendido muchas cosas interesantes en este curso, y la razón de por qué le dicen "Arturito" a "R2-D2" es una de ellas JAJA. (Obvio no he visto ninguna película de SW)

Esdras Benjamín Pavón

student•

jjajajajaj

Óscar Castañeda

student•

Utilizando fetch esta es una versión a mi parecer una versión mejorada del código

const fetch = require("node-fetch");
const url = "https://swapi.co/api/people/";

function starWars() {
  let random = Math.floor(Math.random() * 87) + 1;
  fetch(`${url}${random}`)
    .then(res => res.json())
    .then(json => {
      const { name } = json;
      console.log(name);
    })
    .catch(err => console.log(err));
}

starWars();
starWars();

Pedro Manuel Cruz

student•

Este es mi sistema intergaláctico de presentación de personajes: Con este programa los personajes de la saga, se presentan con nombres y apellidos y hacen un breve diagnóstico de su salud en función de su peso. Además permite distinguir entre mujer / hombre / robot y otros géneros y adecúa los textos y los adjetivos a cada género. También evita que los robots puedan presentarse en nuestro idioma lo que impide que podamos entenderlos.

<code>
const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const opts = { crossDomain: true }

const SOBREPESO = 90
const ALTO = 180 
const BASTANTE_ALTO = 200

const onePeopleResponse = function (persona) {
    

    switch (persona.gender) {

        case 'male':
            console.log(`Hola, yo soy ${persona.name}`) 
            if (persona.height > BASTANTE_ALTO) {
                console.log(`Soy bastante alto porque mido ${persona.height}cm`)
            } else {
                console.log(`No soy muy alto, mido ${persona.height}cm`)
            } 
        
            if (persona.mass >= SOBREPESO) {
                console.log(`Tengo algo de sobrepeso. La última vez pesaba ${persona.mass}kg`)
            } else {
                console.log(`Estoy estupendo de salud, estoy en mi peso ideal porque la última vez que me pesé llegué a tener ${persona.mass}kg`)
            }   
            break

        case 'female':
            console.log(`Hola, yo soy ${persona.name}`) 
            if (persona.height > BASTANTE_ALTO) {
                console.log(`Soy bastante alta porque mido ${persona.height}cm`)
            } else {
                console.log(`No soy muy alta, mido ${persona.height}cm`)
            } 
        
            if (persona.mass >= SOBREPESO) {
                console.log(`Tengo algo de sobrepeso. La última vez pesaba ${persona.mass}kg`)
            } else {
                console.log(`Estoy estupenda de salud, estoy en mi peso ideal porque la última vez que me pesé llegué a tener ${persona.mass}kg`)
            }   
            break
        
        case 'none':
            console.log(`Hola, yo soy ${persona.name}`) 
            if (persona.height > BASTANTE_ALTO) {
                console.log(`Soy bastante alto porque mido ${persona.height}cm`)
            } else {
                console.log(`No soy muy alto, mido ${persona.height}cm`)
            } 
        
            if (persona.mass >= SOBREPESO) {
                console.log(`Tengo algo de sobrepeso. La última vez pesaba ${persona.mass}kg`)
            } else {
                console.log(`Estoy estupendo de salud, estoy en mi peso ideal porque la última vez que me pesé llegué a tener ${persona.mass}kg`)
            }   
            break    

        case 'n/a':   
            console.log(`SISTEMA DE TRADUCCIÓN INTERGALÁCTICO DE ${persona.name}`)           
            console.log(`*·sd%$"·4SDF23(solo se escuchan unos pitidos ininteligibles)`)
            break
    }    
}

function obtenerpersonaje(id) {
    const url = `${API_URL}${PEOPLE_URL.replace(':id', id)}`
    $.get(url, opts, onePeopleResponse)
}

obtenerpersonaje()
</code>

Francisco Martin

student•

Que sepan que mi hija se llama Leia... : O

Wilson Alejandro Gonzalez Gaitan

student•

Que hermoso jamas habia utilizado jquery para servicio

<<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clase 1 - Variables</title>
  </head>
  <body>
    <script
      src="https://code.jquery.com/jquery-3.4.1.min.js"
      integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
      crossorigin="anonymous">  
    </script>
  </body>
</html>
>

<const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'

const URL = `${API_URL}${PEOPLE_URL.replace(':id', 1)}`

$.get(URL, {crossDomain: true}, function(){
  console.log(arguments)
})
>

Sebastián Riátiga

student•

"Con el asincronismo no sabremos en qué orden nos lleguen las respuestas, esto depende del servidor y cuánto tarda en responder cada uno de los request."

Nexura Internacional

student•

Hola a todos. Después de hacer varias pruebas llegué a esta conclusión, ¿podrían por favor corregirla si estoy errado?:

El asincronismo en js depende de los siguientes factores:

Las funciones externas siempre se ejecutan de primeras y en el orden que están en el código
Las funciones callback que no dependen de la respuesta del servidor se ejecutan siempre después de las funciones externas, en el orden que han sido escritas a menos que tengan un setTimeOut o algo por el estilo.
los callbacks llamados después de la respuesta del servidor se ejecutan después de los callbacks que no dependen de un response del server pero nunca se sabe en que orden lo harán porque las respuestas del servidor pueden llegar en distintos momentos.

Gracias de antemano por ayudar a corregir mi conclusión

Carlos Eduardo Gomez García

teacher•

Algo así, pero no del todo, realmente los callbacks que no dependen de una respuesta externa se ejecutan inmediatamente son llamados, recuerda que la ejecución del código es lineal, por lo que si un callback es ejecutado por el mismo código entonces este se va a ejecutar inmediatamente.

En cambios, los callbacks asincronos (que dependen de la respuesta de un servidor) esos si se ejecutan de últimas, ya que el Event Loop los pone en el callstack :D

Jhon Edward Marin Hernandez

student•

Avanzando sin Jquery

(async function load(){
            async function llamarPersonaje(id){
                const response = await fetch(`https://swapi.co/api/people/${id}`)
                const data = await response.json()
                console.log(data.name)
            }
            llamarPersonaje(2)
            llamarPersonaje(3)
            llamarPersonaje(1)
        })()

Jonathan Jiménez Soveranes

student•

Ya voy comprendiendo de que va el asincronizmo, gracias!

Nico Giordano

student•

![](

ME OCURRE QUE NO ENCUENTRA EL SERVER

EL CODIGO:

const API_URL = 'https://swapi.dev/api/';
const PEOPLE_URL = 'people/:id';
const opts = { crossDomain: true };


const lukeUrl = `${API_URL}${PEOPLE_URL.replace(' :id', 1)}`;

const onPeopleResponse = function (luke) {
    console.log(`Hola yo soy, ${luke.name}`)
}

function obtenerPersonaje(id) {
    const url = `${API_URL}${PEOPLE_URL.replace(' :id', id)}`;
    $.get(url, opts, onPeopleResponse);
}

Ivan Cardozo

student•

// Haciendo múltiples requests


const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'


const opts  = { crossDomain: true }
const onPeopleResponse =  (persona) => console.log(`Hola yo soy ${persona.name} `)

// crearemos una funcion para obtener los personajes a partir de un id

function obtenerPersonaje(id) {
  const url =  `${API_URL}${PEOPLE_URL.replace(':id', id)}`
  $.get(url, opts, onPeopleResponse)
}
obtenerPersonaje(1)
obtenerPersonaje(2)
obtenerPersonaje(3)
obtenerPersonaje(4)
obtenerPersonaje(5)
obtenerPersonaje(6)

Luis Angel Frias Herrera

student•

Acerca de la asincronía en JavaScript Se puede decir, que de manera "natural" el orden de las respuestas en peticiones asíncronas en JavaScript dependerá del tiempo que se tarde en hacer la petición al servidor o recurso.

Haciendo múltiples requests

Introducción al curso

¡Alto! Tenemos una nueva versión de este curso para ti

Bienvenidos al Curso de Fundamentos de JavaScript

Repositorio de este curso de fundamentos de JS

Primeros pasos en JavaScript

Variables

Variables: Strings

Variables: Números

Funciones

El alcance de las funciones

Objetos

Desestructurar objetos

Parámetros como referencia o como valor

Comparaciones en JavaScript

Estructuras de Control y Funciones

Condicionales

Funciones que retornan valores

Arrow functions

Estructuras repetitivas: for

Estructuras repetitivas: while

Estructuras repetitivas: do-while

Condicional múltiple: switch

Arrays

Introducción a arrays

Filtrar un array

Transformar un array

Reducir un array a un valor

Programación Orientada a Objetos en JavaScript

Cómo funcionan las clases en JavaScript

Modificando un prototipo

El contexto de las funciones: quién es this

La verdad oculta sobre las clases en JavaScript

Clases en JavaScript

Asincronismo

Funciones como parámetros

Cómo funciona el asincronismo en JavaScript

Cómo funciona el tiempo en JavaScript

¿Qué pasó con swapi.co?

Callbacks

Haciendo múltiples requests

Manejando el Orden y el Asincronismo en JavaScript

Manejo de errores con callbacks

Promesas

Promesas Encadenadas

Múltiples promesas en paralelo

Async-await: lo último en asincronismo

Juego de HTML

Comenzando el juego

Generando una secuencia de números

Iluminando la secuencia de colores

Obteniendo el input del usuario

Agregando la verificación del color elegido

Agregando los estados finales del juego

Conclusiones del curso

Complementos

Diferencias entre var, let y const

Memoización: ahorrando cómputo

¿Hace cuántos días naciste?

Funciones recursivas

Entiende los closures de JavaScript

Estructuras de datos inmutables

Cambiando de contexto al llamar a una función

¿Cuándo hace falta poner el punto y coma al final de la línea?