Callbacks

Clase 33 de 55 • Fundamentos de JavaScript 2018

Resumen

En esta clase aprenderemos que son los callbacks y usaremos una librería externa que se llama jQuery.

Un callback es una función que se pasa a otra función como un argumento. Esta función se invoca, después, dentro de la función externa para completar alguna acción.

Juan Fernando Ramírez Vélez

student•

Por que no hacemos este mismo ejemplo con javascript puro? no veo sentido usar JQuery en este curso

Jose Fabian Benavides Moreno

student•

Adin Herrero

student•

Porque estamos utilizando un módulo llamado AJAX (Asynchronous JavaScript And XML) que viene dentro de JQuery, de otra manera tendríamos que recurrir a algo mas complejo llamado XHTTPRequest, que de paso menciono, es mucho más complejo y difícil de implementar.

María José Ledesma

student•

Raundy Ibarras

student•

Gracias por el aporte!

Miguel de la Rosa

student•

Me gustan mucho tus apuntes! Los mios estan bien feos jaja

Pablo Andres

student•

Resumen de la Clase
Callbacks

Qué son?
Cómo son?
Cómo los utilizo?

Utilizaremos una librería externa, jQuery, con un fin específico que es el de realizar un request y obtener datos de una API externa. Utilizamos la versión CDN de JQuery.
Nota: un CDN es un Content Delivery Nerwork. Un servidor en el planeta que nos va a conectar con la versión de jQuery más cercana a nuestra locación.

La API que usaremos es la de Star Wars.
Implementamos la llamada a la librería jquery.minified en el html antes de llamar nuestro archivo de funciones. Este lo usaremos para hacer requests a la api de ‘swapi.co’.

Realizamos el request. En este caso:

	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(){ })

Donde:

