显示来自 fetch api 的数据

Question

您好，我想从 avascan api 获取数据并将其显示在 html 中，但我无法执行此操作。我尝试过获取 api、json 和 ajax 方式，但 none 对我有用。有什么建议么？这是我的 html https://avascan.info/api/v1/home/statistics

const api_url = 'https://avascan.info/api/v1/home/statistics';


async function getAVA() {
  const response = await fetch(api_url);
  const data = await response.json();
  const {
    blockchains,
    validators
  } = data;
  document.getElementById('lat').textContent = blockchains.toFixed(2);
  document.getElementById('lon').textContent = validators.toFixed(2);
}

getAVA();

setInterval(getAVA, 1000);

<h1>What the stats?</h1>

<p>
  blockchains: <span id="lat"></span>°<br /> validators: <span id="lon"></span>°
</p>

<div id="issMap"></div>

Answer 1

您似乎遇到了这个错误：请求的资源上没有 'Access-Control-Allow-Origin' header。

这是一个 CORS 保护，您可能需要某些要求才能获取此数据，例如 api 密钥，或更新配置您在获取方法中的选项

这里有一个resource来帮助

Answer 2

如前所述，您遇到了 CORS 保护错误。

不过您似乎需要使用 GraphQL API：https://graphql.avascan.info/

看看这个简单的例子：

      async function getAVA() {

        fetch('https://graphql.avascan.info', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
            query: `
            query {
                stats {
                    priceAvaxUsd,
                    connectedNodes
                }
            }`
            }),
            })
            .then((res) => res.json())
            .then((result) => console.log(result));
      }

      getAVA();

显示来自 fetch api 的数据

Display Data from fetch api

javascript

jquery

json

jsonp

fetch-api