如何用原生JavaScript实现点击搜索按钮和输入框按回车都触发async异步函数

完全可以通过原生JavaScript实现该需求，核心思路是给输入框绑定键盘事件，同时将搜索逻辑抽为公共函数供两个触发场景复用，具体修改如下：

原有代码问题说明 #

你当前把搜索逻辑直接定义为按钮点击的回调函数，无法被其他事件复用，且缺少输入框的键盘事件监听逻辑，同时代码中存在async/await和Promise.then混用的不规范写法。

完整修改后的JS代码 #

// 获取DOM元素
const searchInput = document.getElementById("input-search");
const searchButton = document.getElementById("search-button");

// 抽离公共异步搜索函数
async function handleSearch() {
  const username = searchInput.value.trim();
  // 可选：加空值判断，避免无内容提交
  if (!username) return;
  
  try {
    const response = await axios.get(`https://api.templatewebsite`);
    if (response.status !== 200) {
      throw new Error(response.status);
    }
    const data = response.data;
    console.log(data);
    // 后续业务逻辑写在这里
  } catch (err) {
    console.error('搜索请求出错：', err);
  }
}

// 绑定按钮点击事件
searchButton.addEventListener('click', handleSearch);

// 绑定输入框回车事件
searchInput.addEventListener('keyup', (e) => {
  // 判断按下的是回车键
  if (e.key === 'Enter') {
    handleSearch();
  }
});

注意事项 #

• 推荐使用addEventListener绑定事件，避免直接给onclick赋值覆盖其他绑定的同类型事件
• 优先用e.key === 'Enter'判断回车键，keyCode属性已被Web标准废弃
• 抽离后的搜索函数可以在任意需要触发搜索的场景直接调用

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