Видеть ответы curl или Postman - это круто, но как использовать данные JSON? В большей части документации API не нужно показывать, как использовать данные JSON. Полагаем, что разработчики будут использовать свои front-end навыки, чтобы анализировать данные и отображать их соответствующим образом в своих приложениях. Чтобы лучше понимать, как разработчики получают доступ к данным, пройдем краткое руководство, как отображать ответ API на веб-странице.
👨💻 Практическое занятие: делаем запрос на странице при помощи AJAX
На этом занятии мы будем использовать JavaScript для отображения ответа API на веб-странице. В частности, будем использовать автоматически сгенерированный код jQuery из Postman для создания запроса AJAX. Получим скорость ветра в ответе и выведем его на страницу.
- В текстовом редакторе создаем новый html-файл с именем
weather.htmlи вставляем в него шаблон (который содержит основные теги HTML и ссылку на jQuery):
<html>
<meta charset="UTF-8">
<head>
<title>Sample page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
POSTMAN CODE GOES HERE
</script>
</head>
<body>
<h1>Sample Page</h1>
wind speed: <span id="windSpeed"></span>
</body>
</html>
- Открываем Postman и переходим к конечной точке “Текущие данные погоды”, которую мы сконфигурировали ранее в Отправке запросов в Postman
- Нажимаем на ссылку
Code(под кнопкойSave) и выбираем JavaScript - jQuery AJAX
- копируем код и вставляем его вместо строки
POSTMAN CODE GOES HEREв нашем файлеweather.html. - непосредственно под
console.log(response);добавляем две строки:
var content = response.wind.speed;
$("#windSpeed").append(content);
В итоге код должен выглядеть так:
<html>
<meta charset="UTF-8">
<head>
<title>Sample page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var settings = {
"url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&units=imperial&appid=APIKEY",
"method": "GET",
"timeout": 0,
};
$.ajax(settings).done(function (response) {
console.log(response);
var content = response.wind.speed;
$("#windSpeed").append(content);
});
</script>
</head>
<body>
<h1>Sample Page</h1>
wind speed: <span id="windSpeed"></span>
</body>
</html>
В этом куске кода меняем APIKEY на наш актуальный ключ API
Что делает этот код? Если коротко, то когда ajax (функция jQuery) получает ответ от API, он назначает ответ response. Создается переменная с именем content и устанавливается равной response.wind.speed (для доступа к этому значению используется точечная нотация). Метод добавления jQuery вставляет содержимое после элемента с именем #windSpeed на странице. (Я понимаю, что это очень сокращенное объяснение, но объяснение JavaScript выходит за рамки этого курса. В общем, вы можете узнать больше, прочитав о функции jQuery.ajax.)
- Открываем Chrome, кликаем правой кнопкой мыши и нажимаем
view codeв правой верхней части переходим на вкладкуconsoleи раскрываемObject - В Chrome переходим в «Файл»> «Открыть файл» и выберите файл weather.html. (Если вы не видите меню «Файл» в Chrome, нажмите Cmd + O или Ctrl + O или просто перетащите файл weather.html в окно браузера.)
Тело страницы будет пустым, но ответ о погоде должен быть записан в консоли JavaScript (из-за кода console.log (response) в запросе). Если развернуть объект, возвращенный в консоль, он будет выглядеть следующим образом:
Теперь эта информация доступна для интеграции на вашей странице.
Метод AJAX из jQuery
В этом разделе узнаем больше о функции ajax, которую мы использовали ранее. Возможно, эта информация не важна для документирования API, но ее хорошо понимать. Скрипт ajaxв коде выглядит так:
<script>
var settings = {
"async": true,
"crossDomain": true,
"url": "https://api.openweathermap.org/data/2.5/weather?zip=95050&appid=fd4698c940c6d1da602a70ac34f0b147&units=imperial",
"method": "GET"
}
$.ajax(settings).done(function (response) {
console.log(response);
});
</script>
Если вы работаете с JavaScript и API, метод ajax из jQuery может помочь с примерами кода. Метод ajax ниже принимает один аргумент: settings
$.ajax(settings)
Аргумент settings - это объект, который содержит множество пар ключ-значение.
var settings = {
}
Каждая из разрешенных пар ключ-значение определены в документации jQuery ajax.
Одно важное значение - это url, который является URI или конечной точкой, на которую вы отправляете запрос. Другое значение - это headers, которые позволяют включать в запрос пользовательские заголовки.
Посмотрим на пример кода, который создали. Переменная settings передается в качестве аргумента методу ajax. jQuery делает запрос к URL-адресу HTTP асинхронно, что означает, что он не будет зависать на компьютере, пока мы ждем ответа. Можно продолжать использовать свое приложение при выполнении запроса.
Получаем ответ, вызвав метод done.
$.ajax(settings).done(function (response) {
})
В предыдущем примере кода done содержит анонимную функцию (функцию без имени), которая выполняется при вызове done. Объект ответа от вызова ajax назначается аргументу метода done, который в данном случае является response. (Можно назвать аргумент как угодно.)
Затем можно получить доступ к значениям из объекта ответа, используя обозначение объекта. В этом примере ответ только зарегистрирован в консоли.
Новичку в JavaScript, возможно, будет немного непонятно сейчас. Если это так, не беспокойтесь - чем больше вы его используете, тем яснее становится код.
Логгирование ответов в консоли
Строка кода, которая логгирует ответы в консоль, была просто такой:
console.log(response);
Логгирование ответов в консоли может быть полезным способом проверить, работает ли ответ API (что также полезно для отладки или устранения неполадок в коде). Консоль сворачивает каждый объект внутри расширяемой секции. Можно проверить полезные данные в консоли, чтобы увидеть, содержатся ли ожидаемые значения (без вывода значений на страницу).
Можно добавить другую информацию в сообщение журнала консоли. Чтобы предварить сообщение журнала своей строкой, можно сделать так:
console.log("Here's the response: " + response);
Строки всегда заключаются в кавычки, и используем знак + для объединения строк с переменными JavaScript, такими как response.
Настройка сообщений журнала полезна для логгирования различных выходных данных в консоли, если нужно пометить их идентификатором.
👨💻 Практическое занятие: Изучаем полезные данные
Посмотрим на полезные данные, развернув каждый из разделов, возвращаемых в консольном объекте JSON. Основываясь на полученной информации, можно узнать прогноз на сегодня?