Výukový program pre začiatočníkov k webovým rozhraniam API + Ako začať rýchlo

Takto som vyzeral, keď som sa prvýkrát začal učiť pracovať s API.

Takže chcete použiť API?

Ak toto čítate, je pravdepodobné, že budete hľadať niečo podobné:

„Ako môžem používať rozhranie API?“
„Aká knižnica používam pre rozhranie API?“
„Čo je to API?“
„Prosím, pomôžte mi, že som zaseknutý v API API AppCodeCamp pre aplikáciu na počasie a neviem, čo robím.“

Chystám sa ti stokrát uľahčiť život, pretože som bol na tej istej lodi ako ty.

Postupujte ďalej, pretože po prečítaní tohto textu vám sľubujem, že presne pochopíte, čo je API a ako s ním pracovať.

Prvé veci ako prvé.

Musíme pochopiť, čo je to objekt.

Viem, že ste niečo také videli.

Vyzerá dobre? Áno, viem, pravdepodobne jedna z prvých vecí, ktoré ste sa naučili na svojej ceste JavaScriptom.

Dobre, tak o čo máte v úmysle? Čo to má spoločné s ničím?

Všimli ste si niečo o tomto objekte? Nie je to triková otázka.

Čo ti tento predmet hovorí?

Ehm, je to objekt pomenovaný človek? Má kľúče a hodnoty ... tak čo?

Dobrý začiatok.

Dobre, čo ešte to hovorí? Čo presne vám tento objekt hovorí?

Čo to opisuje?

Oh. Je to objekt s názvom Osoba. Má meno, ktorým je Mario. Vek 22 rokov. Brat menom Luigi. A myslím, že jedlo je huba?

Teraz to chápete!

Poďme vpred.

A čo toto?

Nie je to rovnaké hovno?

Pozri sa bližšie.

Nie je tam žiadne vyhlásenie? Pretože neexistuje žiadna konštanta = teraz.

Otepľujete sa ...

Klávesy majú úvodzovky?

Presne tak.

NO A ČO?

Musíte pochopiť, že prvý úryvok je váš bežný každodenný objekt JavaScript, druhý útržok je veľmi podobný, ale nazýva sa JSON.

Najdôležitejším bodom je vedieť, že vo všeobecnosti bude API, s ktorým budete pracovať, vždy vyplivovať JSON. To je kľúčové.

Mentálny model, ktorý sa snažím vštípiť do vášho mozgu, je ten, že práca s API je taká jednoduchá ako práca s objektom.

Takže späť k prvému útržku. Ak by som chcel získať meno tejto osoby, čo by som mal napísať?

To je ľahké. Len by som sa dostal k vlastnosti name pomocou bodového zápisu. Mohol by som urobiť len Person.name a to by mi dalo „Mario“.

A čo teraz JSON?

Uh. To isté…?

Takmer. Ide o to, že je to iba anonymný objekt. Ako by sme použili .name bez niečoho pred bodovou notáciou?

Hey! To bola triková otázka. To nie je fér!
Ale dobre. Ako by sme to priradili?

To je ľahké.

Pamätáte si, čo som už povedal? Ako by JSON zvyčajne reagoval z rozhrania API?

Použime praktický príklad. V skutočnosti vytiahneme údaje z rozhrania API.

Pokračujte a vložte to do konzoly webového prehľadávača.

Čo vidíš?

Vyzerá to trochu inak. Ale trochu viac známe ako predtým. Je to jednoducho súbor objektov.

A ak by som chcel meno prvého objektu v poli?

Jednoduché! Pomocou [0] získajte prvý objekt a potom pomocou .name získajte meno!

Teraz to chápete.

Poriadku. Ale ... ako to všetko funguje? Kde je určený? Čo robí tento kód? Zdá sa, že ste toho veľa opustili. Som stratený!

Urobím to tak jednoduché, ako len dokážem. Možno tomu nebudete rozumieť úplne, ale čoskoro príde čas.

Pozrime sa na anotovanú verziu útržku.

A je to!

Teraz by ste mali rozumieť základom toho, ako volať API a byť schopný získať údaje a urobiť s nimi niečo.

V tomto prípade sme mohli volať API a teraz sme schopní chytiť prvý objekt a console.log jeho meno.

Takže tu je výzva.

Chcem, aby ste vzali údaje a vložili ich do DOM.

Tu je váš štartovací kód. Jednoducho ho skopírujte a vložte do súboru .html vo vašom obľúbenom textovom editore a skúste vyplniť medzery.

Bonusové body, ak použijete iný koncový bod! Skúste použiť koncový bod / príspevky.