JavaScript: введение в контакт с API

Краткое резюме: в этом посте я надеюсь рассмотреть базовый пример того, как получить доступ к API четким и лаконичным способом.

Требования: текстовый редактор, такой как Visual Studio Code, и базовые знания JavaScript.

Справочная информация: многим веб-сайтам требуется информация с других веб-сайтов. Например, когда вы используете Facebook/Gmail для входа в другую веб-службу, такую ​​как Spotify. Когда пользователь входит в Spotify, используя свою учетную запись Facebook, Spotify должен отправить имя пользователя и пароль в Facebook, чтобы проверить подлинность учетной записи. Если учетная запись является подлинной, Facebook отправит информацию обратно в Spotify. Как мы видим, взаимодействие с API включает в себя отправку запроса на информацию, который может сопровождаться такой информацией, как имя пользователя, а затем получение информации обратно.

Сначала я собираюсь предоставить некоторый код. Просто взгляните на это. Не волнуйтесь, если вы этого не понимаете, для этого я здесь. После строки кода я объясню, как смогу ›_‹ !!! Хорошо, давайте погрузимся прямо в это :) !

Наш первый шаг — прочитать документацию по API! Многие сайты, которые обычно используют свои API, имеют документацию, настроенную, чтобы помочь людям делать запросы API. Мы надеемся, что эта документация расскажет нам:

  • Какой URL использовать для запроса.
  • Какую информацию отправить долго с нашим запросом.
  • Какие типы информации мы будем получать обратно.
  • И как информация, которую мы возвращаем, будет отформатирована.

Шаг второй! Теперь мы можем приступить к кодированию!

const url = "https://api.exampleAPI.com/images/search?category_ids="
const apiKey =  "abcdefg123456"

Выше мы создаем две переменные, которые я хотел бы объяснить с помощью метафоры похода в магазин. Если бы мы хотели пойти в магазин, чтобы купить новую книгу, нам понадобились бы две вещи, прежде чем мы смогли бы даже выйти из дома. Адрес магазина и наши деньги. Наш URL-адрес действует как адрес для API, как и адрес магазина. Мы не можем даже начать движение, если не знаем, в каком направлении нам нужно двигаться. APIKey подобен нашим деньгам, нам нужно отдать его API, чтобы получить то, что мы хотим взамен. Как некоторые магазины могут раздавать вещи бесплатно, так и API. Нам не всегда нужен ключ API, но часто он нужен. Прочтите документацию API, чтобы выяснить, делаем ли мы это.

Таким образом, над URL-адресом находится наш адрес API, а apiKey — это наши деньги. Теперь, когда у нас есть то, что нам нужно, мы можем покинуть наш метафорический дом и отправиться в путь.

fetch(url, {
    headers: {
      "api-key": apiKey
    }
})

Функция извлечения похожа на поездку в магазин и оплату на кассе сразу! Когда мы вызываем fetch, мы должны передать ему две переменные. В нашей метафоре этими двумя переменными являются адрес и наши деньги. В нашем коде это URL-адрес и ключ API. Мы видим, что внутри fetch мы видим, что мы сначала передаем переменную url, которую мы создали ранее. Далее мы видим, что передаем анонимный объект, содержащий один ключевой заголовок. Форматирование этого объекта зависит от того, что запрашивает API. Если нам повезет, документация API должна предоставить пример этого. Внутри нашего свойства заголовка у нас есть еще один вложенный объект, у которого есть свойство api-key, содержащее наш ключ API. Этот объект, содержащий наш ключ API, передается на веб-сайт API, когда к нему обращается наша функция выборки. Это все равно, что платить нашему кассиру. После этого API возвращает нам нашу информацию.

API-интерфейсы могут запрашивать другую информацию в дополнение к ключу API. Все зависит от того, как они решили написать свой код для своего API. Так что прочитайте документацию, чтобы узнать, как именно они хотят отформатировать передаваемую им информацию.

Шаг третий! В нашей метафоре мы сейчас пошли в магазин и купили нашу новую книгу, но есть проблема! Кажется, мы не можем это прочитать! Когда мы получаем информацию от API, ее часто необходимо интерпретировать. Это связано с тем, что перед отправкой нам его можно реструктурировать для экономии полосы пропускания. К счастью, у нас есть способ сделать именно это.

.then(res => res.json())

Мы добавили then в конец нашей функции выборки, используя запись через точку. Это функция обещания. Функция обещания будет выполняться несмотря ни на что. Если он вызывается для функции с ошибкой, он выдает ошибку, чтобы мы могли выяснить, что пошло не так. Внутри него мы создаем переменную с именем res. Затем мы передаем эту переменную res в анонимную стрелочную функцию, которая возвращает res.json(). Этот метод .json() делает наш результат читаемым для нас. Как удобно! Итак, эта функция берет результат нашей выборки и присваивает его res. Затем res интерпретируется .json() и возвращается нам.

На этом этапе мы могли бы сохранить результат нашей выборки, а затем использовать его как переменную. Если бы мы это сделали, мы могли бы получить доступ к любому типу переменной или объекта, содержащегося в результате. Нам просто нужно помнить, какой тип информации возвращается к нам и как она форматируется, чтобы манипулировать ею.