Переходим к изучению новой темы – это API. Если говорить простым языком, то API для JavaScript – это набор свойств и методов, которые позволяют вам взаимодействовать с сайтами, приложениями, различимыми библиотеками и т.д.
API бывают встроенные и сторонние. К встроенным в браузер API относится WEB API, который в свою очередь подразделяется на несколько категорий, и многими вы уже пользовались. Например, это DOM API. В DOM API входят свойства и методы, которые позволяют вам взаимодействовать с веб-документом. Это различные методы для создания, удаления тегов, добавления классов, id и т.д. Т.е. по умолчанию этих методов нет в чистом JavaScript, они предоставляются вам браузером в виде API. Когда мы придавали стиль тегам, то мы пользовались методами API, который называется CSS Object Model. А когда мы сохраняли данные в кеш браузера, мы пользовались Web Storage API.
Т.е. проще говоря встроенные API в основном позволяют вам взаимодействовать с веб-сайтом, с помощью свойств и методов, которых у чистого JаvaScript нет.
Многие сайты (точнее их создатели) разрабатывают и предоставляют свои собственные API, чтобы вы могли взаимодействовать с информацией, которая есть на их сайте. Например, игровой сайт Steam с помощью своего API позволяет вам получить доступ, например, к статистике продаж. А чтобы взаимодействовать с API других сайтов у нас есть встроенный API, который называется Fetch API.
Чтобы получить данные с другого сайта у Fetch API есть функция, которая так и называется fetch.
У функции fetch есть два параметра. Первый обязательный – это адрес веб страницы другого сайта, откуда мы можем получить или куда можем отправить данные. Этот параметр называется http запрос. Тип данных должна быть строка. А второй параметр, он необязательный. С помощью него мы можем настроить параметры нашего запроса. Данный параметр принимает объект, где каждый ключ это параметр, а значение ключа, будет, соответственно, значение параметра.
Если данный параметр не указывать, то мы будет отправлять запрос с параметрами по умолчанию. А какие же параметры мы можем задать? Давайте рассмотрим несколько параметров. Дело в том, что на практике мы ими пользоваться не будем, и сейчас тратить время чтобы каждый из них разобрать я не хочу. Если вас заинтересовал какой-то из параметров, и вы хотите о нём узнать по подробней, то напишите в комментариях, я отвечу.
Итак, первый параметр это method. У него много значений, но в основном используют два: метод GET если мы хотим получить информацию с другого сайта, и метод POST если мы хотим отправить информацию.
Следующий параметр это headers, т.е. заголовки. Он нужен, если вы хотите добавить метаданные к вашему запросу. Например, если вы отправляете данные в формате JSON вы можете об этом указать в параметре headers с помощью content-type. А если вы например, не отправляете данные а хотите получить их, допустим в формате JSON, вы можете это указать с помощью ключа accept.
Еще один параметр, который мы рассмотрим – это body. Он нужен в тех случаях, когда вы отправляете информацию на другой сайт. Эта информация может быть в формате текста, Blop, FromData и других форматов. Если хотите отправить информацию в формате JSON, то необходимо использовать JSON.stringify.
Двигаемся дальше. Когда мы произведем запрос к api другого сайта, то функция fetch вернет промис, т.е. по сути вызовится функция resolve, в параметр которого. куда мы обычно добавляли текст, будет передан объект Responce. Данный объект нужен для управления полученной информацией полученной с другого сайта. Кстати, функция fetch передаст объект resolve даже если не сможет принять данные с другого сайта. Узнать успешен ли был запрос или нет, мы можем узнать в свойстве Ok объекта response. Свойство ок будет хранить true, если запрос был успешен, и false если нет.
Как вы уже могли догадаться, если функция fetch возвращает промис, то мы можем воспользоваться методом then, в котором мы можем обрабатывать запрос с помощью объекта response. У объекта response есть много своих свойств и методов. Давайте рассмотрим некоторые из них. Про свойство OK вы уже знаете. Далее есть свойство StatusText, который возвращает текстовое описание статуса ответа. Например, для кода 200 это будет “OK”, для 404 — “Not Found”.
В свойстве headers будут храниться заголовки, который вам отправил другой сайт. Если вы ожидаете что другой сайт отправит информацию в формате JSON то можете воспользоваться методом json который преобразует получный текст в формате JSON в JAvaScript объект. Если вы не знаете в каком формате вам придут данные, то можете воспользоваться методом text, который просто отобразит формат ответа в качестве просто текста.
На этом урок заканчивается, до встречи на практике.
