После того, как вы будете следовать этому руководству, вы создадите веб-страницу, которая находит текущее состояние погоды по запросу с названием города, предоставленному пользователем.
Вам не нужен какой-либо JavaScript-фреймворк, вам нужен только чистый JavaScript и HTML (но я использовал TailwindCSS)
HTML
Во-первых, вы собираетесь структурировать веб-страницу. Эта страница получит строку запроса для названия города и представит текущие данные о погоде в городе, который искал пользователь.
Теперь дело сделано. Вы видите, что это прекрасно отображается на экране мобильного и настольного компьютеров.
«Окно результатов» скрыто до того, как пользователь что-то ищет.
API
Теперь то, что мы пытаемся сделать, это показать данные о погоде. Но откуда мы знаем? Вот OpenWeatherMap. И вы можете использовать бесплатные данные, просто зарегистрировавшись на сайте.
Конечная точка для получения текущих данных о погоде
Вы можете управлять своим ключом API здесь
Что это за API? API — это обещание об отправке и получении данных. Поставщики услуг создают несколько конечных точек для предоставления данных о конкретной информации тому, у кого есть привилегия, с которой оба согласны.
Манипуляции с DOM
Во-первых, у вас должен быть дескриптор для изменения и управления тегом на вашем веб-сайте. Браузер поддерживает переменные и методы для выполнения этой работы.
В «документе» вы можете вызвать «запрос» с помощью «селектора».
#box indicates a tag which has an ID as 'box' .box means tags which has class as 'box' div means every div tags under this document
И вы можете ловить события, добавляя прослушиватели событий. В данном случае вы используете событие «нажатие клавиши».
Для вызова API
Чтобы запросить что-то через сеть, вы будете использовать подготовленный метод «выборка». Для основных методов может быть несколько оболочек, но вам нужно придерживаться основ.
Перейдя по ссылке ниже, вам нужны эти значения
- URL-адрес конечной точки
- КЛЮЧ API
- название города
Здесь вы автоматически генерируете конечную точку URL, используя метод «destinationUrl».
Когда вы указываете параметр cityName, он возвращает полную форму строки URL.
Вот описание метода выборки.
Во-первых, метод выборки возвращает строку после вызова целевого URL.
и «затем» он получает возвращенную строку в качестве имени параметра «ответ», но вы можете назвать его как «рез» или «результат», как хотите.
Чтобы использовать строку в качестве объекта, вы должны преобразовать необработанное строковое значение в объектную форму.
response => response.json()
Это означает это.
(response) => {
return response.json()
}
И удлиненная форма.
let response = fetch('http://....')
let data = response.json()
console.log(data)
Но это не то же самое с исходным кодом. Я объясню это дальше.
Вот сетевой запрос, и вы можете увидеть необработанные работы в вашем инструменте разработчика в браузере.
Асинхронные работы
Это рабочий пример. Итак, что такое «тогда» и «подвох»?
В среднем ваша машина запускает код построчно в порядке сверху вниз. Но вы можете знать, что сетевой запрос всегда требует времени. Это не работает мгновенно.
Таким образом, если ваша машина всегда ждет, пока не будет завершена сетевая работа, ваши остальные работы ожидаются, а не ответ, вы ничего не можете сделать, пока не будет завершена работа, затрачивающая время.
Итак, ваша машина выполняет следующий код, не дожидаясь «трудоемких работ».
let response = fetch('http://....')
let data = response.json()
console.log(data)
В этом коде значение «данные» фактически не существует. Потому что машина все еще ожидает результата от операции выборки и уже выполнила «response.json».
Обещай, жди, асинхронно
Обещание — это способ выполнения асинхронной задачи. В методе, если вы возвращаете Promise, а не другое фактическое значение (String, Int, Object и т. д.), этот метод является асинхронным методом.
И вы можете использовать «тогда», чтобы убедиться, что асинхронная работа выполнена. Когда вы реализуете коды под блоком then. Он будет работать после завершения основной работы.
function heavyWorks (param) {
return new Promise(res, rej){
// res() or rej()
}
}
Если этот метод возвращает 'res()', он срабатывает 'тогда', а если возвращает 'rej()', срабатывает 'catch'
Это обещание относительно будущего результата
Но если вам нужно дождаться выполнения обещания, вы можете использовать ключевое слово «ожидание» перед выполнением асинхронной работы.
let result = await heavyWorks(param)
Но этот блок означает, что это также асинхронная работа, как и метод «heavyWorks».
Таким образом, вы должны уведомить родительский метод о том, что это «трудоемкая работа».
async function mainWorks(){
let result = await heavyWorks(param)
//...
}
Наконец-то вы поняли, что такое async, promise, await.
Полный кода
Вот полный код, включая дополнительную часть отображения информации о погоде на веб-странице.
