El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Obtener datos con fetch

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
Aprende el uso de fetch, el método por excelencia que posee JavaScript para conectarte con datos. Conoce cómo usarlo y cómo procesar los datos que recibas, así como los pasos necesarios para poder mostrar dichos datos en pantalla.
04:04

Transcripción

Con JavaScript podemos conectarnos a datos remotos o a archivos con datos que tengamos almacenados localmente. De hecho, esta es una característica muy recurrente en casi todos los sistemas, aplicaciones o páginas web que vayas a desarrollar. Probablemente hayas escuchado que hay muchos servicios en Internet que te ofrecen algo llamado API o "API", esto es un mecanismo para que puedas consumir sus datos. Por ejemplo, servicios como Spotify, YouTube, Flickr, etc., tienen disponible ese tipo de API y, de hecho, muchos sistemas también que no son tan públicos tendrán disponible este tipo de sistemas, para lo cual será necesario que tengas un mecanismo para conectarte. En este ejemplo en el cual vamos a trabajar tenemos, en el HTML, una sección llamada'contenedor'y un botón que dice "Traer datos". Cuando pulsemos este botón nos vamos a traer contenidos del servicio que estamos viendo de este lado, que es un servicio libre que nos va a permitir conectarnos a datos, y los vamos a mostrar dentro de este'contenedor'. Así que vamos a comenzar a conectarnos. Para esto vamos a utilizar el método llamado'fetch'. Este método llamado'fetch'va a recibir como parámetro la URL o "link" donde se encuentren todos nuestros datos. En este caso, el "link" que vamos a utilizar es este: 'jsonplaceholder. typicode. com/posts'. Una vez que nosotros entramos, una vez que lo hacemos, puedes ver que esto es un archivo de JSON, que este se genera automáticamente y está almacenado en algún lugar, en este caso en este servicio. ¿Qué vamos a hacer? Lo vamos a agregar aquí directamente entre comillas y desde aquí vamos a poder consumir toda la información. Ahora, 'fetch'trabaja en base a promesas, pero ¿qué es una promesa? Todos hemos hecho una promesa alguna vez donde a quien le hacemos la promesa se queda esperando hasta que nosotros la hagamos porque confía que en algún momento nosotros la cumplamos. Lo mismo va a suceder con los datos, los datos van a trabajar con promesas, dado que van a solicitar la información a algún servicio remoto y van a quedar a la espera de esos datos. Para poder hacer eso, vamos a utilizar un método llamado'then', que en este caso, como tú puedes ver, vamos a decir 'fetch', es decir, vamos a traernos todos estos datos y una vez que los tengas, 'then', vamos a hacer algo. En este caso tenemos que preformatear los datos y esto lo tendrás que hacer siempre que trabajes con este método. Y aquí lo que vamos a hacer es que recibimos la información'data' y la vamos a convertir en un'data. json'. Este tipo de "arrow functions" hace el retorno inmediatamente y ahora sí podremos acceder a esta información, para lo cual tendremos que usar nuevamente'then', es decir, una promesa más. Cada vez que accedemos con un'then'es como si tuviéramos acceso a una nueva promesa. Y entonces, simplemente a través de un "arrow function", voy a poder acceder a la información que yo ya tengo lista. Aquí lo que voy a trabajar es primero corregir este error que tengo aquí, listo, ya tenemos bien escrito el "arrow function", y ahora escribimos un par de llaves. ¿Esto para qué? Para poder guardar esta'data'que tenemos aquí en esta variable llamada'posts'. Lo único que hacemos allí es asignarlo, y ya que está asignado, vamos a enviarlo a esta función que tenemos preparada que se llama'mostrarDatos'. Así que solo escribimos'mostrarDatos' y le pasamos'posts'. Vamos a probarlo. Así que accedo a mi archivo, actualizo mi navegador y pulso el botón Traer datos. Una vez que yo lo pulso, vemos que traemos toda la información que habíamos visto. Tiene esta vista porque aquí nosotros tenemos un estilo ya predefinido, pero quien se encarga de mostrar toda esa información es la función'mostrarDatos', es decir, con'fetch'lo extraemos y dentro de esta función se encuentra la generación dinámica de todos los elementos utilizando el DOM. Así, entonces, ya puedes conectarte a datos remotos utilizando el método'fetch'nativo de JavaScript.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.