API_URL es la URL de la api
PEOPLE_URL es un folder interno de la API, people/ en este caso y ‘:id’ se escribe para después hacer un .replace() por cada id
$.get es el método de jQuery para realizar el callback. (Referencia http://api.jquery.com/jQuery.get/)

Los parámetros del $.get son 3 separados por ‘,’:

URL: es el URL completo, en este caso tenemos que encadenar API_URL con PEOPLE_URL y a esta segunda remmplazarle el :id por el id de cada personaje.
```
  const URL = `${API_URL}${PEOPLE_URL.replace(':id', 1)}` // 1 es id de Luke
```
Este segundo parámetro es un objeto que le indica al método si el callback es local o remoto.
```
  const opts = {crossDomain: true}
```
Y por último el callback. Es una función que será invocada en algún futuro por el método $.get cuando termine de establecer la conexión remota, el request a la URL. Es una función anónima nativa de jQuery. Referencia: http://api.jquery.com/jQuery.get/
```
  jQuery.get( url [, data ] [, success ] [, dataType ] )
```

Los parámetros, a parte de la referencia de jQuery podemos verlos haciendo un console.log de arguments:

$.get( URL, opts, function(){
	console.log(arguments)
})

arguments es una variable que nos va a dar un array con los parámetros que recibe la función.
En este caso:

	Arguments(3) [{…}, "success", {…}, callee: ƒ, Symbol(Symbol.iterator): ƒ]
	0: {name: "Luke Skywalker", height: "172", mass: "77", hair_color: "blond", skin_color: "fair", …}
	1: "success"
	2: {readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
	callee: ƒ (persona)
	length: 3
	Symbol(Symbol.iterator): ƒ values()
	__proto__: Object

Vemos que el parámetro que nos devuelve los resultados de la API es el primero [,data].
Entonces el callback quedaría así:

	$.get( URL, opts, function(data){
		console.log(data.name)
	})
	// Luke Skywalker

Donde ‘data’ puede ser reemplazado por el argumento que querramos

	$.get( URL, opts, function(personaje){
		console.log(personaje.name)
	})
	// Luke Skywalker

Por último generamos una constante a partir de la función:

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

	const URL = `${API_URL}${PEOPLE_URL.replace(':id', 1)}`
	const opts = { crossDomain: true }
	const onPeopleResponse = function (personaje) {
		console.log(personaje.name)
	}

	$.get(URL, opts, onPeopleResponse)

Facundo Nicolás García Martoni

teacher•

Impecables tus resúmenes, los uso en mis apuntes 👏👏👏

Thais Hernández López

student•

WOW!, genial resumen me encanta!!!!

jose zuñiga

student•

Bueno como veo que hay varios comentarios mostrando su malestar por no hacer la explicación de Callbacks usando vanilla, he fabricado este código a modo de guía por si alguno los quiere probar.
Para los que se sienten confundidos tranquilos, lo mas importante de esta clase es entender muy bien que un callback. Un callback es una función que se ejecutara solo cuando otra la llame, esta llamada solo ocurre cuando la primera logra ejecutar una acción. Si aún es confuso regresen a la clase 28. Funciones como parametros, probablemente requieran repasar de nuevo.
Las clases de programación orientada a objetos y las de asincronismo son bases fundamentales. Les recomiendo revisarlas hasta que los conceptos sean claros. Repito los conceptos, los códigos seguramente los encontraran en diferentes paginas de internet.

//Direcciones de mi servidor, osea la api de star wars
const API_URL = 'https://swapi.dev/api/'
const PEOPLE_URL = 'people/:id/'
const lukeUrl = `${API_URL}${PEOPLE_URL.replace(':id',1)}`

//Creo una función que al ser ejecutada inicie mi petición request
function traerDatos(){
    //Instancio un objeto de tipo request en el cual almacenaremos
    //las respuesta o información de la petición
    var objetoRequest = new XMLHttpRequest; 
        
    //Para hacer un request a un servidor usamos los metodos .open() y .send()

    //Para el metodo open se requieren tres parametros
    //1. Definir si queremos obtener datos 'GET' o enviar datos 'POST'
    //2. Definir la ruta del archivo o la api con quien nos queremos comunicar
    //3. Definir si el procesos sera asincrono o sincrono, en este caso asincrono = true
    objetoRequest.open('GET', lukeUrl, true);

    //El metodo send() envia la solicitud a nuestro servidor o archivo externo
    //send() para get y send(string) para POST
    objetoRequest.send();
    //Si el objeto ha tenido un cambio se ejecuta una funcion este es el callback, 
    //esta funcion hace hasta 4 verificaciones para tratar de obtener comunicacion con el servidor
    objetoRequest.onreadystatechange = function () {
        //Esta es una comprobacion, la primera .readyState es si logramos o no el request al servidor = 4
        //Si logramos ejecutarlo
        //la segunda es el estado .status si todo esta OK sera igual a 200
        if(this.readyState == 4 && this.status == 200){
            //Los datos se retornan como un archivo Json en el atributo responseText
            //es necesario cambiarlos a un objeto para que sea mas facil manipularlos
            var personaje = JSON.parse(this.responseText);
            console.log(typeof(personaje))
            console.log(`Hola yo soy, ${personaje.name}`)
        }
    }
}
//Invocamos nuestra función de request
traerDatos()

Fuentes para fabricar el código:

https://www.w3schools.com/xml/ajax_xmlhttprequest_send.asp

https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=924:xmlhttprequest-ajax-propiedades-status-onreadystatechange-readystate-responsetext-o-xml-cu01207f&catid=83&Itemid=212

https://es.stackoverflow.com/questions/1648/c%C3%B3mo-puedo-convertir-un-string-json-a-un-objeto-en-javascript

Bernardo Aguayo Ortega

student•

gracias bro, te la rifas

Moisés Abraham Croes Gómez

student•

Gracias @jzuniga123! te quedó excelente el ejemplo ;)

Erick Sánchez Noguerón

student•

Con Vanilla JS :D

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

fetch(`${URL}${PEOPLE_URL.replace(':id',1)}`)
.then((response)=>response.json())
.then((persona)=>{
    console.log(`Hola yo soy ${persona.name}`)
})
.catch( error=> console.error('Error: ', error))

Jimmy Ugalde Mora

student•

ese "catch" es como un try?

Erick Sánchez Noguerón

student•

Hola, ese la función catch se ejecutara en caso de que ocurra un error. Su función es similar a la de un catch en un try and catch,

Jhonanderson Tellez Parra

student•

mi navegador sigue bloqueado con el experimento e la clase anterior XD

Eliaz Bobadilla

student•

Leonardo David Martinez Hernandez

student•

No me pude contener XD

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


const lukeUrl = `${API_URL}${PEOPLE_URL.replace(':id',4)}`
const opts = { crossDomain: true }

const onPeopleResponse = function (persona) {
  console.log(`Hola soy ${persona.name} YO SOY TU PADRE`)
}

$.get(lukeUrl, opts, onPeopleResponse)

Oscar Martinez Suarez

student•

Yo tampoco pude.

Jhoan Sebastian Rodriguez Sanchez

student•

No me gusto la parte en que se implementa JQUERY, osea como asi n se supone que hay un curso de Jquery to Javascript jquery ya murió javascript vanilla evoluciono!!!!!!!!!!!!!!!!

Daniel Alejandro Romero Chavez

student•

Hola Jhoan, estoy muy deacuerdo con que no se debe usar JQUERY, sin embargo el usar JS puro para estos ejemplos implica usar fetch, promesas, resoluciones y async/await, las cuales se enseñan en clases posteriores.

También hay que tomar en cuenta otra cosa y es que sucede que este curso no es original de la Escuela de JS sino que tiene un año aprox y por esas fechas tambien se lanzo el curso de JQUERY a JS que lo que pretende es obviamente dejar su uso.

Tampoco es correcto satanizar una tecnología porque podría ser el caso que te toque hacer un mantenimiento a una aplicación que la use, por lo que al no conocerla solo podrás rechazarla porque la desconoces o aceptar y aprenderla.

Como recomendación piensa en Jquery como Bootstrap, este se puede evitar usando CSS puro pero ahorra tiempo para desarrollos de prueba o muestras de un MVP o maquetación simple, pero claro al evitar su uso optimizas tu aplicación al no depender de librerías de terceros. 😀

rusbel bermúdez rivera

student•

en palabras de Freddy JQuery esta muerto.

Javier Gomez Velasco

student•

Hice un buscador sencillo usando la api, solamente regresa el nombre de lo que quiera buscar el usuario (planeta, nave, personaje) por medio de su id

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const PLANET_URL = 'planets/:id'
const STARSHIPS_URL = 'starships/:id'


const opts = {crossDomain : true}

var queBuscar = prompt('Ingresa lo que deseas buscar, personaje, planeta o nave')
var id = prompt('Ingresa el id a buscar')

switch(queBuscar){
	case 'Planetas':
	case 'planetas':
		queBuscar = PLANET_URL
		llamada(queBuscar, id)
	break

	case 'personaje':
	case 'Personaje':
		queBuscar = PEOPLE_URL
		llamada(queBuscar, id)
	break
	case 'nave':
	case 'Nave':
		queBuscar = STARSHIPS_URL
		llamada(queBuscar, id)
	break

	default:
		console.log('Lo que buscas no lo tenemos :(')
}

var cadena =  remplazoCadena(queBuscar)

function remplazoCadena(queBuscar){
	var cadena = ''
	if(queBuscar===PLANET_URL){
		cadena = 'al planeta'
	}

	if(queBuscar === PEOPLE_URL){
		cadena = 'al personaje'
	}
	if (queBuscar === STARSHIPS_URL){
		cadena = 'la nave'
	}
	return cadena

}


function llamada(queBuscar, id){
	const searchUrl = `${API_URL}${queBuscar.replace(':id',id)}`
	$.get(searchUrl, opts, onResponse = function(data) {
		console.log(`Estas buscando ${cadena} ${data.name}`)
	})
}

Jhon Carlos Colorado Angulo

student•

Hola @xjgv5 hice el buscador con menos código. Miralo a ver que tal.

const API_URL = 'https://swapi.co/api/'
const PEOPLE_URL = 'people/:id'
const PLANET_URL = 'planets/:id'
const STARSHIPS_URL  = 'starships/:id'

const opts = { crossDomain: true }

var cadena = ''
var queBuscar = prompt('Seleccione que lo desea buscar \n 1. Persona \n 2. Planeta \n 3. Nave')
var id = prompt('Ingrese el id a buscar \n Tenga en cuenta que son números enteros\n Ejemplo: 5')

switch (queBuscar) {
    case '1':
        queBuscar = PEOPLE_URL
        cadena = 'La persona'
        search(queBuscar, id, cadena)
        break;
    case '2':
        queBuscar = PLANET_URL
        cadena = 'El planeta'
        search(queBuscar, id, cadena)
        break;
    case '3':
        queBuscar = STARSHIPS_URL
        cadena = 'La nave'
        search(queBuscar, id, cadena)
        break;

    default:
        console.log(`La información que ingresaste es incorrecta`)
        break;
}

function search(queBuscar, id, cadena) {
    const lukeurl = `${API_URL}${queBuscar.replace(':id', id)}`

    $.get(lukeurl, opts, function onSearchResponse(data) {
        console.log(`Estas buscando ${cadena}: ${data.name}`)
    } )
}```

Jose Daniel Molina

student•

Para que sirve el crossDomain: true?

Jesus David Duarte

student•

si quieres puedes no incluirlo e igual seguira funcionando

Edgar Ramirez

student•

porque crossDomain: true ? no entendi muy bien =/

Edgar Ramirez

student•

buenisimo! muchas gracias

Never Andrés Aparicio Hernandéz

student•

les comparto mis apuntes

const API_URL = 'https://swapi.co/api/'//aca llamamos a la pagina api 
const PEOPLE_URL = 'people/:id'//aca seleccionamos la persona en la pagina puedes mirar que tambien puedes seleccionar otra cosa como planets o starship 

const lukeUrl = `${API_URL}${PEOPLE_URL.replace(':id', 3)}`//aca seleccionamos la persona en este caso es peopple3
const opts = { crossDomain: true }//este sirve para intercambiar datos entre dos paginas 

const onPeopleResponse = function (persona) {
    console.log(`Hola yo soy, ${persona.eye_color}`)//aca colocamos eye_color puedes elegir otra cosa name gender etc  mira en la api se muestra en la pagina   
}

$.get(lukeUrl, opts, onPeopleResponse) //traemos la funcion con jquery https://api.jquery.com/jQuery.get/ aca puedes mirar la documentacion en este caso es el succes

Julian Carelli

student•

Muchas gracias por el aporte :)

Platzi Team

student•

Aquí les comparto otra manera de hacerlo, con un método nativo de JavaScript. Espero puedan probarlo y añadirlo a sus conocimientos. ![](

José de Jesús Uscanga Molina

student•

En que parte de la documentación leiste que fetch soportaba en sus opciones crossDomain

William Wilfredo Moran Torres

student•

una consulta como haces esa ventana???

Usuario anónimo

user•

Veo que muchos compañeros están dando por hecho de que las peticiones se hacen solo con jQuery.

Hay que tener presente que este es un ejemplo para entender que son los Callbacks, no se fijen en si se hace con jQuery, ya que hay diferentes métodos de hacer llamados a APIS.

Lo importante de esta clase es quedarnos con los comentarios sobre los callbacks y no precisamente sobre como funciona jQuery.

Callback

Es una función que va a ser ejecutada en algún futuro, no sabemos cuando
Se puede ejecutar o no en algún futuro
Cuando termine el request se va a llamar con los datos qeu envie el request de respuesta
Puede que el request nunca se ejecute y la función callback nunca se llame
Es una función que pasamos por parametro y que se va a ejecutar una vez termine la respuesta.

Santiago Herrera Velásquez

student•

Teniendo en cuenta esto el "callback" del ejemplo con jquery seria la funcion "onPeopleResponse" no?

Alberto Flores

student•

//En esta clase lo que se hace es obtener datos de una api en especifico de la api de star wars
const API_URL = 'https://swapi.dev/api/'

//con esto lo que hacemos es guardar en la dirección de la api
const PEOPLE_URL = 'people/:id/'
//y con esta la dirección dentro de la api en donde vamos a obtener los resultados

const lukeUrl = `${API_URL}${PEOPLE_URL.replace(':id', 1)}`
//Con esta constante unes las dos URL para formar la dirección completa de la api, con .replace(':id', 1) 
//esta remplazando los :id por el id de personaje que se va a obtener que en este caso es el personaje 1

const options = { crossDomain: true }
//Cross Domain significa que los sitios harán un intercambio de datos, 
//es decir, tú envías ciertos datos y el otro dominio te responderá con otros datos según lo que hayas pedido.

const onResponse = function (luke) {
    console.log(`Hola yo soy ${luke.name}`)
}
//Al momento de obtener los datos se va a ejecutar onResponse, esta función obtendrá el firstNamedel personaje de data
//y lo imprimirá en consola

$.get(lukeUrl,options,onResponse)```

Josué Eduardo Apén Bal

student•

¿Alguien puede explicarme qué significa esta linea? Es lo único que no entendí.

<code>

const opts = { crossDomain: true}

Nicolás Arias González

student•

En general, un request Ajax a un dominio diferente del que estás visitando en este momento es bloqueado por el navegador por motivos de seguridad. Esto se llama Same Origin Policy o SOP.

El servidor puede configurarse para que reciba requests de dominios diferentes al propio con una funcionalidad llamada Cross Origin Resource Sharing o CORS.

Con esta línea, le estamos indicando al navegador que queremos hacer un request a un dominio diferente del nuestro, y si el servidor lo permite, el request termina como lo esperas.

Según la documentación de JQuery (https://api.jquery.com/jquery.ajax/), el valor se pone por defecto en true si vas a hacer una petición a otro dominio, por lo que esta línea no es realmente necesaria para que funcione pero hace más claro que el recurso que se va a consultar no está en el mismo dominio.

Te dejo la parte relevante de la documentación por si te da curiosidad:

crossDomain (default: false for same-domain requests, true for cross-domain requests) Type: Boolean If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true. This allows, for example, server-side redirection to another domain. (version added: 1.5)

Josué Eduardo Apén Bal

student•

¡Viejo! Qué increíble aporte, me ayudaste muchisimo. ¡Muchas gracias!

Ivan Santiago

student•

Les recomiendo el curso de jQuery para aprender a hacer esto solo con JavaScript 😄

Freddy Córdova Arana

student•

Yo apoyo esta recomendación

Emerson Cedeño

student•

te refieres al curso de jQuery a JavaScript, o hay otro?

Mauricio Lopez Agudelo

student•

Hola, quién me podría explicar el funcionamiento del crossDomain y porque se le da un value de true, gracias.

Diego Forero

Team Platzi•

@Jcion si el API no tiene restricción de CORS entonces no es necesario que pases el valor, muchas veces se hace como buena práctica para evitar problemas pero no siempre es necesario.

Adrian Guerrero

student•

Usar el replace no me convence, yo hice esto

const API_ID = id  => `people/${id}`

Carmen Sánchez Salgado

student•

Buen tip, gracias! y se llama así:

const lukeUrl = `${API_URL}${API_ID(1)}`

Adrian Guerrero

student•

Anthony Andrés

student•

Cuando piden en los trabajos "Conocimiento de consumo de API" se refiere a esto? De ser así, FAIL, creí que era algo más dificil y no queria aprenderlo porque tenia miedo jajaja

lesier gg

student•

Jajajaja si.

Ian Mande

student•

Van a estrenar un curso de API REST por si te interesa

Callbacks

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?