Как получить данные API асинхронно с запросом из поля ввода? - PullRequest
Новая
       18

Как получить данные API асинхронно с запросом из поля ввода?

0 голосов
/ 18 января 2020

Я занимаюсь созданием приложения погоды и хочу получать данные с помощью asyn c await. Но перед этим мне нужно прочитать название города, которое пользователь указывает в строке поиска. В моем текущем коде функция asyn c пытается получить данные без указания города в запросе. Как я могу справиться с этим с помощью передового опыта, чтобы этот вызов API погоды выполнялся только после получения названия? Пожалуйста, найдите мой код ниже: 

'use strict';

(function() {
    const inputEl = document.querySelector(".search-placholder");
    let cityName = '';

    const debounce = (func, wait, immediate) => {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

    const handleSearchText= debounce(function(e) {
        cityName = e.target.value;
        console.log(cityName);
        inputEl.placeholder = cityName;
    }, 250);

    inputEl.addEventListener("keyup", handleSearchText);

    // make request to openweatherapi & make api call
    async function getWeatherdata(event) {
        const url = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=2489ed561dc99d173a2f394574bc107e`;
        const response = await fetch(url);
        console.log(url)
        return response.json();
        event.preventDefault();
    }

    inputEl.addEventListener('submit', () => getWeatherdata());

})();


'use strict';

(function() {
	const inputEl = document.querySelector(".search-placholder");
	// Get the form element.
	const formEl = document.querySelector('form.weatherdata-form');
	let cityName = '';

	const debounce = (func, wait, immediate) => {
		var timeout;
		return function() {
			var context = this, args = arguments;
			var later = function() {
				timeout = null;
				if (!immediate) func.apply(context, args);
			};
			var callNow = immediate && !timeout;
			clearTimeout(timeout);
			timeout = setTimeout(later, wait);
			if (callNow) func.apply(context, args);
		};
	};

	const handleSearchText = debounce((e) => {
		cityName = e.target.value;
		inputEl.placeholder = cityName;
	}, 250);

	inputEl.addEventListener("keyup", handleSearchText);

	// make request to openweatherapi & make api call
	async function getWeatherdata(event) {
		const form = event.target.form;
		const formData = new FormData(form);
		let cityName = formData.get('city-name');
		console.log(cityName)
		const url = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=2489ed561dc99d173a2f394574bc107e`;
		const response = await fetch(url, {
			method: 'POST',
			body: formData
		});
		event.preventDefault();
		return response.json();
	}

	const weatherDetails = formEl.addEventListener('submit', getWeatherdata);
	console.log(weatherDetails)

})();
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>My cool weather app</title>
	<link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<main>
		<div class="search-container">
			<div class="search-bar">
				<form class="weatherdata-form">
					<i class="fa fa-search fa-3x" id="icon"></i>
					<input type="text" class="search-placholder" placeholder="Type city to find weather..." name="city-name"/>
					<!-- <button type="submit">Submit</button> -->
				</form>
			</div>
		</div>
	</main>
	<script src="index.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 18 января 2020

Добавьте прослушиватель событий submit к элементу form вместо кнопки напрямую. Это даст вам возможность извлечь все значения элементов формы из вашей формы с помощью FormData API.

. Убедитесь, что ваши поля input имеют атрибут name как мы будем использовать это для получения необходимых значений. 

<form class="weatherdata-form">
  <input class="search-placholder" type="text" name="city-name"/>
  <button type="submit">Submit</button>
</form>

// Get the form element.
const formEl = document.querySelector('form.weatherdata-form');

Измените вашу функцию getWeatherdata, чтобы извлечь свойство target текущего события. Это даст нам информацию, какая форма была представлена. Это открывает возможность сделать эту функцию применимой к другим формам.

Создайте экземпляр FormData с аргументом form для извлечения ваших входных данных с их именами и значениями. С помощью метода FormData.get() вы можете выбрать одно значение из формы, указав его имя. Вставьте это значение в строку URL-адреса, и все готово.

Редактировать

Константа form имеет неопределенное значение и должна была быть event.target; Форма не найдена, и поэтому значения не найдены. Я также добавил проверку, что если cityName - пустая строка, она остановит функцию и не вызовет fetch. Удалите оператор if, если хотите вызвать fetch без условий. 

async function getWeatherdata(event) {
  const form = event.target;
  const formData = new FormData(form);
  const cityName = formData.get('city-name');
  if (cityName === '') return;
  event.preventDefault();
  const url = `http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=2489ed561dc99d173a2f394574bc107e`;
  const response = await fetch(url);
  const json = await response.json();
  console.log(json);
}

Добавьте прослушиватель событий в элемент формы и установите обратный вызов слушателя непосредственно для функции getWeatherdata. Теперь форма отправит событие и откроет все значения формы для использования. 

formEl.addEventListener('submit', getWeatherdata);

Надеюсь, это поможет вам, друг. Если это не помогло решить ваш вопрос или у вас есть другие вопросы, пожалуйста, дайте мне знать.

Ура!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...