[ Clique aqui para ler em portuguess]
Давайте сделаем запрос на API температуры, используя JavaScript Fetch
Код
Сначала давайте создадим интерфейс, мы сделаем что -нибудь простое, используя только HTML.
Чтобы представить данные, у нас есть div с двумя пролетами, один, чтобы представлять город, а другой, чтобы представлять температуру.
const CITY = document.getElementById('city');
const TEMPERATURE = document.getElementById('temperature');
const URL_MAIN = 'https://api.openweathermap.org/data/2.5/weather';
const API_KEY = '8f57cb746c4c1d4b48b7f35eba6f6230';
const UNITS = 'metric';
navigator.geolocation.getCurrentPosition(loadUrl);
function loadUrl(pos) {
let lat = pos.coords.latitude;
let long = pos.coords.longitude;
let url = `${URL_MAIN}?lat=${lat}&lon=${long}&units=${UNITS}&APPID=${API_KEY}`;
fetchApi(url);
};
async function fetchApi(url) {
let response = await fetch(url);
let { main, name } = await response.json();
let temperature = (main.temp).toFixed(1);
CITY.innerText = `${name}:`;
TEMPERATURE.innerText = `${temperature} ºC`;
}
Прежде всего, вы должны быть зарегистрированы на OpenWeathermap Сайт, когда вы зарегистрируетесь, у вас будет доступ к ключу, поэтому просто измените параметры в коде JS.
В константах у нас есть город, константа с Span Город Элемент и один с SPAN температура Элемент, тогда у нас есть три константы поддержки для запроса, Url_main (где URL -адрес сайта openweathermap , Api_key (где клавиша доступа) и Единицы (Где тип блока, который будет возвращен из API, для получения дополнительной информации см. Веб -сайт).
Для начала браузер собственный Геолокация API называется, и с ним LoadUrl функция называется.
В LoadUrl Функция мы получаем координату, которая пришла от Геолокация API и мы установили URL Чтобы проконсультироваться с API.
В Fetchapi Функция A Запрос сделан для URL Это было создано, и когда у нас есть ответ API, он отображается на странице с внутренний текст Анкет
готово так просто.
Демо
См. Ниже для полного рабочего проекта.
Если вы этого не видите кликните сюда и увидеть конечный результат
YouTube
Если вы предпочитаете смотреть его, посмотрите на разработку на YouTube.
Спасибо за чтение!
Если у вас есть какие -либо вопросы, жалобы или советы, вы можете оставить их здесь в комментариях. Я буду рад ответить!
😊😊 Увидимся позже! 😊😊
Поддержите меня
YouTube – WalernascimentObarroso Github – walernascimentobarroso Codepen – Walernascimentebarroso
Оригинал: “https://dev.to/walternascimentobarroso/consulting-temperature-api-with-js-4ibg”