页面在获取时重新加载 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)

有了这个功能，我想在控制台中输出我的个人用户数据，但是，它重新加载页面并在 link 的结尾加上问号，就像那样 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))
}

页面在获取时重新加载 API

Page Reloads On Fetching API

api

json

github-api

async-await

typescript