Ръководство за начинаещи за уеб API + Как да започнем бързо

Ето как изглеждах, когато за пръв път започнах да научавам за работа с API.

Значи искате да използвате API, а?

Ако четете това, има вероятност да търсите нещо по реда на:

„Как да използвам API?“
„Каква библиотека да използвам за API?“
„Какво е API?“
„Моля, помогнете ми, забих се в API на метеорологичното приложение на freeCodeCamp и не знам какво правя.“

Е, на път съм да улесня живота ти 100 пъти, защото бях в същата тази лодка като теб.

Затова следвайте, защото след като прочетете това, ви обещавам, че ще разберете какво точно представлява API и как да взаимодействате с него.

Първо най-важното.

Трябва да разберем какво е обект.

Знам, че сте виждали нещо подобно.

Изглежда познато? Да, знам, вероятно едно от първите неща, които научихте в пътуването си с JavaScript.

Добре, така че какво е вашето мнение? Какво общо има това с всичко?

Забелязвате ли нещо по този обект? Не е трик въпрос.

Какво ви говори този обект?

Грешка, това е обект на име човек? Той има ключове и стойности ... и какво?

Добро начало.

Добре, какво още казва? Какво точно ви казва този обект?

Какво описва?

О. Това е обект, наречен Личност. Има име, което е Марио. Възраст на 22. Брат на име Луиджи. И предполагам, че храната е гъбна?

Сега го получавате!

Нека продължим напред

Какво за това?

Това не е ли същото лайно?

Погледни по-отблизо.

А, няма декларация? Като че ли няма const Person = сега.

Ставаш по-топло ...

Ключовете имат кавички?

Точно.

ТАКА КАКВО?

Това, което трябва да разберете е, че първият фрагмент е вашият редовен ежедневен JavaScript обект, вторият фрагмент е много подобен, но това се нарича JSON.

Най-големият ключов момент е да знаете, че като цяло API, с който ще работите, винаги ще изплюе JSON. Това е ключово.

Менталният модел, който се опитвам да насаждам на мозъка ви, е, че да работите с API е толкова просто, колкото да работите с обект.

Така че обратно към първия фрагмент. Ако исках да получа името на това Лице, какво би трябвало да напиша?

Това е лесно. Просто бих получил достъп до собствеността на името чрез точкова нотация. Просто бих могъл да направя Person.name и това ще ми даде „Марио“.

Какво ще кажете за JSON?

Ъ-ъ. Едно и също нещо…?

Почти. Работата е там, че това е просто анонимен обект. Как бихме използвали .name без нещо преди нотацията на точките?

Хей! Това беше трик въпрос. Не е честно!
Но добре. И така, как бихме го присвоили?

Това е лесно.

Спомняте ли си какво казах преди? Как JSON обикновено е отговор от API?

Нека използваме практически пример. Нека всъщност изтеглим данни от API.

Напред и поставете това в конзолата на вашия уеб браузър.

Какво виждаш?

Това изглежда малко по-различно. Но малко по-познато от преди. Това е просто масив от обекти.

И ако исках името на първия обект в масива?

Лесно! Използвайте [0], за да получите първия обект, след това използвайте .name, за да получите името!

Сега го получавате.

Добре. Но ... как всичко това работи? Къде е назначен? Какво прави този код? Изглежда има много неща, които сте прекъснали. Изгубих се!

Ще го направя толкова просто, колкото мога. Може да не го разберете напълно, но това скоро ще дойде с времето.

Нека да разгледаме пояснената версия на този фрагмент.

И ето!

Сега трябва да разберете основите на това как да се обадите на API и да можете да вземете данните и да направите нещо с него.

В този случай успяхме да се обадим на API и сега ще можем да вземем първия обект и console.log с името му.

Така че тук е предизвикателството.

Искам да вземете данни и да ги въведете в DOM.

Ето вашия стартов код. Просто копирайте и поставете това в .html файл в любимия си текстов редактор и се опитайте да попълните празните места.

Бонус точки, ако използвате друга крайна точка! Опитайте да използвате крайната точка / posts.