Conexión con JavaScript usando fetch

Translator

 En las próximas lecciones, vamos a basarnos en JavaScript para hacer nuestra conexión al punto final que acabamos de crear, y ese será el que esté generando todos los datos JSON que provienen de la hoja de cálculo y usando un editor. El editor que vamos a utilizar es Visual Studio Code. Este editor es realmente fácil para poner en marcha un servidor en vivo. También puedes usar Brackets u cualquier otro editor de tu preferencia. Y configurar un servidor en vivo será realmente importante porque necesitamos ejecutarlo mediante el protocolo HTTP en lugar del protocolo de archivo para hacer nuestras solicitudes AJAX. No todas las solicitudes AJAX funcionan con el protocolo de archivo. Puedes determinar qué protocolo estás usando mirando la extensión en la dirección. Así que la primera opción será un ejemplo de ejecutarlo dentro de tu localhost, y la segunda está usando el protocolo de archivo en la barra de direcciones de tu navegador web. Queremos apuntar a usar la primera opción. Aunque esta aplicación podría funcionar, se sugiere que uses el protocolo HTTP mientras desarrollas localmente. Configurarlo es una de las razones por las que vamos a usar un servidor en vivo. Si no estás familiarizado con el servidor en vivo, hay más información disponible. Live Server es un paquete de Node que realmente te permite poner rápidamente en marcha tu máquina local dentro de tu entorno de desarrollo. Aquí tienes algo más de información sobre su uso. Las solicitudes AJAX no siempre funcionan bien con el protocolo de archivo y también por restricciones de seguridad. Así que si necesitas un servidor que funcione con las solicitudes realizadas a través de JavaScript, y eso es lo que vamos a usar, se sugiere que configures un servidor local. Si estás desarrollando localmente para hacer solicitudes en lugar de usar el objeto XMLHTTPRequest. Algunos de ustedes podrían estar familiarizados con esto. Estamos usando el nuevo método, y este va a ser `fetch`. Fetch solo requiere un argumento obligatorio, y ese será la URL desde la cual se está haciendo la solicitud. Luego devuelve una promesa que resuelve la respuesta de la solicitud. Tiene varias formas de resolver las respuestas y algunos métodos integrados. Uno de los métodos integrados es que puede devolver el contenido como un objeto JSON y luego convertirlo en un objeto JavaScript que pueda usarse dentro de tu código JavaScript. Funciona realmente bien y de manera fluida con JavaScript. Si quieres saber más sobre `fetch` y algunos de los otros métodos que cubriremos en las próximas lecciones, puedes consultar la Mozilla Developer Network. Tienen buena documentación, así como ejemplos en JavaScript. Así que, en la siguiente lección, trabajemos localmente en nuestras computadoras, configuremos una página índice, creemos un archivo JavaScript y hagamos algunas solicitudes `fetch` al punto final que estará trayendo resultados desde la hoja de cálculo de Google. Así que los datos en vivo desde la hoja de cálculo de Google. Luego continuaremos construyendo la aplicación, haciendo que los botones sean interactivos para poder votar hacia arriba o hacia abajo. Y esta información se corresponderá con lo que tenemos en nuestra hoja de cálculo. ¡Así que empecemos!