Прежде чем заняться разработкой, меня всегда увлекал мир API. Эти современные привратники данных в паутину казались мистическими существами, недоступными обычным людям. Однако после знакомства с API-интерфейсами я понял, что с ними легче взаимодействовать, чем я ожидал. В этом руководстве я рассмотрю два примера минимальных шагов, необходимых для получения данных из стороннего REST API. Оба примера предполагают хотя бы базовое понимание JavaScript.

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

Запрос данных о погоде из OpenWeatherMap API

Прежде чем мы сможем отправлять запросы на их сервер, нам понадобится ключ API. Ключ API в основном используется для определения того, кто делает запросы. Чтобы получить этот волшебный ключ, нам нужно создать учетную запись и подождать целых 10 минут. Хорошо, значит, у нас есть ключ API и, очевидно, есть авторизация для выполнения запросов. Так как же нам это сделать?

Обычно хорошее место для начала работы с любым API - это документация. Фактически, еще до того, как мы напишем какой-либо код, мы можем проверить, работает ли наш ключ и что мы действительно можем запросить OpenWeatherMap для получения данных о погоде. Существует множество способов указать, какие данные о погоде нам нужны, но для простоты мы собираемся сделать запрос о текущей погоде в данном городе. Просматривая документы, кажется, что мы сможем запросить текущую погоду в Чикаго, введя следующее в адресную строку браузера.

http://api.openweathermap.org/data/2.5/weather?q=chicago&appid=YOUR-API-KEY

Не забудьте заменить YOUR-API-KEY фактическим ключом API. Если запрос выполнен успешно, вы должны увидеть уродливый объект JSON в своем браузере (если у вас его еще нет, я бы рекомендовал установить средство просмотра JSON, чтобы упростить обработку данных ответа). Если все заработало, вы должны увидеть что-то вроде этого:

Прежде чем мы продолжим, давайте кратко рассмотрим запрос API. То, что нас интересует, начинается с символа ? после weather. ? указывает, что именно здесь начинается строка запроса, которая, по сути, является способом указать то, что мы хотим, используя параметры. Параметры - это просто пары имя-значение, где символ = отделяет имя от значения. Символ & указывает на дополнительные параметры запроса. Вот полезный рисунок, в котором все разбито:

Итак, в нашем примере мы просим OpenWeatherMap предоставить нам прогноз погоды для Чикаго q=chicago в дополнение к нашему API keyappid=YOUR-API-KEY. Хорошо, теперь, когда мы можем выполнять успешные запросы API, давайте подключим его к приложению, чтобы нам не приходилось вручную вводить длинный URL-адрес каждый раз, когда нам нужна погода.

Для размещения нашего приложения и выполнения запросов AJAX нам понадобится сервер, даже если у этого сервера только один корневой путь. В этом руководстве мы будем использовать удобный сервер разработки webpack-dev-server.

Настройка webpack-dev-server - это быстрый процесс, который требует всего нескольких установок и минимальной настройки. Поскольку мы начинаем с нуля, давайте создадим каталог для этого приложения с помощью интерфейса командной строки и переместимся туда.

$ mkdir demo
$ cd demo/

Затем давайте инициализируем файл package.json.

$ npm init -y

Давайте установим то, что нам понадобится для webpack-dev-server, выполнив следующую команду:

$ npm install --save-dev webpack webpack-cli webpack-dev-server

Отлично, теперь, когда они у нас установлены, давайте продолжим и настроим файл webpack.config.js.

$ touch webpack.config.js

Нам нужно будет указать webpack-dev-server, откуда брать и обслуживать наш html-файл, который мы укажем в свойстве devServer. Поскольку наш html-файл будет находиться в корневом каталоге, мы укажем, что его можно найти в файле webpack.config.js.

module.exports = {
  mode: "development",
  entry: "./weather.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./"
  }
};

Затем давайте создадим скрипт в нашем package.json:

"scripts": {
  "start": "webpack-dev-server --open"
},

И последнее, но не менее важное: нам понадобятся файлы index.html и weather.js, в которых мы реализуем функции для выполнения запросов AJAX. Я также собираюсь добавить файл CSS, чтобы консоль Chrome не кричала на меня.

$ touch index.html weather.js main.css

Не забудьте создать хотя бы простой HTML-документ и указать weather.js в теге скрипта!

В weather.js мы напишем простую функцию для получения данных из API OpenWeatherMap.

В строке 5 мы указываем полный URL-адрес API и передаем его в качестве аргумента fetch, который отправляет AJAX-запрос серверу. Поскольку fetch() возвращает обещание, мы используем .then() для преобразования ответа в объект JSON с помощью метода .json(). Наконец, мы регистрируем объект JSON в консоли и добавляем определенные свойства в таблицу HTML. Обратите внимание, что определение функции, которая выполняет эту операцию в строке 10, опущено для краткости.

