Tutorial para principiantes de API web + Cómo comenzar rápidamente

Esto es lo que parecía cuando comencé a aprender a trabajar con API.

Entonces, ¿quieres usar una API?

Si estás leyendo esto, es probable que hayas buscado algo como:

"¿Cómo uso una API?"
"¿Qué biblioteca uso para una API?"
"¿Qué es una API?"
"Por favor, ayúdenme, estoy atrapado en la API de la aplicación Weather de freeCodeCamp y no sé lo que estoy haciendo".

Bueno, estoy a punto de hacerte la vida 100 veces más fácil porque estaba exactamente en el mismo barco que tú.

Así que sigue, porque después de leer esto, te prometo que entenderás exactamente qué es una API y cómo interactuar con una.

Lo primero es lo primero.

Necesitamos entender qué es un objeto.

Sé que has visto algo como esto.

Parece familiar? Sí, lo sé, probablemente una de las primeras cosas que has aprendido en tu viaje de JavaScript.

Bien, ¿cuál es tu punto? ¿Qué tiene esto que ver con algo?

¿Notas algo sobre este objeto? No es una pregunta capciosa.

¿Qué te está diciendo este objeto?

Err, ¿es un objeto llamado persona? Tiene claves y valores ... ¿y qué?

Buen comienzo.

¿Qué más dice? ¿Qué te dice exactamente este objeto?

¿Qué está describiendo?

Oh. Es un objeto llamado Persona. Tiene un nombre que es Mario. Una edad que tiene 22 años. Un hermano llamado Luigi. ¿Y supongo que la comida es un hongo?

¡Ahora lo estás entendiendo!

Sigamos adelante.

¿Qué hay de esto?

¿No es esa la misma mierda?

Mira más cerca.

¿No hay declaración? Como si no hubiera constante Person = ahora.

Te estás calentando ...

Las claves tienen comillas?

Exactamente.

¿Y QUÉ?

Lo que debe entender es que el primer fragmento es su objeto JavaScript cotidiano habitual, el segundo fragmento es muy similar, pero eso se llama JSON.

El punto clave más importante es saber que, en general, la API con la que trabajará siempre escupirá JSON. Esta es la clave.

El modelo mental que intento inculcar en su cerebro es que trabajar con una API es tan simple como trabajar con un objeto.

Así que volvamos al primer fragmento. Si quisiera obtener el nombre de esta Persona, ¿qué tendría que escribir?

Eso es fácil. Simplemente accedería a la propiedad de nombre a través de la notación de puntos. Podría hacer Person.name y eso me daría "Mario".

Ahora, ¿qué pasa con JSON?

Uh La misma cosa…?

Casi. La cuestión es que es solo un objeto anónimo. ¿Cómo usaríamos .name sin algo antes de la notación de punto?

¡Oye! Esa fue una pregunta capciosa. ¡No es justo!
Pero está bien. Entonces, ¿cómo lo asignaríamos?

Eso es fácil.

¿Recuerdas lo que dije antes? ¿Cómo un JSON generalmente sería una respuesta de una API?

Usemos un ejemplo práctico. Vamos a extraer datos de una API.

Continúe y ponga esto en la consola de su navegador web.

¿Que ves?

Esto se ve un poco diferente. Pero un poco más familiar que antes. Es simplemente una matriz de objetos.

¿Y si quisiera el nombre del primer objeto en la matriz?

¡Fácil! Use [0] para obtener el primer objeto y luego use .name para obtener el nombre.

Ahora lo estás entendiendo.

Bueno. Pero ... ¿cómo funciona todo esto? ¿A dónde está asignado? ¿Qué está haciendo ese código? Parece que hay muchas cosas que dejaste. ¡Estoy perdido!

Lo haré lo más simple posible. Puede que no lo entiendas completamente, pero eso llegará pronto con el tiempo.

Echemos un vistazo a una versión anotada de ese fragmento.

Y ahí tienes!

Ahora debe comprender los conceptos básicos de cómo llamar a una API y poder tomar los datos y hacer algo con ellos.

En este caso pudimos llamar a la API y ahora podemos tomar el primer objeto y console.log es su nombre.

Así que aquí está el desafío.

Quiero que tomes datos y los ingreses en el DOM.

Aquí está tu código de inicio. Simplemente copie y pegue esto en un archivo .html en su editor de texto favorito e intente completar los espacios en blanco.

¡Puntos de bonificación si usa un punto final diferente! Intenta usar el punto final / posts.