Vodič za internetske API-je za početnike + Kako brzo započeti

Ovako sam izgledao kad sam prvi put počeo učiti o radu s API-jevima.

Znači, želite koristiti API?

Ako ovo čitate, vjerovatno je da ste nešto tražili uz sljedeće:

"Kako mogu koristiti API?"
"Koju biblioteku koristim za API?"
"Što je API?"
"Molim vas, pomozite mi da sam zapeo na API-u za vremensku aplikaciju freeCodeCamp i ne znam što radim."

Pa, upravo ću ti olakšati život 100 puta jer sam se nalazio u tom istom čamcu kao i ti.

Stoga slijedite dalje, nakon što pročitate ovo, obećavam vam da ćete točno razumjeti što je API i kako komunicirati s njim.

Prvo stvari.

Moramo razumjeti što je objekt.

Znam da ste vidjeli nešto takvo.

Čini se poznato? Da, znam, vjerojatno jedna od prvih stvari koje ste naučili na svom JavaScript putovanju.

Ok, što mislite o ovome? Kakve to veze ima s bilo čim?

Primjećujete li nešto o ovom objektu? Nije trik pitanje.

Što vam ovaj predmet govori?

Err, to je osoba koja se zove osoba? Ima ključeve i vrijednosti ... pa što?

Dobar početak.

Ok, što još piše? Što vam tačno govori ovaj objekt?

Što opisuje?

Oh. To je objekt koji se zove Osoba. Ima ime koje je Mario. Starost od 22 godine. Brat koji se zvao Luigi. I valjda je hrana gljiva?

Sad ga dobivate!

Krenimo naprijed

Što s ovim?

Zar to nije isto sranje?

Pogledaj bliže.

Uh, nema deklaracije? Kao da nema Const Person-a sada.

Toplije ste ...

Ključevi imaju navodnike?

Točno.

PA ŠTO?

Ono što trebate razumjeti je da je prvi isječak vaš uobičajeni svakodnevni JavaScript objekt, drugi isječak je vrlo sličan, ali to se zove JSON.

Najveća ključna točka je znati da će API koji ćete raditi s JSON-om uvijek pljuvati. Ovo je ključno.

Mentalni model koji pokušavam usaditi u vaš mozak jest da je rad s API-om jednako jednostavan kao i rad s objektom.

Tako se vratimo na prvi isječak. Ako bih htio dobiti ime ove Osobe, što bih morao napisati?

To je lako. Samo bih vlasništvu imena pristupio putem notacije točka. Mogao bih samo napraviti Person.name i to bi mi dalo "Mario".

Što je s JSON-om?

Uh. Ista stvar…?

Skoro. Stvar je u tome da je to samo anonimni objekt. Kako bismo koristili .name bez ičega prije notacije točaka?

Hej! To je bilo trik pitanje. To nije pravedno!
Ali ok. Pa kako bismo to dodijelili?

To je lako.

Sjećate se što sam prije rekla? Kako bi JSON obično bio odgovor API-ja?

Koristimo praktičan primjer. Podignemo podatke iz API-ja.

Naprijed i stavite to u konzolu web preglednika.

Što vidiš?

Ovo izgleda malo drugačije. Ali malo poznatiji nego prije. To je jednostavno niz objekata.

A ako bih želio ime prvog objekta u nizu?

Lako! Upotrijebite [0] da biste dobili prvi objekt, a zatim upotrijebite .name da biste dobili ime!

Sad ga dobivate.

U redu. Ali ... kako to sve funkcionira? Gdje je dodijeljen? Što se to radi? Čini se da je puno toga što ste odustali. Izgubljen sam!

Učinit ću to najjednostavnije što mogu. Možda ga ne shvaćate u potpunosti, ali to će uskoro doći s vremenom.

Pogledajmo označenu verziju isječka.

I evo ga!

Sada biste trebali razumjeti osnove kako nazvati API i biti u mogućnosti prikupiti podatke i napraviti nešto s njima.

U ovom slučaju mogli smo nazvati API i sada smo mogli zgrabiti prvi objekt i console.log njegovo ime.

Dakle, ovdje je izazov.

Želim da uzmete podatke i unesete ih u DOM.

Evo vašeg početnog koda. Jednostavno ih kopirajte i zalijepite u .html datoteku u svom omiljenom uređivaču teksta i pokušajte ih popuniti.

Bonusni bodovi ako koristite drugu krajnju točku! Pokušajte koristiti krajnju točku / postova.