Obteniendo una respuesta del servidor con async/await

Clase 31 de 46 • Curso Definitivo de JavaScript 2016

Contenido del curso

Bienvenidos

1
¿Qué necesito para tomar el curso?
00:10 min

Materiales

2
Descarga el código del proyecto
00:10 min

Conceptos Básicos

Construyendo nuestro proyecto

Conclusiones

Sesiones en Vivo

Complementos del curso

Tomar examen

Comentarios

María del Carmen Martín Gómez

student•

*Nota

npm i --save-dev babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-preset-es2015

Oliver Amezquita Morales

student•

asi es; npm i --save-dev babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-preset-es2015

Oliver Amezquita Morales

student•

npm i --save-dev babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-preset-es2015

Gabriel Alejandro Nuñez Natera

student•

La respuesta de fetch es una promesa, y esta se puede tratar de la misma forma que la misma solicitud de fetch:

try
{
  const res = await fetch('/api/pictures')
  const pics = await res.json()
  // El contexto de los middlewares se utiliza para compartir informacion entre ellos
  context.pictures = pics
  // Llama al siguiente middleware
  next()
}
catch (err)
{
  return console.log(err)
}

Saludos 😃

Juan Diego Silva Garcia

student•

Si, tienes razón pero eso fue hace un año que ES6 todavía no tenia soporte en los navegadores para async/await

Heiler Joel Finol Valbuena

student•

Exacto, No tuve que incluir esas dependencias para que lograra ejecutarse sin errores. ES2017 soporta async/await.

JESUS ALBERTO LOPEZ VILLATORO

student•

en consola obtuve el error
regeneratorRuntime is not defined

lo solucione incluyecndo en el archivo de la carpeta raiz
.babelrc

{
  "presets": ["es2015"],
  'plugins': [
    'transform-regenerator'
  ]
}

y requiriendo regeneratorRuntime en el archivo donde esta la funcion async

let regeneratorRuntime =  require("regenerator-runtime");

Ren Marc

student•

Hola Jesus!

me ha pasado lo mismo. Ya está solucionado. ¿podrías explicarme cómo llegaste a esa solución?
pdta: el .babelrc no fue necesario en mi caso.

JESUS ALBERTO LOPEZ VILLATORO

student•

Hola Rene
Busque el error en google y dan muchas soluciones pero esa me funciono ami
tu como lo solucionaste? solo con

let regeneratorRuntime = require('regenerator-runtime"')

Kevin Lozoya Giner

student•

Hola chicos, dentro de poco van a sacar el nuevo curso definitivo, pero mientras tanto, aquí dejo la configuración que utilizo para transpilar el código y utilizar el async-await

EN EL GLUPFILE

browserify('./src/index.js')
    // transformamos el código con babel
    .transform(babel, {presets: ['env']})
    // creamos el bundle
    .bundle()
    // convertimos de browserify a gulp para que pueda seguir procesando el archivo
    .pipe(source('index.js'))
    // renombramos el nombre del archivo original
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'))

EN PACKAGE utilizo estos módulos:

"devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-polyfill": "^6.26.0",
    "babel-preset-env": "^1.6.1"
}

y el INDEX:JS PRINCIPAL, como hace Sacha

require('babel-polyfill')

Kevin Lozoya Giner

student•

ahora no hace falta descargar tanto plugin

Reinaldo Mendoza

student•

Ojala sea +Js y -libreria

Edwin Enrique Jorge Arroyo

student•

Hoy en día se usa:
npm i --save-dev babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-preset-env

La librería: es2015 es obsoleta, instalen babel-preset-env

Por lo que en el archivo de gulpfile.js (en la línea 26, teniendo en cuanta el orden de Sacha…) en vez de quedar así:

quedaría algo como:

.transform(babel, { presets: ['env'], plugins: ['syntax-async-functions', 'transform-regenerator'] })

Ramon Gajardo

student•

Soy un hincha de sus cursos,yo vengo de php como backend. me gusta mucho javacript gracias a con usted eh aprendido mucho. tengo una duda como puedo crear un servidor apache or nose . En mi trabajo actualmente usamos apache, php, mysql. osea wamp corriendo una apps web. pero ademas nos conectamos a una base de datos DB2 local por odbc todo esta bien, applicado mucho javascript aprendido de usted. pero como puedo crear un servidor no cloud profesinal, correr un apps node js backend applicar un dominio ramond.com por ejemplo Gracias.

Sacha Lifszyc

teacher•

cuando programas en node.js también estás programando el mismo servidor.
eso, como programador te da un gran poder y conlleva una gran responsabilidad: la performance.
en la segunda parte de este curso veremos más sobre esto, mientras tanto te recomiendo que tomes los cursos de node.js que tenemos acá en Platzi ;)

Luis Alfredo Locon Peña

student•

NOTA

El polyfill hay que instalarlo como dependencia, no como una devDependency porque va a hacer correr el codigo en cualquier navegador.

$ npm install --save babel-polyfill

Victor Hugo Cortés Posada

student•

El error en consola:
Uncaught ReferenceError: regeneratorRuntime is not defined
También lo pueden solucionar agregando en src/index.js

require('regenerator-runtime/runtime');

Juan Sifontez

student•

Tuve un error en consola el cual fue:

regeneratorRuntime is not defined

lo solucione incluyendo en el archivo de la carpeta raíz .babelrc

{
  "presets": [
    ["env"]
  ],
  "plugins": [
    ["regenerator-transform", "transform-runtime"]
  ]
}

y en src/index.js requerí el archivo regenerator-runtime/runtime de la siguiente manera:

