Obteniendo una respuesta del servidor con Fetch API

Clase 30 de 46 • Curso Definitivo de JavaScript 2016

Resumen

Archivos: https://github.com/platzi/curso-definitivo-javascript/blob/master/platzigram-24c.rar?raw=true

JUAN PABLO GOMEZ GONZALEZ

student•

una implementación polyFill es para darle funcionalidad y usarlo en los navegadores que no lo soportan... se debe realizar bajo el mismo standard o respetando su implementación nativa, ejemplo de implementaciones Fetch y en el caso de safari con Intl... si estoy bien o por favor me ayudan a entenderlo mejor? Gracias

JUAN PABLO GOMEZ GONZALEZ

student•

Para este caso al usar Fetch no funciona en safari, encontre que se debe instalar:
npm -i --save node-fetch

y luego hacer el require:
var fetch = require('node-fetch');

Adicional otro tema es que funciona pero con rutas absolutas es decir:
http://localhost:3000/api/pictures

De lo contrario aparece el error: only absolute urls are supported(…)

Como podemos resolver el tema para armar la ruta absoluta, algo como en settings con una variable global? Gracias

José Luis Ruiz Moreno

student•

A mi me paso igual en Safari no me funcionó. Lo verifique en el sitio http://caniuse.com/#feat=fetch

Lo primero que hice fue instalar la librería que menciona el profesor
npm install --save whatwg-fetch

Luego para usarla agrego en el index.js del SRC de la siguiente manera:
require(‘whatwg-fetch’)

<
var page = require('page');
require('whatwg-fetch');

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

page.start();>

Aitor Ibañez

student•

¿Que soporte tiene window.fetch entre los navegadores? Gracias!

José Luis Ruiz Moreno

student•

Acá puedes revisarlo http://caniuse.com/#feat=fetch

Fredy Bustos

student•

promises, mas info?

Diego Diaz

student•

que es redux?

Ricardo Azpeitia P.

student•

Redux is a predictable state container for JavaScript apps.

Fuente: https://github.com/reactjs/redux

Oliver Amezquita Morales

student•

para que sirve el .then

Sacha Lifszyc

teacher•

con .then podemos encadenar promesas y con el return de cada una ese valor le llega a la siguiente promesa

recuerda que estamos ejecutando código asíncrono con las promesas, es decir que no tenemos los valores en ese momento y tampoco queremos detener la ejecución de javascript en el navegador (o en el servidor) esperando la respuesta

Jesus Sandrea

student•

Y cual es la mejor manera? me refiero cual conviene mas?

Diego Forero

Team Platzi•

Fetch al momento de hacer el curso no estaba como API en todos los navegadores por eso se usan varias alternativas para que aprendas como hacerlas, por ejemplo si te dicen que tienes que dar soporte a internet explorer 10 y 11 y como estos no tiene soporte para Fetch tienes que usar otra forma para callback.

Puedes ver el soporte para Fetch por parte de los navegadores aquí https://caniuse.com/#search=Fetch

Álvaro René Sánchez Serrano

student•

¿En qué beneficia usar tecnologias nativas como fetch a superagent o axios que son dependencias de terceros?

Sergio Daniel Xalambrí

student•

Que no necesitas dependencias.

También que superagent y axios usan internamente XMLHttpRequest mientras que fetch no usa XHR por debajo, es una nueva implementación para hacer peticiones HTTP.

Daniel Hernandez

student•

No entiendo, ¿Como así que convertimos algo en un objeto JSON?

Diego Forero

Team Platzi•

un objeto json es una representación de un objeto usando la notación de json

{
	"name": "Diego",
	"username": "Gollum23",
	"hobbies": "programar"
}

este es un objeto json.

Daniel Hernandez

student•

Gracias por la aclaración

Juan Sebastian Criollo Forero

student•

Amigos una duda, me genera un error aleatorio que sale algunas veces pero que se soluciona solo, sin embargo, ya estoy cansado de que salga sin saber que es. “Uncaught SyntaxError: Unexpected identifier” es lo que me dice, al recargar varias veces se soluciona solo pero siempre en algun momento sale. Si alguien sabe de que trata le agradecería mucho

Diego Forero

Team Platzi•

Puedes compartir el error completo y el archivo que indica el error.

Juanca

student•

nunca pudesolucionar este error ayudenme jejeje

RangeError: The date value provided to IntlRelativeFormat#format() is not in valid range.
at RelativeFormat._format (http://localhost:3000/app.js:6284:15)
at RelativeFormat.format (http://localhost:3000/app.js:6142:31)
at render (http://localhost:3000/app.js:19415:157)
at pictureCard (http://localhost:3000/app.js:19425:8)
at http://localhost:3000/app.js:19338:12
at Array.map (native)
at module.exports (http://localhost:3000/app.js:19337:41)
at http://localhost:3000/app.js:19291:27
at http://localhost:3000/app.js:16614:52
at nextEnter (http://localhost:3000/app.js:16446:7)

Nestor Beltran

student•

createdAt: new Date().getTime()

Victor Hugo Cortés Posada

student•

Para los que no les funciona en navegadores de versiones anteriores, pueden hacer lo siguiente:

Instalar promise-plyfill si el navegador de forma nativa no soporta Promise.

npm install promise-polyfill --save-exact

En el archivo index.js del modulo homepage, agregar esta linea de código al inicio

import Promise from 'promise-polyfill';

// To add to window
if (!window.Promise) {
  window.Promise = Promise;
}

Ahora instalamos whatwg-fetch como indica el README de fetch en GitHub

npm install whatwg-fetch --save

en el archivo index.js de la carpeta src, agregar la siguiente linea:

require('whatwg-fetch');