Javascript 如何使用天气api中的输入？

我认为如何解决这个异步问题。为什么在提取之前不读取输入

const key=<API-KEY>
const searchInput = document.querySelector(".bottom");
const form = document.querySelector(".search-box");
let searchValue;

    

form.addEventListener('input',updateInput);
searchInput.addEventListener('submit', (e) =>{
  e.preventDefault();
  findcity(searchValue);
})


function updateInput(e){
  
  searchValue=e.target.value;
  console.log(e.target.value);
  
}


  async function findcity(query){
   
    const datafetch = await fetch(`http://api.openweathermap.org/data/2.5/weather?q=${query}+&appid=${key}`)
    .then(response =>{
      let data=  response.json()
      
    .then((data) => {
        console.log(data);
      })
    })
    }
    findcity();

常数键=
const searchInput=document.querySelector（“.bottom”）；
const form=document.querySelector（“.search box”）；
让我们去寻找价值；
表单.addEventListener（'input'，updateInput）；
searchInput.addEventListener（'submit'，（e）=>{
e、 预防默认值（）；
findcity（搜索值）；
})
函数更新输入（e）{
搜索值=e.target.value；
console.log（如target.value）；
}
异步函数findcity（查询）{
const datafetch=等待获取(`http://api.openweathermap.org/data/2.5/weather?q=${query}+&appid=${key}`）
。然后（响应=>{
让data=response.json（）
。然后（（数据）=>{
控制台日志（数据）；
})
})
}
findcity（）；

这里我更新了输入值，它在控制台日志中工作 当我加载页面时，console.log数据给了我immedetyle，他找不到城市