获取 api 请求 onSubmit 的对象错误

Question

在下面的 CodePen 链接中使用 fetch api，在查询用户名 onSubmit 时尝试使用从 Github 配置文件中提取的数据构建用户配置文件卡。当我从getUserProfile() 函数中提取提取块时，它工作正常，但是当我从按钮单击调用它时，我只得到[object Error] {}。我错过了什么？

https://codepen.io/smallreflection/pen/omxxmr

// https://flaviocopes.com/fetch-api/
// https://css-tricks.com/using-fetch
	
let myUserName = document.querySelector('#user-name');
let myUserProfile = document.querySelector('#user-profile-img');
let myCompanyName = document.querySelector('#user-company');
let myUserLink = document.querySelector('#user-link');


var getUserProfile = (e) => {
	console.clear();
	let userId = document.querySelector('#user-name-input').value;
	
	if (userId === '') { e.preventDefault(); }
	
	console.log(userId);

	return fetch(`https://api.github.com/users/${userId}`)
	  .then(response => response.json())
	  .then(data => {
		  myUserName.innerText = data.name;
  		myUserProfile.style.backgroundImage = `url(${data.avatar_url})`;
	  	myCompanyName.innerText = data.company;
		  myUserLink.setAttribute('href', `${data.html_url}`);
    })
    .catch(err => console.error(err));
} // getUserProfile

* {
		box-sizing:border-box;
}

:root {
	--border-radius: 7px;
	--color-gray-x-light: hsl(0, 0%, 95%);
	--color-gray-light: hsl(0, 0%, 65%);
	--color-orange: hsl(20,95%,65%);
}

#user-wrapper {
	max-width:500px;
}

body { 
	font-family: arial;
	display:flex;
	align-items:center;
	justify-content:center;
	background-color:var(--color-gray-x-light);
	min-height:100vh;
}

h1, h2, h3, h4, h5, h6 { letter-spacing:-.05rem; }

#input-container {
	border-radius: var(--border-radius);
	display:flex;
	background-color:#fff;
	padding: 1rem 1.2rem;
	box-shadow:0 5px 15px hsla(0,0,0,.2);
	width:100%;
	margin-bottom:1rem;
}

form > input { 
	border:solid 1px var(--color-gray-light);
	font-size:1rem;
	height:38px;
	padding:5px 10px;
	background-color: var(--color-gray-x-light); 
	border-radius:var(--border-radius);
	flex-grow:1;
}

form > input::placeholder {
	color:var(--color-gray-light);
}

form > button {
	border:0;
	color: #fff;
	background-color:var(--color-orange);
	border-radius:var(--border-radius);
	height:38px;
	font-size:1rem;
	padding:5px 10px;
	margin:0 0 0 .75rem;
	cursor: pointer;
	font-weight:bold;
}

#user-profile {
	float:left;
	vertical-align:top;
	background-color:#fff;
	box-shadow:0 5px 15px hsla(0,0,0,.2);
	padding:1rem 1.2rem;
	border-radius:var(--border-radius);
	width:100%;
}

#user-profile-img {
	float:left;
	width:85px;
	height:85px;
	background: hsl(200, 5%, 92%);
	border-radius:50%;
	display:inline-block;
	margin-right:1rem;
	background-size:cover;
}

a {
	color: hsl(20,95%,65%);
	text-decoration:none;
}


#user-info {
	float:left;
	display:inline-block;
	max-width:200px;
}

#user-info > h1 {
	font-size:24px;
	margin:12px 0 3px 0;
}

#user-company {
	font-size:15px;
	font-style: italic;
	color: hsl(200, 5%, 75%);
}

<div id="user-wrapper">

	<div id="input-container">
		<form id="get-username">
			<input placeholder="Enter Github user ID" id="user-name-input" name="user-name-input">
			<button onClick="getUserProfile()">Get User</button>
		</form>
	</div>

	<div id="user-profile">
		<div id="user-profile-img"></div>
		<div id="user-info">
			<h1 id="user-name">My User</h1>
			<span id="user-company">Company Name</span><br/>
			<a href="#" id="user-link" target="_blank">View profile</a>
		</div>
	</div>
</div>

Answer 1

您遇到的错误是因为e 未定义，您需要在将event 传递给onClick 时显式传入getUserProfile 以获取getUserProfile

<button onClick="getUserProfile(event)">Get User</button>

更新代码getUserProfile

let getUserProfile = (e) => {
    console.clear();
    let userId = document.querySelector('#user-name-input').value;
    e.preventDefault();
    fetch(`https://api.github.com/users/${userId}`)
        .then(response => response.json())
        .then(data => {
            myUserName.innerText = data.name;
            myUserProfile.style.backgroundImage = `url(${data.avatar_url})`;
            myCompanyName.innerText = data.company;
            myUserLink.setAttribute('href', `${data.html_url}`);
    })
    .catch(err => console.error(err));
}