Итак, вы хотите использовать API, да?
Если вы читаете это, скорее всего, вы искали что-то вроде:
«Как мне использовать API?»
«Какую библиотеку я использую для API?»
«Что такое API?»
«Пожалуйста, помогите мне, я застрял на API приложения погоды freeCodeCamp и не знаю, что делаю».
Что ж, я собираюсь облегчить вам жизнь в 100 раз, потому что я был в той же точной лодке, что и вы.
Так что следуйте инструкциям, потому что, прочитав это, я обещаю вам, что вы поймете точно, что такое API и как с ним взаимодействовать.
Перво-наперво.
Нам нужно понять, что такое объект.
Я знаю, что вы видели нечто подобное.
Знакомо? Да, я знаю, наверное, это одна из первых вещей, которую вы узнали в своем путешествии по JavaScript.
Ладно, так о чем ты? При чем тут все?
Вы что-то замечаете в этом объекте? Вопрос не с подвохом.
Что вам говорит этот объект?
Эээ, это объект с именем person? У него есть ключи и значения… и что?
Хорошее начало.
Хорошо, о чем еще говорится? Что именно вам говорит этот объект?
Что он описывает?
Ой. Это объект под названием Person. У него есть имя Марио. Возраст 22 лет. Брат по имени Луиджи. И я думаю, еда - это грибы?
Теперь вы это понимаете!
Давайте двигаться вперед.
Как насчет этого?
Разве это не то же дерьмо?
Присмотрись.
Нет объявления? Как будто сейчас нет
const Person =
.
Тебе становится теплее…
У ключей есть кавычки?
Точно.
И ЧТО?
Что вам нужно понять, так это то, что первый фрагмент - это ваш обычный повседневный объект JavaScript, второй фрагмент очень похож, но называется JSON.
Самый важный ключевой момент - это знать, что обычно API, с которым вы будете работать, всегда будет выдавать JSON. Это ключ.
Я пытаюсь навязать вашему мозгу ментальную модель, согласно которой работать с API - это так же просто, как работать с объектом.
Итак, вернемся к первому фрагменту. Если бы я хотел получить имя этого человека, что бы мне написать?
Это просто. Я бы просто получил доступ к свойству name через точечную нотацию. Я мог бы просто сделать
Person.name
, и это дало бы мне"Mario"
.
А как насчет JSON?
Эм-м-м. Тоже самое…?
Почти. Дело в том, что это просто анонимный объект. Как бы мы использовали .name
без чего-либо перед записью через точку?
Привет! Это был вопрос с подвохом. Это не честно!
Но ладно. Так как бы нам это присвоить?
Это просто.
Помните, что я сказал раньше? Как JSON обычно будет ответом от API?
Приведем практический пример. Давайте возьмем данные из API.
Вперед и поместите это в консоль своего веб-браузера.
Что ты видишь?
Это выглядит немного иначе. Но немного более знакомый, чем раньше. Это просто массив объектов.
А если бы мне нужно было имя первого объекта в массиве?
Легкий! Используйте
[0]
, чтобы получить первый объект, затем используйте.name
, чтобы получить имя!
Теперь вы это понимаете.
Хорошо. Но… как все это работает? Куда это назначено? Что делает этот код? Кажется, вы многое остановили. Я потерялся!
Я сделаю это настолько простым, насколько смогу. Вы можете не понимать этого полностью, но это скоро придет со временем.
Давайте взглянем на аннотированную версию этого фрагмента.
И вот так!
Теперь вы должны понимать основы того, как вызывать API, и уметь получать данные и что-то с ними делать.
В этом случае мы смогли вызвать API и теперь можем получить первый объект и console.log
его имя.
Итак, вот проблема.
Я хочу, чтобы вы брали данные и вводили их в DOM.
Вот ваш стартовый код. Просто скопируйте и вставьте это в .html
файл в вашем любимом текстовом редакторе и попробуйте заполнить пробелы.
Бонусные баллы, если вы используете другую конечную точку! Попробуйте использовать конечную точку /posts
.