GitHub API 失败,JavaScript FETCH
GitHub API fails with JavaScript FETCH
GitHub 似乎自 2021 年底以来进行了更新。
https://developer.github.com/changes/2020-02-10-deprecating-auth-through-query-param/
我关注了许多资源,其中以下代码增加了每小时可以执行的请求量。现在下面的请求不起作用。相反,文档说使用 CURL,因此例如以下在终端中工作:
curl -u client_id:secret_key https://api.github.com/users/<username>
我想在 JavaScript 中执行此操作,我正在 JavaScript 中使用 GitHub 用户查找器应用程序。有人可以告诉我如何让它真正起作用吗?我使用的代码如下。
TL:DR:我可以使用下面的代码访问 github API 并接收要显示的 JSON 对象,但它限制为每小时 60 个请求。 GitHub 文档说,自 2021 年底以来,不再允许使用查询参数,所以我现在迷路了。我现在如何在 JavaScript 中执行此操作?
const client_id = "df2429c311a306c35233";
const client_secret = "5c23233326680aa21629451a6401d36ec";
const fetchUsers = async (user) => {
const api_call = await fetch(`https://api.github.com/users/${user}?client_id=df5429c311a306c356f4&
client_secret=${client_secret}`);
const data = await api_call.json();
return {data};
};
EDIT/UPDATE:
const inputValue = document.querySelector("#search");
const searchButton = document.querySelector(".searchButton");
const nameContainer = document.querySelector(".main__profile-name");
const unContainer = document.querySelector(".main__profile-username");
const reposContainer = document.querySelector(".main__profile-repos");
const urlContainer = document.querySelector(".main__profile-url");
const client_id = "<user_id>";
const client_secret = "<client_secret>";
const headers = {
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
}
const fetchUsers = async (user) => {
const api_call = await fetch(`https://api.github.com/users/${user}`, {
method: 'GET',
headers: headers
});
const data = await api_call.json();
return {data};
};
const showData = () => {
fetchUsers(inputValue.value).then((res) => {
console.log(res);
nameContainer.innerHTML = `Name: <span class="main__profile-value">${res.data.name}</span>`
unContainer.innerHTML = `Username: <span class="main__profile-value">${res.data.login}</span>`
reposContainer.innerHTML = `Repos: <span class="main__profile-value">${res.data.public_repos}</span>`
urlContainer.innerHTML = `Url: <span class="main__profile-value">${res.data.url}</span>`
})
};
searchButton.addEventListener("click", () => {
showData();
})
它们相当于基本身份验证类型的用户名和密码。因此,您的 Api 请求应具有以下 header.
const headers = {
'Authorization': 'Basic ' + btoa(CLIENT_ID + ':' + CLIENT_SECRET)
}
请注意,使用 btoa 函数是因为浏览器本身不支持 Buffer。如果 btoa 抛出错误然后尝试使用 window.btoa 并像
一样使用它
const response = await fetch(url, {method:'GET',
headers: headers,
})
GitHub 似乎自 2021 年底以来进行了更新。
https://developer.github.com/changes/2020-02-10-deprecating-auth-through-query-param/
我关注了许多资源,其中以下代码增加了每小时可以执行的请求量。现在下面的请求不起作用。相反,文档说使用 CURL,因此例如以下在终端中工作:
curl -u client_id:secret_key https://api.github.com/users/<username>
我想在 JavaScript 中执行此操作,我正在 JavaScript 中使用 GitHub 用户查找器应用程序。有人可以告诉我如何让它真正起作用吗?我使用的代码如下。
TL:DR:我可以使用下面的代码访问 github API 并接收要显示的 JSON 对象,但它限制为每小时 60 个请求。 GitHub 文档说,自 2021 年底以来,不再允许使用查询参数,所以我现在迷路了。我现在如何在 JavaScript 中执行此操作?
const client_id = "df2429c311a306c35233";
const client_secret = "5c23233326680aa21629451a6401d36ec";
const fetchUsers = async (user) => {
const api_call = await fetch(`https://api.github.com/users/${user}?client_id=df5429c311a306c356f4&
client_secret=${client_secret}`);
const data = await api_call.json();
return {data};
};
EDIT/UPDATE:
const inputValue = document.querySelector("#search");
const searchButton = document.querySelector(".searchButton");
const nameContainer = document.querySelector(".main__profile-name");
const unContainer = document.querySelector(".main__profile-username");
const reposContainer = document.querySelector(".main__profile-repos");
const urlContainer = document.querySelector(".main__profile-url");
const client_id = "<user_id>";
const client_secret = "<client_secret>";
const headers = {
'Authorization': 'Basic ' + (new Buffer(client_id + ':' + client_secret).toString('base64'))
}
const fetchUsers = async (user) => {
const api_call = await fetch(`https://api.github.com/users/${user}`, {
method: 'GET',
headers: headers
});
const data = await api_call.json();
return {data};
};
const showData = () => {
fetchUsers(inputValue.value).then((res) => {
console.log(res);
nameContainer.innerHTML = `Name: <span class="main__profile-value">${res.data.name}</span>`
unContainer.innerHTML = `Username: <span class="main__profile-value">${res.data.login}</span>`
reposContainer.innerHTML = `Repos: <span class="main__profile-value">${res.data.public_repos}</span>`
urlContainer.innerHTML = `Url: <span class="main__profile-value">${res.data.url}</span>`
})
};
searchButton.addEventListener("click", () => {
showData();
})
它们相当于基本身份验证类型的用户名和密码。因此,您的 Api 请求应具有以下 header.
const headers = {
'Authorization': 'Basic ' + btoa(CLIENT_ID + ':' + CLIENT_SECRET)
}
请注意,使用 btoa 函数是因为浏览器本身不支持 Buffer。如果 btoa 抛出错误然后尝试使用 window.btoa 并像
一样使用它const response = await fetch(url, {method:'GET',
headers: headers,
})