Tutorial pentru începători pentru API-urile web + Cum să începeți rapid

Așa arătam când am început să aflu despre lucrul cu API-urile.

Deci vrei să folosești o API?

Dacă citiți acest lucru, este posibil să căutați ceva pe linia:

„Cum folosesc o API?”
„Ce bibliotecă folosesc pentru o API?”
„Ce este o API?”
"Vă rog să mă ajutați, sunt blocat pe API-ul WeatherCode FreeCodeCamp și nu știu ce fac."

Ei bine, urmează să-ți fac viața de 100 de ori mai ușoară, deoarece eram în aceeași barcă ca tine.

Așa că urmează, pentru că după ce ai citit acest lucru, îți promit că vei înțelege exact ce este o API și cum să interacționezi cu una.

Să începem cu începutul.

Trebuie să înțelegem ce este un obiect.

Știu că ai văzut așa ceva.

Pare cunoscut? Da, știu, probabil unul dintre primele lucruri pe care le-ați învățat în călătoria dvs. JavaScript.

Bine, deci care este punctul tău? Ce legătură are asta cu ceva?

Observi ceva despre acest obiect? Nu este o întrebare truc.

Ce vă spune acest obiect?

E, este un obiect numit o persoană? Are chei și valori ... deci ce?

Un bun inceput.

Bine, ce mai spune? Ce îți spune exact acest obiect?

Ce descrie?

Oh. Este un obiect numit Persoană. Are un nume care este Mario. O vârstă de 22 de ani. Un frate pe nume Luigi. Și cred că mâncarea este ciupercă?

Acum îl obțineți!

Haideți să mergem mai departe.

Ce zici de asta?

Nu este același rahat?

Privește mai aproape.

Nu există nicio declarație? De parcă nu există o persoană constantă = acum.

Te încălzești ...

Cheile au ghilimele?

Exact.

ȘI CE DACĂ?

Ceea ce trebuie să înțelegeți este că primul fragment este obiectul dvs. JavaScript obișnuit de zi cu zi, al doilea fragment este foarte similar, dar acesta se numește JSON.

Cel mai mare punct cheie este să știi că, în general, API-ul cu care vei lucra va scuipa întotdeauna JSON. Aceasta este cheia.

Modelul mental pe care încerc să-l insufle creierului tău este acela că să lucrezi cu o API este la fel de simplu ca să lucrezi cu un obiect.

Deci, înapoi la primul fragment. Dacă aș vrea să obțin numele acestei Persoane, ce ar trebui să scriu?

Asta e ușor. Aș accesa doar proprietatea nume prin notare punct. Aș putea face doar Person.name și asta mi-ar da „Mario”.

Ce zici de JSON?

Uh. Același lucru…?

Aproape. Chestia este că este doar un obiect anonim. Cum am folosi .name fără ceva înainte de notația punct?

Hei! Aceasta a fost o întrebare truc. Nu este cinstit!
Dar bine. Deci cum l-am atribui?

Asta e ușor.

Îți amintești ce am spus înainte? Cum ar fi un JSON de obicei un răspuns de la o API?

Să folosim un exemplu practic. Să tragem de fapt date dintr-o API.

Continuați și introduceți acest lucru în consola browserului dvs. web.

Ce vezi?

Acest lucru arată puțin diferit. Dar ceva mai familiar decât înainte. Este pur și simplu o serie de obiecte.

Și dacă aș dori numele primului obiect din tablou?

Uşor! Utilizați [0] pentru a obține primul obiect, apoi utilizați .name pentru a obține numele!

Acum o obții.

Bine. Dar ... cum funcționează toate acestea? Unde este repartizat? Ce face codul ăsta? Pare să fie multe pe care le-ai părăsit. Sunt pierdut!

Îl voi face cât mai simplu. Este posibil să nu înțelegeți pe deplin, dar asta va veni în curând cu timpul.

Să aruncăm o privire asupra unei versiuni adnotate a fragmentului respectiv.

Și acolo te duci!

Acum ar trebui să înțelegeți elementele de bază despre cum să apelați o API și să puteți să apucați datele și să faceți ceva cu ea.

În acest caz, am putut apela API-ul și am putut acum să primim primul obiect și consola.log-ul acestuia este numele.

Iată deci provocarea.

Vreau să luați date și să le introduceți în DOM.

Iată codul dvs. de pornire. Pur și simplu copiați și lipiți acest lucru într-un fișier .html din editorul de text preferat și încercați să completați semifabricatele.

Puncte bonus dacă utilizați un alt punct final! Încercați să folosiți punctul final / posts.