Javascript 如何通过查询从输入字段异步获取api数据？

我正在练习创建一个天气应用程序，我想使用AsyncWait获取数据。但在此之前，我需要阅读用户在搜索栏中提供的城市名称。在我当前的代码中，异步函数尝试在查询中不设置城市的情况下获取数据。 我如何用最佳实践来处理这个问题，这样只有在检索到citname之后才能调用天气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());

})();

“严格使用”；
（功能（）{
const inputEl=document.querySelector（“.search placholder”）；
//获取表单元素。
const formEl=document.querySelector（'form.weatherdata form'）；
让cityName=''；
const debounce=（函数、等待、立即）=>{
var超时；
返回函数（）{
var context=this，args=arguments；
var later=function（）{
超时=空；
如果（！immediate）函数应用（上下文，参数）；
};
var callNow=立即&&！超时；
clearTimeout（超时）；
超时=设置超时（稍后，等待）；
if（callNow）funct.apply（上下文，参数）；
};
};
常量handleSearchText=去盎司（（e）=>{
cityName=e.target.value；
inputEl.placeholder=cityName；
}, 250);
inputEl.addEventListener（“键控”，handleSearchText）；
//请求openweatherapi并调用api
异步函数getWeatherdata（事件）{
const form=event.target.form；
const formData=新的formData（form）；
让cityName=formData.get（'city-name'）；
console.log（cityName）
常量url=`http://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=2489ed561dc99d173a2f394574bc107e`；
const response=等待获取（url{
方法：“POST”，
正文：formData
});
event.preventDefault（）；
返回response.json（）；
}
const weatherDetails=formEl.addEventListener（'submit'，getWeatherdata）；
控制台日志（天气详情）
})();

我的凉爽天气应用程序
将您的
提交
事件侦听器添加到
表单
元素，而不是直接使用按钮。这将使您能够使用从表单中提取表单元素的所有值

确保您的
输入
字段具有
名称
属性，因为我们将使用该属性获取所需的值

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

修改
getWeatherdata
函数以提取当前事件的
target
属性。这将为我们提供已提交的表格信息。这为将此功能应用于其他形式提供了可能性

使用
form
作为参数创建
FormData
的实例，以创建输入及其名称和值的提取。使用该方法，您可以通过提供表单名称从表单中选择单个值。将该值注入到URL字符串中，就完成了

编辑
表单
常量未定义，应该是
事件。目标
；未找到表单，因此未找到值。我还添加了一个检查，如果
cityName
是空字符串，它将停止函数，并且不会调用
fetch
。如果要无条件调用
fetch
，请删除
if
语句

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);

希望这能帮到你，朋友。如果这不能解决您的问题，或者您还有更多问题，请告诉我

干杯
 非常感谢您的详细解释！我现在有两个问题：1。cityName从何而来->const cityName=formData.get（'cityName'）；2.my handleSearchText函数是否保持不变？
应具有
名称
属性。在本文中，我认为假设输入的名称是
cityName
是合适的。我将把它添加到答案中。是的，
handleSearchText
不会干扰
getWeatherdata
，并且不需要更改。我仍然为cityName设置null。您的
输入是否与
formData.get（name）中的name参数具有相同的
name
属性值？如果没有，结果将为空。否则，您是否可以创建一个代码段来处理其余的代码？我刚刚编辑了我的问题以包含该代码段。谢谢
formEl.addEventListener('submit', getWeatherdata);