获取 API 时页面重新加载

Question

我目前正在研究 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 将此功能放在外面，它运作良好。我做错了什么？

Answer 1

你的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))
}