Json 页面在获取API时重新加载

我目前正在开发Github用户API，我想在开始项目之前测试一下它是如何工作的，但我有一个问题

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 () => {
    const fetchUser = await fetch(USER_API)
    const userData = fetchUser.json()
    userData.then(resolve => console.log(resolve))
}

btn.addEventListener('click', fetchData)

---

有了这个功能，我想在控制台中输出我的个人用户数据，但它会重新加载页面，并在链接的末尾打上问号，就像这样

http://localhost:3000/?

没有在控制台中输出我的JSON，但是没有EventListner将此函数放在外部，它工作得很好。我做错了什么？

我认为您的

btn

（html属性

type

）的来宾类型是

submit

，然后当您单击按钮时，将提交表单。该操作将重新加载您的页面

要解决该问题，可以删除按钮类型，或忽略事件处理程序函数中的提交事件

const fetchData = async (event) => { // event parameter
    event.preventDefault(); // ignore event
    const fetchUser = await fetch(USER_API)
    const userData = fetchUser.json()
    userData.then(resolve => console.log(resolve))
}

---

感谢您的回复，但我已经解决了这个问题，问题是，关于表单必须有

onSubmit=“return false；”

，并且我的输入字段没有类型

文本，这是我的问题，我也尝试了这个问题并成功了