API问题，是否有办法使它们有意义

Question

我一直试图理解API的(能够使一个简单的仪表板)，作为一个概念，因为如何只是困惑我。我写了一些代码，并由一个聪明得多的人添加了一些更正，他实际上知道自己在做什么，但是....我一点也不懂。

我只是被这意味着什么弄糊涂了，我觉得自己是整个宇宙中最愚蠢的人，坦率地说，我没有主意了，所以我把自己扔在堆栈溢出的摆布下，希望我能得到一个指针。我不指望任何人为我做这件事，我只是需要从不同的角度来指导。

也许我做得太错了，我需要把它从轨道上炸掉，然后重新开始?也许。

const newsMount = document.getElementById(`news-mount`);
newsMount.innerHTML = `<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>`;
const newsAPI_key = `03e2495c94587b3792e617e2c72ebe96`;
//url
/********* YOU DIDN'T ADD THIS VARIABLE (and it's query, not news city) ******** */
const query = "ukraine";
const newsEndpoint = `https://gnews.io/api/v4/search?q=${query}&token=${newsAPI_key}`;
// TRY to use async/await. (You'll need to be in a script loaded with type="module" or an IIFE with the async keyword before the function keyword)
try {
const response = await fetch(newsEndpoint);
if (!response.ok) throw response;
const data = await response.json();
console.log(":rocket: ~ file: main.js ~ line 83 ~ data", data);
renderNews(data.articles); // send the right bit of the data on
} catch (err) {
console.log(":rocket: ~ file: main.js ~ line 86 ~ err", err);
// deal with error
}
function renderNews(articles) {
console.log(":rocket: ~ file: main.js ~ line 91 ~ renderNews ~ articles", articles);
// loop over the data and append
for (const article of articles) {
const {
title,
content,
// main: { headline },
} = article;
// You'd want to do this with a documentFragment, rather than keep adding HTML to the DOM multiple times...
newsMount.innerHTML += `
<div class="card">
<div class="card-body">
<h2 class="card-title">${title}</h2>
<p>${content}</p>
</div>
</div>
`;
}
}
// sports
const leagues = "leagues";
const sportsName = document.getElementById(`sports-mount`);
sportsName.innerHTML = `<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>`;
// You used a normal string instead of a template string here...
const sportsEndpoint = `https://api-football-v1.p.rapidapi.com/v3/q=${leagues}?id=39`;
const options = {
method: "GET",
headers: {
"X-RapidAPI-Host": "api-football-v1.p.rapidapi.com",
"X-RapidAPI-Key": "7720ed5535mshd73c681a1e70e9cp10f92djsn180d9fb",
},
};
// response says that "You're not subscribed to this API" - so you'll need to check your settings in your rapidapi.com dashboard
try {
const response = await fetch(sportsEndpoint, options);
if (!response.ok) throw response;
const data = await response.json();
console.log(":rocket: ~ file: main.js ~ line 83 ~ data", data);
renderNews(data.articles); // send the right bit of the data on
} catch (err) {
console.log(":rocket: ~ file: main.js ~ line 141 ~ err", err);
// deal with error
}

Answer 1

首先，不要难过，每个人都从小事做起。但我认为它可以帮助你使用请求库。这会让事情变得简单一些。

你也可以观看YouTube指南来了解API的基本知识。试试这个

Answer 2

我不认为你说得太远了，在我看来，这些评论并不都是有帮助的(它们根本不是不正确的——有些只是与你所遇到的问题完全无关)。

首先，作为一种方法，最好一次只做一件事，让它工作(如果你有可能破坏它而又不明白为什么，那么就git commit)，然后再添加。

例如，在没有任何DOM (getElement等)的情况下使读取工作，或者在没有读取的情况下使DOM工作。当然，在实现两个API调用之前，只尝试实现一个API调用。

对于你的问题本身，它需要更多的关注。是否有特定的代码行、不起作用的功能或注释是您不理解的?