Последние пару месяцев я изучал и изучал, как писать на JavaScript. Хотя у меня было много взлетов и падений на этом пути, была одна тема, которую я действительно не мог уложить в голове. Тема была об интерфейсах прикладного программирования (или сокращенно API). После многих долгих часов изучения я наконец начал понимать, для чего эти странные вещи используются в мире технологий. Поэтому я решил глубже погрузиться в API в надежде, что смогу упростить эту тему для будущих студентов, изучающих программное обеспечение.

Кратко об API:

Интерфейсы прикладного программирования позволяют нам связаться с существующим сервером и интегрировать его в новое веб-приложение. Альтернативой (которая заняла бы целую вечность) было бы написание собственного с нуля. API необходимы для оптимизации этого процесса и значительно облегчают нашу жизнь при разработке новых программных систем.

Существуют общедоступные API и частные API. К общедоступным API может получить доступ и использовать любой, в то время как частные доступны только авторизованным пользователям и требуют ключа при отправке запроса на этот сервер. В Интернете существует множество общедоступных API-интерфейсов, которые можно найти всего одним поиском, независимо от того, создаете ли вы приложение библиотеки или приложение погоды, обычно есть что-то бесплатное, что вы можете использовать для создания своего приложения.

Как использовать API?

Двумя наиболее популярными методами запросов API являются GET и POST. Запросы GET используются для запроса информации и данных из указанного источника. Например, если вы использовали API, где параметрами были название штата и название города, из которого вы запрашиваете информацию о погоде. Вы должны отправить запрос GET с этой информацией на сервер. Сервер примет информацию и отправит вам что-то взамен (в данном случае это будет информация о погоде в запрошенной вами области). POST-запросы используются для отправки определенной информации источнику для создания/или обновления ресурса. Например, если вы пытаетесь опубликовать информацию на общедоступном форуме или что-то в этом роде, вы можете создать запрос POST, который отправляет информацию на сервер, а затем сервер берет эту информацию и публикует ее на сайте. Есть два других метода: PATCH, который используется для обновления данных, и DELETE, который используется для удаления данных. Имейте в виду, что все они используют протокол передачи гипертекста (HTTP) для передачи информации от клиента к серверу.

Погружение в код:

Допустим, мы создаем приложение, в котором мы хотим отправить определенный почтовый индекс в API (в этом случае мы будем использовать zippopotom.us) и получить обратно информацию об этом почтовом индексе. Во-первых, мы хотим создать форму в нашем html, форма будет состоять из двух строк, страны и почтового индекса. У него также была кнопка под названием findInfo, на которую мы обратимся позже. (имейте в виду, теги ‹fieldset› нужны только для создания поля по периметру формы на веб-сайте)

Теперь, когда у нас есть форма, мы собираемся взять введенную в нее информацию и сделать запрос GET к нашему общедоступному API. Во-первых, я создаю переменную FindInfoButton, которая находит нашу информационную кнопку в нашем html (просто помогает мне упростить мой код при выполнении моего запроса). Затем я беру эту кнопку и добавляю к ней прослушиватель событий, поэтому при нажатии на нее вызывается функция logData. (примечание: я создаю три другие переменные, страну и почтовый индекс, которые связаны с нашей формой, которую мы создали в нашем html-файле, и apiUrl, который является просто нашим URL-адресом нашего общедоступного API) Теперь мы можем начать писать нашу функцию!! Я добавляю preventDefault, чтобы страница не перезагружалась каждый раз, когда запускается наш код. Затем я пишу наш запрос на выборку (выборка — это метод выбора для отправки нашего кода на определенный сервер с использованием JavaScript). Запрос принимает строку, затем я использую умеренные литералы внутри строки — очевидно, это… URL-адрес API. Затем URL-адрес API принимает два параметра, в данном случае это название страны и название штата. Затем мы определяем, что метод, который мы хотели бы использовать, — это GET. И, наконец, я использую .then для получения данных, которые мы получаем в ответ (соответственно), и преобразую их в JSON (в основном язык, который компьютер может читать и вычислять информацию). Затем я беру эту информацию и передаю ее функции renderData, которая будет использовать его для создания новых классов HTML и отображения в веб-приложении.

И вот оно! Обратите внимание, что при отправке различных запросов, таких как POST, вам необходимо добавить больше аргументов в функцию выборки, таких как тело, заголовки и т. д.

Заключение:

API — отличный инструмент для программистов, позволяющий получить доступ к множеству информации, которую они затем могут использовать в своих собственных проектах. Доступ к ним осуществляется с помощью запросов GET, POST, PATCH и DELETE в JavaScript. JavaScript использует метод fetch для отправки информации на сервер, затем сервер берет эту информацию и что-то делает в зависимости от того, какой метод был вызван. Итак, создаете ли вы веб-приложение для кого-то или просто практикуете свой собственный код, API-интерфейсы предоставляют отличный инструмент, который может сэкономить вам время при работе над проектом!