Callback a un servidor externo

Clase 26 de 51 • Fundamentos de JavaScript 2017

Clase anteriorSiguiente clase

Resumen

En este vídeo aprenderás a hacer “Callbacks” desde una API externa.

Notas:
Existen otras formas diferentes de llamar a los “Callbacks” en el código de JavaScript.

cb
onfinish

Alejandro Sanchez

student•

Para aquellas personas que les costo tanto esta clase como a mi la explicare paso por paso. En este ejercicio estamos usando AJAX (Asyncronic Javascript And Xml) AJAX no es un lenguaje de programacion, es parte de Javascript. Con este, nosotros podemos hacer solicitudes a un servidor una vez que la pagina ya este cargada, esto quiere decir entre otras cosas que no hara falta recargar toda la pagina para agregar, o actualizar informacion.

Lo primero que aparace en el codigo es la definicion de la funcion get(). esta tiene dos parametros, una url y una funcion callback

function get(URL,callback) {

Ambos parametros los explicare conforme se vayan usando.

Luego creamos una constante que sera igual al objeto XMLHttpRequest()

const xhr = new XMLHttpRequest();

Esto nos permite usar las propiedades y métodos de este objeto en la constante xhr. ahora para continuar debemos usar la propiedad onreadystatechange. En esta propiedad deberemos definir una función que se ejecutara cada vez que la propiedad readyState cambie.

xhr.onreadystatechange = function () {
		const DONE = 4
		const OK = 200
		if (this.readyState === DONE) {
			if(this.status === OK){
				//Todo OK
				callback(null, JSON.parse(this.responseText))
			}else {
				//Hubo un error
				callback(newError(`Se produjo un error al realizar el request ${this.status}`))
			}
		}
	}

Las constantes DONE y OK no son necesarias, lo que nos importa es el valor de cada una, en este caso para compararlo con las propiedades readyState y status respectivamente. Ahora, esto lo hacemos por lo siguiente, la propiedad readyState tiene cinco posibles valores, que definen el estado de la solicitud al servidor, el valor 4 quiere decir Que la solicitud finalizo y la respuesta esta lista.
Por otro lado tenemos la propiedad status que nos indica el estado de la solicitud, por ejemplo, si fuese 404, su valor seria “not found”. En este caso el valor que nos interesa es 200 que quiere decir “OK”.

Ahora, una vez que la condicion de ambos if se cumpla podemos ejecutar la función callback. Una funcion Callback es una funcion que sera pasada por parametros a otra funcion y que se ejecutara cuando llamemos a la primera. En este caso analicemos unicamente la que esta dentro del if. Primero se le pasa un objeto vacio o null (y es null por que de estar en este if quiere decir que todo salio correctamente) y luego se pasa JSON.parse(this.responseText)

Empecemos por This.responseText. Este es otra propiedad del objeto XMLHttpRequest, esta propiedad nos devuelve los datos solicitados en forma de String, por cierto, solo por si acaso, el this hace referencia a la constante xhr.

callback(null, JSON.parse(this.responseText))

Ahora, ¿que es eso? JSON no es mas que JavaScript Object Notation. Entonces, por otro lado cuando se intercambian datos con un servidor, estos se reciben en forma de String, e metodo .parse nos permite convertir este String en un objeto de Javascript. Es muy importante recordar que todo este JSON.parse(this.responseText) se lo estamos pasando por parámetros a nuestra función callback, funcion que aun no hemos definido.

Luego aplicamos estos dos metodos:

xhr.open('GET', URL);
	xhr.send(null);

Ambos son métodos del objeto XMLHttpRequest(), usamos estos métodos para enviar la solicitud al servidor. con open() especificamos la solicitud. Este método recibe tres parametros que son el método de envío (GET o POST) , la URL y un tercer parametro que sera true o false dependiendo de si queremos que la solicitud sea asincrona o sincrona respectivamente.

En el caso del ejercicio solo le pasamos dos parametros, el primero, GET, y el segundo sera la URL, (valor que le pasaremos cuando llamemos a la funcion get())

en cuanto a send(), este método se usa para enviar la solicitud al servidor, si la solicitud se hace por “GET” entonces este método no llevara argumentos.

Me saltare la funcion destinada a manejar errores para ir directamente a la llamada de la funcion get().

get('http://www.swapi.co/api/people/1/', functiononResponse(err, luke){
	if(err) return handleError(err)

	/* Para traer el mundo */
	get(luke.homeworld, functiononHomeworldResponse(err, homeworld){
		if(err) return handleError(err)

		luke.homeworld = homeworld
		console.log(`${luke.name} nació en ${luke.homeworld.name}`)
	})

	console.log(`Request succeded`)
	console.log('luke', luke)
})

Empezare con la primera linea. En este caso estamos llamando a la funcion Get() y el primer parametro que le pasamos es la url a la cual hara la solicitud, el segundo parametro es nuestra funcion Callback, que en este caso la llamamos onResponse, ahora aqui viene una parte un poco enredada, para empezar le estamos pasando dos argumentos a esta funcion, pero, ¿quienes son estos argumentos? bueno simple, volviendo a la definicion de la funcion get,dentro de los if teniamos la funcion callback y le pasabamos dos parametros, ahora, cada parametro tomara su respectivo valor de la siguiente manera:

err = null;
luke =  JSON.parse(this.responseText);

Puede que esto aun no quede muy claro, de ser ese el caso lo explicare de otra manera, para ello supongamos que no usamos una funcion callback, Veamoslo con un ejemplo dentro de la definicion de la funcion get

xhr.onreadystatechange = function () {
		const DONE = 4
		const OK = 200
		if (this.readyState === DONE) {
			if(this.status === OK){
				//Todo OK
			let luke = JSON.parse(this.responseText)
			console.log(`Mi nombre es ${luke.name}`)
			}else {
				//Jubo un error
				console.log(newError(`Se produjo un error al realizar el request ${this.status}`))
			}

En este caso solo coloque la propiedad onreadystatechange que es donde usamos la función callback. Ahora, veamos, al yo no usar la función callback, me veré obligado a especificar que haremos con la solicitud al servidor dentro de la misma funcion get() y por otro lado, si queremos mostrar el planeta de luke, para eso necesitábamos hacer otra solicitud, en este caso no podríamos usar nuevamente la función get para ello, nos veriamos obligados a crear una función mas, por ejemplo get2() que haga la otra solicitud al servido e introducir get2() dentro de get(). LA función callback nos permite hacer una solicitud al servidor más genérica y que podamos reutilizar código.

Quizás fui un poco extenso pero trate de ser lo mas breve posible, quizás se me hayan escapado algunos detalles, sin embargo espero que esta información les ayude, éxito y sigan avanzando, ya falta poco!! 😃 😄

Andrés Madrigal

student•

Gracias!!!

Carlos Alvarez

student•

Excelente aporte, más que necesario… Creo que algunas clases como esta hay que reforzarlas con mucha documentación externa si queremos seguir en carrera.

Victor Alfonso Caballero Cabrera

student•

Para los que no les funciona el código, abrí la consola del codepen y mostraba lo siguiente (“Request failed: Error: Se produjo un error al realizar el request 0”) esta no , la consola con el F12 xD , y botaba este error (“Codepen.js:27 Mixed Content: The page at ‘https://codepen.io/anon/pen/Mmezgd?editors=0012’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http://www.swapi.co/api/people/1/’. This request has been blocked; the content must be served over HTTPS.”)
que en cristiano dice que no acepta la petición por ser HTTP , bueno entonces tenemos que agregar la S al protocolo 😄 y si acepta porque swapi.co tiene el certificado.
https://swapi.co/api/people/1/ - , seamos curiosos amigos 😄 !!

Jhovany Morales Bruno

student•

Muchas Gracias por el aporte, me había percatado del error en la consola de chrome pero no se me ocurrió agregar “s” al URL

Erick Neftalí Sarmiento Cortes

student•

excelente muchas gracias

David Santiago González Ramos

student•

Personalmente este tema es el que más me ha costado entender en JS

Miguel Márquez Serrano

student•

para mi también ha habido un salto importante en este video…

Omar Gaston

student•

Jose Manuel Montaño Saenz

student•

Vengo del futuro, entren al cap “que son y como se implementan el callbacks en…” y "eliminando el callback hell usando promesas…"
hay te explicaran de manera mas sencilla los callbacks, promesas, ejecuciones asincronas y sincronas, etc… lo recomiendo.

Carlos Raez

student•

La verdad que estoy viendo esta parte y de repente salta a conceptos que no los conocia, como lo que es una Api todo ese codigo de CodePen no se como sale…noto como que va muy rapido…en algo que no se ha explicado antes

Victor Alfonso Caballero Cabrera

student•

Lo que significan los valores :
0: solicitud no inicializada
1: conexión del servidor establecida
2: solicitud recibida
3: solicitud de procesamiento
4: solicitud terminada y la respuesta está lista

DANIEL MEDINA ARMADA Medina

student•

Anexo mi código, la única diferencia es que añadí una función para cambiar el http por https

function get(URL,callback){

  const xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function(){
    const DONE=4;
    const OK=200;
    if (this.readyState===DONE){
      if (this.status===OK){
        //todo ok
        callback(null, JSON.parse(this.responseText))
      }else{
        //hubo un error
        callback(new Error(`Se produjo un error al realizar el request: ${this.status}`))
      }
    }
  }

  xhr.open('GET',URL);
  xhr.send(null);
}

function handleError(err){
  console.log(`Request failed: ${err}`)
}

function URLS(url){
  if(url.match('^http://')){
     return url = url.replace("http://","https://")
  }
}

get (URLS('http://swapi.co/api/people/1/'), function onResponse(err, luke){
  if (err) return handleError(err)

    get (URLS(luke.homeworld), function onHomeWorldResponse(err,homeworld){
      
      if (err) return handleError(err)

      luke.homeworld=homeworld
      console.log(`${luke.name} nacio en ${luke.homeworld.name}`) 
    })
})```

Fernando Barahona

student•

brillante!!!

Yadiel Vélez

student•

Pude entenderlo porque busqué en la internet un rato explicaciones de todo aquello que el profesor se salto como los operadores “===”, por qué 4 en DONE y por qué 200 en OK… , sino, no entendía nunca esta clase. En mi opinión no debería ser así.

Alejandro Sanchez

student•

Hola, yo no tuve que usar CodePen, lo hice desde la consola de Google Chrome y con mi propio código (copie y pegue el del profesor pero no me funciono)

function get(URL,callback) {

  let xhttp = new XMLHttpRequest;
  xhttp.onreadystatechange = function () {
    if (this.readyState === 4 && this.status === 200){
      callback(JSON.parse(this.responseText));
}
}
  xhttp.open("GET",URL,true);
  xhttp.send();
}

get("https://swapi.co/api/people/1/",function onResponse(luke){
  get(luke.homeworld,(homeworld)=>{
    console.log(`Mi nombre es ${luke.name} y vivo en ${homeworld.name}`);
  })
})

me salte la parte de los errores solo para mostrar la solicitud y aquí dejo una imagen de la consola para que no piensen que los engañe!!

José Granado

student•

Excelente aporte amigo!

Henry Tabima Giraldo

student•

yo lo corrí des de mi pc con node js y npm, simplemente ejecute

npm init

npm install xmlhttprequest

y por último añadí la siguiente linea al principio del código

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest

y para ejecutarlo (suponiendo que estas ubicado en la terminal donde esta el archivo

node nombreDelArchivo.js

David Santiago González Ramos

student•

Sii, es mejor hacer la practica desde el pc con NodeJS instalando XMLHttpRequest

Jose Rueda

student•

yo tambien lo hice en mi pc porq en codepen no me corria… solo una cosa… esa primera linea de codigo me devuelve un error “reques is not defined”. Sin esa linea corre perfectamente

const XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;```

Juan Felipe Rave Correa

student•

Les quiero dejar el código con comentarios que hice en las líneas para que se entienda un poco más qué hace cada cosa, espero les pueda ayudar, y si estoy equivocado en algo siéntanse libres de corregir

//Conecta a una API REST para saber el planeta de algún personaje
function get(URL, callback){ //este método get recibe una URL y un método Callback
	
    const xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function () {
		const DONE = 4
		const OK = 200 //Es un estado de la petición, el código 200 indica que fue aceptada
        //los "this" hacen referencia al objeto xhr es igual a xhr.readyState
		if (this.readyState === DONE) { 
			if(this.status === OK){
				//Todo OK
				callback(null, JSON.parse(this.responseText)) //manda a la funciòn callback un error=null y una respuesta en formato JSON
			}else {
				//hubo un error
				callback(new Error(`Se produjo un error al realizar el request ${this.status}`))//Sólo manda a callback un error, sin respuesta
			}
		}
	}

	xhr.open('GET', URL); //abre la petición (request), este GET es un "read"
	xhr.send(null);
}

/* Funcion para tratar el error */
function handleError(err){
	console.log(`Request failed: ${err}`)
}

/*llamada al metodo get */
get('https://www.swapi.co/api/people/1/', function onResponse(err, luke){ //llama al método get y le manda la URL y el mètodo callback, err va a ser el error que le responda el método get, y luke es el JSON en caso de no haber error
	if(err) return handleError(err) //pregunta si hay un error
	/* Para traer el mundo */
	get(luke.homeworld, function onHomeworldResponse(err, homeworld){ //hace otra llamada a get, le manda la URL donde estan los mundos (luke.homeworld) y la funcion callback
		if(err) return handleError(err)

		luke.homeworld = homeworld //"homeworld" es la respuesta en JSON
		console.log(`${luke.name} nació en ${luke.homeworld.name}`)
	})
	console.log(`Request succeded`)
	console.log('luke', luke)
})```

Daniel Orio Islas

student•

No me agrado esta clase, entiendo que en la práctica no se usa tanto el código puro y los request son mas fáciles con librerias pero si el objetivo es que aprendamos como funciona desde fondo, creo que deberían profundizar más en el tema, de pronto Sacha empieza a explicar muy rápido intuyendo que todos sabemos lo que hace y su explicación es muy simple para los que vamos empezando

Victor Alfonso Caballero Cabrera

student•

Como que tengo que volver a repetir unas cuantas veces esta clase xD.

Ezequiel Miguel Brandan

student•

yo tambien, es la segunda vez q la veo y todavia me cuesta entender varias cosas…

Angel Enrique Barrios

student•

Entonces me perdi :S

Camila Di Virgilio

student•

ya somos dos jajaja

Noe Mikhael Huaccharaque Ruiz

student•

//Que es un callback? Un callback es una función que tiene de parámetro otra función
// Que vamos a escribir? “luke stkalwalquer nacio en tatooine” con callbacks de una api Externa
// Como lo hacemos? Con ayuda de codeopen, ya que esto es necesario tener un servidor nodejs
//Codigo nesesario para hacer un request de tipo “http” sin utilizar ninguna libreria (Jquery, angular…etc)

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
	const DONE = 4
	const OK = 200
	if(this.readyState == DONE){
      if(this.status == OK){
      	// todo ok
      }
      	else{
      		// hubo un error
      	}
      }}
		xhr.open('GET', URL)
		xhr.send(null)

Antonio Martínez

student•

Queda claro que el profesor sabe mucho de javascript, pero esta clase sirve para eso… para demostrarnos que es un experto… pero no está enfocada bien porque puede generar mucha confusión… se lanzan muy livianamente conceptos que pueden resultar muy complicados para mucha gente.
Además, veo necesario que esto se vea aplicado a una aplicación que sea más real y que pueda parecer más claro. Porque lo de la recuperación de datos de Star Wars me parece una gran tontería.

Nicole Chapaval

Team Platzi•

Hola Antonio, gracias por el comentario. Hay algún concepto particular que puedas mencionar que no te quedó claro, o una pregunta específica? Esto nos sirve para ayudarte en tu proceso de aprendizaje, y también para ver si creamos algún material adicional que pueda ayudar a aclarar dudas.
Por otro lado, ten en cuenta que en los cursos utilizamos proyectos de ejemplos, pero tu puedes aplicar los conocimientos en lo que estés trabajando. EL contenido realmente no hace mucha diferencia, pero te agradezco por mencionarlo.

Martin Ezequiel Cabello

student•

El codigo del ejemplo tiene algunos errore de tipeo. Adjunto el correcto:

		function get(URL, callback){
			const xhr = new XMLHttpRequest();

			xhr.onreadystatechange = function () {
				const DONE = 4
				const OK = 200
				if (this.readyState === DONE) {
					if(this.status === OK){
						//Todo OK
						callback(null, JSON.parse(this.responseText)) //Primer parametro del callback es el error. Si hubo error incluirlo aca. El segundo parametro es el resultado. Esto es por convencion para los callbacks
					}else {
						//Jubo un error
						callback(new Error(`Se produjo un error al realizar el request ${this.status}`)) //Es lo mismo que poner xhr.status( this.status)
					}
				}
			}

			xhr.open('GET', URL);
			xhr.send(null);
		}

		/* Funcion para tratar el error */
		function handleError(err){
			console.log(`Request failed: ${err}`)
		}


		/*llamada al metodo */
		get('https://www.swapi.co/api/people/1/', function onResponse(err, luke){
			if(err) return handleError(err)

			/* Para traer el mundo */
			get(luke.homeworld, function onHomeworldResponse(err, homeworld){
				if(err) return handleError(err)

				luke.homeworld = homeworld
				console.log(`${luke.name} nació en ${luke.homeworld.name}`)
			})

			console.log(`Request succeded`)
			console.log('luke', luke)
		})```

Antonio Daniel García Guerrero

student•

El código con el que empieza el vídeo.

const xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  const DONE = 4
  const OK = 200
  if (this.readyState === DONE) {
    if (this.status === OK) {
      //TODO OK
    } else {
      //hubo un error
    }
  }
}

xhr.open('GET', URL);
xhr.send(null);

Iván Darío Sánchez Jiménez

student•

Aportando a la dinámica del ejercicio dejo el siguiente request que muestra todas las películas en las que aparece Luke Skywalker

get('https://www.swapi.co/api/people/1/', function onResponse(err, luke){

	if(err) return handleError(err)

	/* Para ver todas las peliculas donde ha aparecido */
	luke.films.forEach(function(film){

		get(film, function(err, filmluke){

			if(err) return handleError(err)
        
        	console.log(`Las películas donde aparecen ${luke.name} son: \n ${filmluke.title} Episodio ${filmluke.episode_id} y su lanzamieto fué el ${filmluke.release_date}`)
    	})
    })	
})

Noe Mikhael Huaccharaque Ruiz

student•

Porque los valores de “DONE” y “OK” son 4 y 200 respectivamente? algo en especial?

Diego Forero

Team Platzi•

Es parte de la definición, el 200 es el estatus http para indicar que todo esta bien asi como el 404 indica pagina no encontrada o 403 que no tiene permisos para acceder a la pagina.

El 4 es igual una definición para indicar el estado de la conexión ajax.

Juan

student•

Esta clase la verdad no entendi nada lo mire dos veces, no explica los conceptos arranca como si ya sabemos, la verdad platzi me decepcionaste en esta, yo estoy arrancando con esto de cero, creo que muchos tambien, uno entiende que tiene que ser autodidacta en programacion pero tampoco asi.
Sacha explica bien pero en esta clase estuvo flojo. Las anteriores estuvo mucho mejor.

Diego Forero

Team Platzi•

Hola, creo que tu problema es el que han tenido muchos en esta clase y es el código que tenia sacha ya preparado para hacer la petición ajax, en esta clase no te debes preocupar por esa parte de código lo que debes entender es como se manejan los callbacks y en el siguiente video las promesas, el request ajax no te debe importar en esta clase, es solo parte del ejemplo.

Callback a un servidor externo

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial