API

API (Application Programming Interface, программный интерфейс приложения) — это набор инструментов, которые позволяют одному приложению взаимодействовать с другим.

Большинство приложений работают по клиент-серверной архитектуре. Это означает, что приложение или сервис состоит из двух программных частей — клиентской и серверной. Для взаимодействия эти части каким-то образом находят общий язык. Этот «общий язык» и называется API. Он позволяет двум приложениям функционировать, общаться между собой, не обращая внимания на разные языки программирования, на которых сделана клиентская и серверная часть.

API-интерфейсы предоставляют нам конечную точку или конкретный URL-адрес, где отображаются нужные данные. Некоторые API требуют, чтобы вы зарегистрировали учетную запись или получили уникальный ключ для доступа к их информации. При аутентификации вы передаёте API ключ, который идентифицирует конкретного пользователя или запрос приложения. Затем сервер может определить, можете ли вы получить доступ к данным или нет.

Работа с API

В JavaScript имеется собственный встроенный способ отправки запросов API. Это Fetch API, современный, гибкий и универсальный стандарт создания серверных запросов с промисами.

  • codeСинтаксис
    Функция fetch() принимает два параметра: адрес ресурса, на который требуется отправить запрос, и объект с настройками. Второй параметр опционален и может не использоваться: 
                                    
fetch(адрес[, настройки]);

    По умолчанию fetch() выполнит GET-запрос.

    Результатом выполнения fetch() станет промис. Это даёт нам возможность использовать методы then, catch и finally.

    После метода fetch() нужно включить метод промиса then():

                                    
.then(function() {

})

    Под методом then() следует включить метод catch(), который выполняется в случае возникновения ошибки:

                                    
.catch(function() {

});

    В случае успешного выполнения fetch() мы получим от сервера ответ — response (специальный объект ответа) в JSON. Чтобы прочитать JSON используем метод json() у объекта с ответом:

                                    
.then((response) => response.json())

    Встроенный метод json() автоматически извлечёт JSON-данные из ответа, преобразует их в объект или массив, и вернёт новый промис. Можно продолжать цепочку then и, например, вывести данные в консоль:

                                    
.then((posts) => console.log(posts));
  • codeОтправка информации на сервер
    Работа с fetch() не ограничивается лишь получением данных от сервера. Можно также их передавать на сервер. Для этого необходимо задать объект и передать его как второй аргумент функции fetch().
  • codeПримеры API

    Вставим на страницу несколько забавных апишек :)

    NASA

    Эта позволяет нам получить доступ к базе NASA и поставить на страницу картинку и немного информации про неё. Правда, для этого надо получить ключ на сайте.

    Yes or No

    А эта позволяет получить ответ «да» или «нет» и сопровождает его соответствующей гифкой.

    Bored API

    А если скучно, эта апи поможет найти занятие.

    API покемонов

    Это бесплатный API, для доступа к которому не требуется аутентификация. Можно запрашивать конкретных покемонов, движения, игры, локации и многое другое.

    Котики

    Разумеется, этот проект не мог обойтись без котиков :) В этом нам поможет вот этот сайт, который выдаёт рандомные картинки котов.

Полезные ссылки

MDN

Что такое API (Дока)

API сервисы

A collective list of free APIs