Включение данных из внешнего API-интерфейса - отличный способ добавить дополнительные функции к вашим веб-приложениям, но некоторые API-интерфейсы не всегда упрощают доступ к данным, которые вы хотите использовать. Я столкнулся с этой проблемой при запросе данных из API базы данных фильмов (TMDB). В этой статье я покажу вам простой способ доступа к труднодоступным данным из внешнего API с помощью вложенных запросов на выборку. Я также кратко остановлюсь на недостатках этого подхода.
Я хотел, чтобы мое веб-приложение отображало информацию о фильмах, включая изображение плаката и трейлер фильма. Хотя было достаточно легко включить эту информацию в мою внутреннюю базу данных для набора списка фильмов, я также хотел, чтобы пользователи могли обновлять сайт своими собственными фильмами, и чтобы эти фильмы публиковали на сайте свои плакаты и трейлеры. . Именно здесь внешний API пригодится, поскольку он позволяет веб-приложению обрабатывать информацию о фильмах, ранее не известную внутренней базе данных. Согласно документации TMDB, вы можете искать любой фильм в базе данных, если ваш запрос на выборку включает ключ API и запрос. Вот пример запроса на выборку для поиска Jurassic Park (с удаленным ключом API):
Результатом этой выборки является объект Javascript Promise, который включает в себя массив объектов для каждого названия фильма, содержащего слова «Парк Юрского периода» (15!). Глядя на объект с индексом [0], мы видим:
Здесь у нас есть основная информация о Парке Юрского периода OG, в том числе путь для изображения плаката, который является одной из вещей, которые мы хотим отобразить на нашем сайте! Однако, когда мы смотрим на ключ «видео», мы видим значение «false», предполагающее, что API TMDB не имеет трейлера для этого фильма. Но в любой достойной базе данных фильмов должен быть трейлер для такого культового фильма, так что его стоит изучить подробнее. В документации по API показано, что вы можете искать видео, относящиеся к любому фильму в базе данных, с помощью запроса на выборку, который включает ключ API и идентификатор фильма (см. Результат выше для идентификатора Парка Юрского периода, равного 329). Вот пример того, как будут выглядеть этот запрос и результат:
Опять же, мы получаем массив объектов, каждый из которых является видео, связанным с фильмом. Объект с индексом [0], по-видимому, является официальным трейлером, загруженным на YouTube, а TMDB предоставляет уникальный идентификатор и ключ видео. Итак, отлично, теперь у нас есть способ встроить трейлер к фильму на наш сайт! Но как мы можем узнать уникальный идентификатор фильма для любого возможного фильма, который может ввести пользователь? Помните, что идентификатор фильма был включен в результаты нашего первого запроса на выборку? Вот тут-то и пригодится вложенная выборка. Вот код моего веб-приложения:
Используя интерполяцию строк, запрос на выборку использует название фильма, введенное пользователем. Во втором выражении .then я создал элемент плаката, используя значение poster_path в индексе [0] массива результатов в объекте Promise. Я также выполнил еще один запрос на выборку, который на этот раз использует строковую интерполяцию для доступа к значению идентификатора фильма по индексу [0] массива результатов. Результирующий объект Promise включает в себя массив видео. В последнем операторе .then я создал встроенный элемент iframe, получив доступ к уникальному ключу видео по индексу [0] массива результатов. Затем этот блок кода позволяет сайту отображать плакат и трейлер для любого фильма, введенного пользователем.
Небольшое замечание об обратной стороне этого подхода: использование вложенных или связанных запросов на выборку иногда называют «наивным» подходом. Хотя это действительно работает, оно может быть неудобным и громоздким. Это также может привести к увеличению времени загрузки. В одном из следующих постов блога я рассмотрю варианты улучшения этого подхода.