var page = require('page');
require('regenerator-runtime/runtime');


require('./footer');
require('./signup');
require('./signin');
require('./homepage');

page();

Platzi Team

student•

2018 😃

Reinaldo Mendoza

student•

2021

Usuario anónimo

user•

Pregunta, si se da el caso que estaba explicando sacha de que queremos hacer varios then como lo hariamos con async await?

Sacha Lifszyc

teacher•

async function miFuncion() {

  try {

    const res1 = await  (res =>  )

    const res2 = await miPromesa2(res1)

    return res2

  } catch (e) {

     handleError(e)

Liz Villegas Villegas

student•

Duda, no entendi bien para que necesitamos esta ruta? '/api/pictures' veo en el dom que las imagenes estan en public.

David Gómez

student•

Para simular que se piden del servidor, sin embargo, como apenas se está simulando, en el archivo server.js se están devolviendo "quemados" los objetos JSON que tienen toda la información de cada tarjeta: la imagen, el avatar, la cantidad de likes, etc. cuando se hace el get a esta ruta

Yonathan Gutierrez

student•

caray, el mejor profesor, respeto total Sacha :)

Daniel Hernández

student•

porque en las peticiones a modo de promesa cuando hay un error se hace solamente un

console.log(err)

y con callbacks se hace

return console.log(err)

Sacha Lifszyc

teacher•

porque con los callbacks si no hacemos un return, la ejecución sigue, queremos cortar esa ejecución con el return pero no es que nos interese devolver el valor del console.log(err)
sería lo mismo hacer:

console.log(err)  
return;

en cambio en las promesas el manejo del error está separado de la lógica de éxito

Francisco Jose

student•

npm i --save-dev babel-plugin-syntax-async-functions babel-plugin-transform-regenerator babel-preset-es2015

Para el polyfill:
npm install --save babel-polyfill

Carlos Raez

student•

Hola ya no haria falta esas librerias no? porque node ya lo lleva nativo el async await-…

Gracias!

Reinaldo Mendoza

student•

sep

Evert Escalante

student•

Al dia de hoy 09/09/2018 no es necesario incluir todas esas librerias

podemos hacer el request con async, await y en el index.js de src, hacemos el siguinte require para solucionar el problema del regenerator runtime

require('regenerator-runtime/runtime');```


asi nuestro proyecto continua

Reinaldo Mendoza

student•

Gracias por aclaralo, justo estaba pensando en eso

Rafael Villarreal

student•

buenas, alguien sabe por que ocurre este error con npm, llevo rato buscando y no hay información útil. Me sale con cualquier libreria que intente instalar.

TypeError: glob.hasMagic is not a function
npm ERR! at rimraf (/usr/lib/nodejs/rimraf/rimraf.js:61:36)
npm ERR! at gentlyRm (/usr/share/npm/lib/utils/gently-rm.js:29:12)
npm ERR! at /usr/share/npm/lib/unbuild.js:31:20
npm ERR! at /usr/lib/nodejs/read-package-json/read-json.js:51:40
npm ERR! at ReadFileContext.<anonymous> (/usr/lib/nodejs/read-package-json/read-json.js:97:49)
npm ERR! at ReadFileContext.callback (/usr/lib/nodejs/graceful-fs/graceful-fs.js:78:16)
npm ERR! at FSReqWrap.readFileAfterOpen [as oncomplete] (fs.js:303:13)
npm ERR! If you need help, you may report this entire log,
npm ERR! including the npm and node versions, at:
npm ERR!

Edwin Anciani

student•

Ese es todo el error? … o hay en algun lado que diga algo de Permisos?

try
{
  const res = await fetch('/api/pictures')
  const pics = await res.json()
  // El contexto de los middlewares se utiliza para compartir informacion entre ellos
  context.pictures = pics
  // Llama al siguiente middleware
  next()
}
catch (err)
{
  return console.log(err)
}
  	

browserify('./src/index.js')
    // transformamos el código con babel
    .transform(babel, {presets: ['env']})
    // creamos el bundle
    .bundle()
    // convertimos de browserify a gulp para que pueda seguir procesando el archivo
    .pipe(source('index.js'))
    // renombramos el nombre del archivo original
    .pipe(rename('app.js'))
    .pipe(gulp.dest('public'))

Obteniendo una respuesta del servidor con async/await

Bienvenidos

¿Qué necesito para tomar el curso?

Materiales

Descarga el código del proyecto

Conceptos Básicos

Bienvenidos al curso de definitivo de JavaScript

¿Por qué JavaScript?

Construyendo nuestro proyecto

Construyendo la primer página de Platzigram

Introducción a Node.js y Npm

Inicializando nuestro proyecto con Npm

¿Qué son los gestores de paquetes?

Package bundling con gulp y sass

Agregando vistas con Pug

Sirviendo archivos estáticos con Express

Organizando nuestros assets y agregando un favicon

Fix para agregar JavaScript en el cliente

Agregando JavaScript en el cliente

Agregando navegación con Page.js

Automatizando el build

Agregando interfaces de usuario con Yo-yo

Modularizando nuestro proyecto

Agregando la página de /signin

Cambiando el título de la página

Agregando un timeline para los usuarios

Agregando las imágenes de los usuarios al timeline

Agregando la funcionalidad de like

Agregando la fecha de publicación

Utilizando FormatJS para internacionalizar las fechas

Utilizando FormatJS para internacionalizar los textos

Cambiando el idioma y almacenándolo en localStorage

Obteniendo una respuesta del servidor con Superagent

Obteniendo una respuesta del servidor con Axios

Obteniendo una respuesta del servidor con Fetch API