请求数据后页面自动刷新，控制台日志消失问题求助

问题原因 #

你的按钮大概率嵌套在<form>标签内部，浏览器会将未指定type属性的<button>默认识别为submit类型，点击时触发表单的默认提交行为，导致页面刷新、控制台日志被清空。这和你使用ES6 modules、webpack无关，属于浏览器原生默认行为。

解决方法 #

两种简单的修复方式任选其一即可：

1. 阻止事件默认行为
   在点击事件处理函数中添加event.preventDefault()，取消表单提交的默认动作：

const searchbar = document.querySelector('.searchbar');
const searchBtn = document.querySelector('.search-btn');

searchBtn.addEventListener('click', async (event) => { // 接收event参数
  event.preventDefault(); // 阻止默认提交行为
  const searchTerm = searchbar.value;
  try {
    const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${searchTerm}&appid=*********`);

    const { lat, lon } = response.data.coord;
    const cityName = response.data.name;
    console.log({ lat, lon, cityName });
  } catch (err) {
    alert(`${err} from getLocation`);
    return undefined;
  }
});

2. 指定按钮类型
   在HTML中给按钮添加type="button"属性，明确它不是表单提交按钮：

<button class="search-btn" type="button">搜索</button>

验证效果 #

修改后再次点击按钮，请求完成后页面不会刷新，控制台的日志会正常保留。

内容的提问来源于stack exchange，提问作者Ma_20Hs