javascript - Count Api 返回未定义的响应

Question

世界! 我是编程世界的新手，一个 friend 正在教我基础知识，我想用我做的东西给他一个惊喜，但我找不到这个问题的答案。

我使用了一个api来制作一个计数器，但是当我去调用它时， 它给了我未定义的，我不明白为什么。 有人可以帮助我吗？

实际上我正在使用 bootstrap 作为 IDE。

感谢您的帮助

这是我的代码:

   
   
const countEl = document.getElementById('count');

updateVisitCount();



function updateVisitCount() {
    
    fetch('https://api.countapi.xyz/update/http://localhost:8080/Freedom/test/?amount=1')
    .then(res => res.json())
    .then(res => {
        countEl.innerHTML = res.value;
        
    })
}

<div class="text-center">
   <p>This page was viewed</p>
<h1 id="count">0</h1>
<p>times</p>
   </div>

Answer 1

这是因为您在 API URL 中使用 localhost。

事情就是这样。 localhost 是您自己的计算机在您自己的网络上的地址。您可以阅读有关本地网络地址的信息，您的计算机在家庭网络内有一个类似 192.168.x.y 的 IP 地址(x 不同，但通常是 0,1 或 100，y 是您的设备编号)。为了不弄乱该 IP 地址，您可以写 localhost，这样可以更轻松地访问您在计算机上使用的任何内容，因为您不必记住那些 192.168 bla bla 数字。

现在的问题是计数器 API 是公共(public) API，这意味着它是在这个世界的某个地方运行的服务器。因此，当您调用它时，它会执行其操作并返回它发送给您的最后一个值加 1(假设您过去调用过)。据我所知，它会记住您的地址，因为您将其传递给 URL 中的 api。它必须记住您的地址，否则它永远不会知道您是谁。

好吧，在你的例子中，你将 localhost 传递给它，这不是一个真实的地址，这个世界上的每台计算机都有 localhost，因此计数器 API 不知道你是谁。

打个比方。想象一下，计数器 API 是一个住在 X 国的人，他的工作是跟踪您当天做了多少个俯卧撑。为了让这个人记住你做了多少个俯卧撑，它要求你给他你的家庭住址，这样当你下次告诉他你成功做了多少个俯卧撑时，他就会记住你。现在，您在代码中所做的基本上如下:而不是说。 我做了 20 个俯卧撑。我住在x街，y市，z国，你说我做了20个俯卧撑。我住在我的卧室里。。现在，这家伙就像计数器 api 一样感到困惑。他就像“好吧，每个人都有一间卧室......你有什么不同？”。这是一个相当愚蠢的类比，但我希望你能明白。

现在，解决方案是向该计数器 API 提供您在互联网上的真实地址。只需转到 google 并输入 my ip，您就可以通过访问第一个网站获得 IPv4 地址。该地址是您的真实地址 - 就像您家里的地址一样，但它是您在全能互联网上的本地网络地址。

因此，API Url 看起来有点像这样 https://api.countapi.xyz/hit/[your_ip_address] 并且它将返回您最后得到的值加一。

因此更改以下获取:

fetch('https://api.countapi.xyz/hit/[your_ip_address]')

我假设您不熟悉 IP 地址，因此您在 google 上该网站上找到的 IP 地址应该如下所示 - 37.75.83.9，这是我刚刚编造的 IP 地址，尽管这可能是某人的实际地址。

无论如何，现在你的计数器应该可以工作了。每次刷新页面时，该值都应该增加一。我希望你给你的 friend 一个惊喜:)