Взаимодействие с API (интерфейс прикладного программирования) является ключевой частью веб-разработки, необходимой для создания полнофункционального приложения. В этом блоге будет обсуждаться, как взаимодействовать с внешними API-интерфейсами с помощью встроенного Fetch API в JavaScript. Если вы новичок в JavaScript, в этом руководстве все будет рассмотрено шаг за шагом, что поможет вам понять как код, так и концепции, лежащие в его основе.
Как создать запрос на выборку
Мы можем начать запрос на выборку с помощью функции fetch и передать ей аргумент URL-адреса. Если не указано иное, по умолчанию он отправляет так называемый запрос GET на этот адрес и отвечает обещанием. Обещание представляет собой окончательное выполнение или отказ асинхронного события.
Как только мы получаем обещание из запроса на выборку, мы можем использовать другой метод JavaScript, называемый .then (), чтобы вернуть это обещание. Этот метод принимает в качестве аргументов две функции обратного вызова: одну для обработки успеха обещания, а другую - для обработки ошибки. Что это значит? Поскольку запрос на выборку пытается достичь API и возвращает асинхронное обещание, возможно, что-то может пойти не так. Сервер мог выйти из строя, вы могли потерять подключение к Интернету, URL-адрес, передаваемый при извлечении, мог быть неправильно написан. Поскольку возможно, что обещание не удалось, .then () может обрабатывать сбои и даже передавать сообщение об ошибке, указывающее, что пошло не так.
Итак, мы вызываем .then () после того, как выборка выполняет что-то, называемое синтаксическим анализом данных. Мы используем другой встроенный метод, .json (), чтобы преобразовать данные ответа из выборки в данные JavaScript Object Notation (JSON), которые легче читать и с которыми легче работать. Затем мы вызываем .then () еще раз, чтобы действительно что-то сделать с этими проанализированными данными, например журнал консоли.
Вот как будет выглядеть наш пример запроса на выборку:
И это так просто!
Если это кажется вам немного запутанным, не волнуйтесь. В следующем разделе мы подробно рассмотрим каждый шаг по созданию и тестированию нашего первого запроса на выборку.
Настройка собственного запроса на выборку
Чтобы написать собственный запрос на выборку, вам понадобится только последняя версия Node, установленная на вашем компьютере. Мы можем начать с создания файла шаблона index.html и файла index.js. В HTML-файле добавьте теги h1 и button. Под тегом button создайте тег div с классом image-container. Мы будем использовать это как место для добавления изображений наших кошек, но пока ваш браузер должен выглядеть так:
Мы собираемся написать запрос на получение бесплатного API, чтобы получать изображения кошек и отображать их в нашем браузере. Я не могу придумать лучшего использования API-интерфейса fetch, чем бесплатные картинки с милыми котиками. Вы можете просмотреть документацию по API здесь, на https://docs.thecatapi.com/, но для этого запроса вам нужно будет только следовать вместе с кодом.
Мы скопируем запрос на выборку из предыдущего блога, но заменим URL-адрес примера на URL-адрес cat api. Должно получиться так:
Сохраните свою работу, вернитесь в браузер и обновите страницу. Если вы посмотрите в консоль разработчика (щелкните правой кнопкой мыши, выберите «Проверить», перейдите на вкладку «Консоль»), вы увидите, что ответ, который нам дал наш API, преобразован в данные JSON!
Использование данных
Поздравляем, вы написали свой первый запрос на Fetch! Но где же милые картинки кошек, обещанные всего несколько предложений назад? Весь смысл использования fetch для доступа к API состоит в том, чтобы получать или отправлять данные и фактически что-то с ними делать. Есть несколько способов добиться этого, но давайте воспользуемся ванильным JavaScript, чтобы создать некоторые элементы HTML и добавить их в DOM. Теперь наш код должен выглядеть так:
Обратите внимание, что мы не просто назначили источник нашего тега изображения объекту «data», который мы получили из запроса на выборку. Одна из самых важных частей работы с API - это то, как мы используем данные, которые они нам возвращают. Поскольку этот вызов API возвратил массив под названием «данные» с одним объектом в нем, мы ссылаемся на него в строке 6, используя обозначение скобок для индекса 0. Один раз в индексе 0 или первой позиции (и только позиции в данном случае) в таблице массив, мы используем точечную нотацию для ссылки на значение ключа «url». Таким образом, предоставив нам строку, которую мы видели ранее в журнале консоли, «https://cdn2.thecatapi.com/images/96n.jpg. Эта строка является нашим URL-адресом для нашего тега изображения, который генерирует изображение очаровательного кота.
Если вы все еще не уверены, как мы получили URL-адрес от этого объекта «данных», возвращенного нашим запросом на выборку, просмотрите возвращенный объект на консоли. Вам нужно хорошее понимание деструктуризации объектов и массивов, чтобы найти желаемое значение. Печать ответа на запрос на выборку, когда вы не знаете, чего ожидать, - отличный способ визуализировать ваши данные. Оттуда вы можете использовать консоль разработчика, чтобы открывать раскрывающиеся списки и глубже копаться в своих данных.
Подробнее об асинхронных функциях
Целью запроса на выборку является асинхронная отправка или получение данных с помощью API. Асинхронность означает именно то, на что это похоже, а именно то, что этот запрос выполняется вне времени, как и остальная часть кода в нашем файле. Другими словами, наше приложение не будет ждать завершения запроса на выборку перед запуском остальной части JavaScript, если, конечно, мы не сообщим ему об этом.
Если вы хотите увидеть пример того, как это работает, добавьте оператор console.log после завершения последнего метода. then () и посмотрите, где он регистрируется в консоли разработчика браузера. Вы обнаружите, что даже если запрос на выборку записан перед журналом консоли, а JavaScript выполняется сверху вниз, журнал консоли будет печататься первым! Это связано с тем, что для выполнения запроса на выборку требуется некоторое время, и хотя он может быть быстрым, он по-прежнему является асинхронным и должен ждать ответа, тогда как другой ваш код читается прямо из вашего файла.
Различные типы запросов на выборку
При доступе к данным с помощью запроса на выборку мы действительно используем методы HTTP (протокол передачи гипертекста) для связи с нашим API. Технически существует около 39 методов HTTP, но наиболее важными из них являются GET, POST, DELETE, PATCH и PUT. Я приведу пример каждого из них и краткое объяснение.
Получить
Метод GET HTTP-запроса, вероятно, самый простой для понимания. В нашем примере получения единственного изображения кошки демонстрируется запрос GET. Вы не должны использовать GET-запросы для отправки данных, они должны использоваться только для получения данных.
Пример:
Почта
Метод POST используется для отправки информации или данных на конкретную конечную точку. Примером этого может быть создание нового профиля на веб-сайте социальной сети. В запросе POST требуется использовать второй аргумент вашего метода выборки. Это будет объект инициализации, который может иметь несколько свойств, но здесь требуются свойства «метод», «тело» и «заголовки». Атрибут «method» определяет, какой HTTP-метод мы используем, здесь это будет POST. «Тело» запроса представляет собой данные, которые мы отправляем для обновления в наш API, в данном случае информацию о новом профиле. Свойство «заголовки» действует как способ сопоставления имен со значениями, например, здесь будет сказано, что содержимое декодируется в данных json.
Обратите внимание, что запрос POST не обязательно должен возвращать какие-либо конкретные данные, которые будут использоваться, но может, если конечная точка API указывает возвращаемые данные. Он вернет объект обещания, который скажет вам, был ли ваш запрос успешным или нет. После синтаксического анализа этого в JSON вы можете в консоли записать его, выполнить некоторую логическую операцию на основе ответа или использовать его по своему усмотрению.
Удалить
Структура запроса DELETE аналогична запросу POST в том, что ему нужны «метод» и атрибут «заголовки». Допустим, мы хотели удалить одно из наших старых изображений в Instagram с помощью запроса на выборку. Изображение, вероятно, имеет атрибут Id, который позволяет нам ссылаться на него. Мы можем интерполировать URL-адрес в нашем запросе на выборку и передать ему идентификатор нашего сообщения Instagram, чтобы удалить его!
Пластырь
Метод PATCH похож на метод «редактирования», поскольку он частично изменяет наши данные. Мы можем использовать запрос PATCH, чтобы изменить нашу учетную запись Google, чтобы обновить номер телефона. Как и запрос DELETE, запрос PATCH передает второй аргумент объекта с «методом», «телом» и «заголовками».
Обратите внимание, что здесь мы вставляем идентификатор нашей учетной записи Google в URL-адрес. Это говорит о том, что запрос будет искать именно наш профиль. «Тело» здесь будет получено как объект JSON, преобразованный в строку для представления нашего нового номера телефона. Несмотря на то, что в нашем профиле, вероятно, есть много разных вещей, которые мы можем изменить, например, фото, пароль и многое другое, поскольку это запрос PATCH, он `` исправляет '' наши существующие данные некоторыми новыми данными, поэтому нам не нужно отправлять полностью новый объект "Профиль".
Ставить
И последнее, но не менее важное - это метод PUT. Это похоже на метод POST, за исключением того, что PUT имеет возможность перезаписывать. Когда использовать PUT или POST, в основном это зависит от того, что называется идемпотентностью. Эта концепция немного сложна, но думайте о ней как о способности давать один и тот же результат независимо от того, сколько раз она выполняется. Это означает, что метод POST создает совершенно новый экземпляр чего-либо, в то время как метод PUT заменяет существующий объект совершенно новым объектом и перезаписывает все, что было в конечной точке изначально.
PUT используется, когда вы знаете точный URL-адрес, который вы пытаетесь достичь, а POST - нет. Например, если вы размещаете заказ на веб-сайте суши, вы можете использовать запрос PUT, потому что, если он по какой-то причине срабатывает несколько раз, экземпляр, который он отправляет, останется единственным экземпляром. Запрос POST продолжит отправку нескольких запросов, и вы застрянете с слишком большим количеством суши (хотя я не уверен, что слишком много суши возможно).
Реквизиты для входа
Я хочу кратко обсудить учетные данные, поскольку они жизненно важны для HTTP-запросов, особенно когда вы начинаете создавать приложения с безопасными данными. Учетные данные - это еще одно свойство объекта инициализации, переданное в запрос на выборку, которое указывает, должна ли конечная точка отправлять cookie. По умолчанию для него установлено значение «same-origin», что означает, что учетные данные пользователя могут быть отправлены, если URL-адрес находится в том же источнике, что и вызывающий его скрипт. Вы можете «опустить» любые файлы cookie или передать «включить» в «учетные данные», чтобы всегда отправлять файлы cookie между пользователем и конечной точкой.
Для некоторых API может потребоваться включение учетных данных в запрос на выборку для получения данных или использования других методов HTTP. Чтобы включить учетные данные, просто добавьте их в свой объект инициализации следующим образом:
Практика ведет к совершенству
Если вы новичок в получении запроса или просто новичок в JavaScript в целом, это может показаться запутанной информацией. Я настоятельно рекомендую написать как можно больше таких запросов. Поэкспериментируйте с разными атрибутами в объекте init для разных целей. Попробуйте создать небольшое приложение CRUD (Create Read Update Delete) с помощью fetch. Не стесняйтесь оставлять вопросы и комментарии ниже, и, как всегда, счастливого кодирования!
Ресурсы:
Больше контента на plainenglish.io
