如何从api中获取数据？答案

【问题标题】：How to fetch data from api?如何从api中获取数据？
【发布时间】：2021-10-26 18:50:48
【问题描述】：

我想从 api 获取数据（尤其是市值）并将其显示在我的 div 中。但是我的 html 没有显示任何关于执行的数据。我可能做错了什么？

<text id="result"></text>

  <script>
  // API for get requests 

  let fetchRes = fetch(
        "https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX"); 

   // fetchRes is the promise to resolve 

   // it by using.then() method 

   fetchRes.then((res) => res.json())
    .then((result) => {
      console.log(result);
      document.getElementById('result').innerHTML = result.config.data.0.market_cap;
    })
    .catch(error => {
      console.log(error);
    })
      
    </script>

【问题讨论】：

标签： javascript json fetch fetch-api

【解决方案1】：

两个建议：

为什么不直接将.then() 链接到fetch()？
您似乎对如何访问结构中的数据有些困惑 - 您所追求的是 result.data[0].market_cap。

// API for get requests 

let fetchRes = fetch("https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX")
  .then((res) => res.json())
  .then((result) => {
    console.log(result);
    document.getElementById('result').innerHTML = result.data[0].market_cap;
  })
  .catch(error => {
    console.log(error);
  })

&lt;text id="result"&gt;&lt;/text&gt;

除此之外：您可能应该使您包含在此处的 API 密钥失效，因为它现在已经公开，并且可以用来伪造您对该 API 的请求。

【讨论】：

是的，谢谢，还有一个问题，我想将这个数字显示为 76.9 亿而不是 7692083188。有什么可能的方法可以实现吗？
@Prime 正如您所问的那样，这超出了问题的范围，但我鼓励您使用搜索功能来解决已经提出的此类问题，因为它会是how to convert numbers to million in javascript 的副本

【解决方案2】：

我正在使用 jQuery 框架 轻松地做到这一点。检查下面的代码。

<script>
    $.get(
        "https://api.lunarcrush.com/v2",
        {
            data: "assets",
            key: "n8dyddsipg5611qg6bst9",
            symbol: "AVAX"
        },
        function (result){
            data = JSON.parse(result);
        }
    );
</script>

您可以通过在<head> 标签中添加以下代码来使用jQuery。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

【讨论】：

为什么建议为仅用于单一目的的库添加额外的 31kb 开销，尤其是当对 Fetch API 的支持为 pretty ubiquitous nowadays...时？

【解决方案3】：

使用 result.config.data[0].market_cap;而不是 result.config.data.0.market_cap;

let fetchRes = fetch( 
"https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX"); 

  

        // fetchRes is the promise to resolve

        // it by using.then() method

        fetchRes.then((res) => res.json())
    .then((result) => {
        console.log(result);
        document.getElementById('result').innerHTML = result.config.data[0].market_cap;
    })
    .catch(error => {
        console.log(error);
    });

【讨论】：

【解决方案4】：

你可以让它更简洁：

const fetchData = async(url) => (await fetch(url)).json();

fetchData("https://api.lunarcrush.com/v2?data=assets&key=n8dyddsipg5611qg6bst9&symbol=AVAX")
  .then(res => {
    result.innerText = res.data[0].market_cap;
  })
  .catch(err => {
    console.log(err);
  });

&lt;text id="result"&gt;&lt;/text&gt;

【讨论】：