点击按钮调用GitHub用户API获取数据时页面自动刷新问题求助

• 你的button元素默认被识别为表单提交按钮：如果button嵌套在<form>标签内且未显式声明type="button"，HTML规范中其默认type值为submit。点击时会触发表单的默认GET提交行为，导致页面刷新、URL末尾追加?，你的异步请求还未完成执行就被页面刷新中断，因此控制台没有输出。
• 直接调用函数不会触发按钮的点击默认行为，所以请求可以正常执行拿到结果。
• 另外你的异步写法存在冗余：fetch.json()本身返回Promise，你混用了await和.then两种异步处理方式，虽然不是核心问题但可以优化。

方案一：指定按钮类型 #

直接在HTML的button标签上添加type属性，明确为普通按钮：

<button type="button">触发请求</button>

方案二：阻止事件默认行为 #

修改事件回调函数，接收事件参数并阻止默认提交行为，同时优化异步写法：

const btn = document.querySelector('button') as HTMLButtonElement
const input = document.querySelector('input') as HTMLInputElement

const USER_API: string = 'https://api.github.com/users/callmenikk'

const fetchData = async (e: Event) => {
    // 阻止表单默认提交行为
    e.preventDefault()
    const fetchUser = await fetch(USER_API)
    // 这里也需要加await处理json()的异步返回
    const userData = await fetchUser.json()
    console.log(userData)
}

btn.addEventListener('click', fetchData)

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