Obteniendo una respuesta del servidor con Fetch API

Clase 30 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

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:

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

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

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:

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í

Á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 ()
at RelativeFormat.format ()
at render ()
at pictureCard ()
at
at Array.map (native)
at module.exports ()
at
at
at nextEnter ()

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');

Obteniendo una respuesta del servidor con Fetch API

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