javascript - 计数 Api 返回未定义的响应

Question

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

我用一个api做了一个计数器，但是当我去调用它的时候，它给了我未定义的，我不明白为什么。谁能帮帮我？

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

感谢帮助

这是我的代码:

   
   

<script>
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;
        
    })
}
</script>

<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 地址，尽管这可能是某人的实际地址。

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