获取 API 时页面重新加载

Posted 2023-03-13

【中文标题】获取 API 时页面重新加载

【英文标题】：Page Reloads On Fetching API

【发布时间】：2021-08-26 21:51:30

【问题描述】：

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

【参考方案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))

【讨论】：

感谢您的回复，但我已经解决了这个问题，问题是，关于表单必须有 onSubmit="return false; 并且我的输入文件没有类型 text，这是我的问题，我也试过了并且工作