Теперь последний тест. Давайте загрузим наше приложение и посмотрим, успешно ли мы запрашиваем наши данные из OpenWeatherMap.

$ npm start

Если все работает правильно, вы должны как минимум увидеть объект ответа в консоли и таблицу с данными, если вы добавили это в.

Обратите внимание, что температура может выглядеть аномально высокой. Не волнуйтесь, мир еще не тает. OpenWeatherMap использует Кельвин в качестве единицы измерения по умолчанию, если этот параметр не указан (я оставлю его вам). И вот оно! Мы успешно получили некоторые основные данные о погоде из API OpenWeatherMap.

Бонусный раунд - запрос рецептов из Edamam API

Большинство шагов, необходимых здесь, будут аналогичны шагам, перечисленным выше, поэтому я просто сосредоточусь на том, что отличается. Поскольку мы собираемся импортировать аксиомы, нам нужно будет использовать вместе webpack и babel.

Давайте установим все, что нам понадобится.

$ npm i --save-dev axios babel-core babel-preset-env

Затем давайте создадим файл .babelrc.

$ touch .babelrc

и укажите пресеты в этом файле:

{
   "presets": ["env"]
}

Теперь давайте изменим исходный путь к нашему файлу javascript в теге index.html скрипта, чтобы он ссылался на связанный выходной файл webpack.

<script src="bundle.js"></script>

Наконец, давайте изменим точку входа в нашем файле webpack.config.js на ссылку на файл recipes.js, который мы будем создавать.

module.exports = {
  mode: "development",
  entry: "./recipes.js",
  output: {
    path: __dirname,
    filename: "bundle.js"
  },
  devServer: {
    contentBase: "./"
  }
};

Итак, мы наконец готовы создать файл recipes.js для получения наших рецептов из API Edamam с помощью axios. Давайте импортируем аксиомы и изменим функцию fetchWeather, которую мы использовали, чтобы сделать более сложный запрос для некоторых рецептов.

Вместо того, чтобы получать рецепты, основанные на одном вводе пищи, мы собираемся создать более конкретный запрос, по которому мы будем искать рецепты на основе нескольких продуктов. Мы еще не совсем готовы стать шеф-поваром, поэтому давайте ограничим наши рецепты приготовлением не более 30 минут и максимум 10 ингредиентами.

Давайте пройдемся по этому коду. По большей части он использует тот же метод, который мы использовали ранее для получения наших данных о погоде, но происходит немного больше.

Основные отличия от функции fetchWeather заключаются в следующем:

  • Функция fetchRecipes принимает любое количество аргументов.
  • Обозначение …ingredients в строке 9 - это синтаксис остальных параметров, который позволяет представить любое количество аргументов в виде массива. Это отлично подходит для использования методов массива сразу же.
  • В строках 10–18 мы манипулируем этими аргументами, чтобы создать строку, разделяющую продукты питания символом +, поскольку это синтаксис, который API Edamam ожидает для запроса с несколькими продуктами питания.
  • Мы добавили некоторые параметры в наш запрос API и добавили ограничения к этим параметрам.
  • Время не может превышать 30 минут (строка 6).
  • Ингредиентов может быть не более 10 наименований продуктов (строка 7).
  • Мы используем axios.get() вместо fetch().
  • Мы используем асинхронную функцию с помощью async / await.
  • Edamam требует ключ API и идентификатор API.

Обратите внимание, что порядок, в котором мы указываем определенные параметры, имеет значение. Например, если мы ошибочно поменяем местами порядок appId и appKey, сервер ответит статусом 404.

Давайте запустим наше приложение и посмотрим на объект ответа в консоли. Мы видим, что каждый рецепт (находится в свойстве hits) содержит много информации. На этот раз вместо заполнения таблицы для первых 4 рецептов я взял изображение рецепта и соответствующую ссылку на веб-сайт, где можно найти полный рецепт. Как и в предыдущем примере, для краткости я опустил это определение функции.

Если бы все получилось, вы могли бы увидеть что-то вроде этого.

Кто мог подумать, что кабачки, брокколи и морковь могут выглядеть так вкусно!

Вот и все! Мы научились делать запросы различной сложности к сторонним RESTful API. Легко представить себе безграничные возможности того, что можно создать при работе с API. Например, вместо того, чтобы жестко кодировать входные данные в качестве аргументов функции, мы могли бы добавить поле ввода на страницу, чтобы пользователи могли искать погоду по коду региона или рецепты по ингредиентам и ограничениям диеты. Вариантов очень много, и нет причин останавливаться на достигнутом! Я надеюсь, что это руководство помогло вам лучше понять, как работать с RESTful API. Спасибо за прочтение.