尝试使用 API 中的数据，但出现一些错误答案

【问题标题】：Trying to use data from API, but get some error尝试使用 API 中的数据，但出现一些错误
【发布时间】：2019-03-06 10:50:40
【问题描述】：

这是我第一次尝试使用简单的 API 却无法获得好的结果。我在这里使用了一个示例：Write something that can read this API Url 结果，我所做的每一次更改都给了我 4，而控制台中什么也没有。拜托，能给我一个提示吗？

谢谢！

<!DOCTYPE html>
<html>

<body>
first
<div id="fastest">
     <script> fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.fastestFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>

    </br>second

    <div id="30">
    <script> fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.halfHourFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>

    </br>3th

    <div id="60">
    <script> 
    fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
        // Your code for handling the data you get from the API
        document.write(data.hourFee); //And since it is just an object you can access any value like this
    })
    .catch(function(err) {
        // This is where you run code if the server returns any errors (optional)
        console.log(err)
    });
    </script> 
    </div>



</body>
</html>

【问题讨论】：

标签： api fetch

【解决方案1】：

使用document.write，您将使用 api 响应的值替换现有的 html 元素。

我已经对代码进行了一些重组，将 js 放在一个函数中，并将 document.write 替换为 document.getElementById(elemId).textContent，它设置了所选元素的当前文本。结果如下：

// Call the method passing the 3 possible values
getFee("fastest");
getFee("halfHour");
getFee("hour");

function getFee(type) {
  fetch("https://bitcoinfees.earn.com/api/v1/fees/recommended") // Call the fetch function passing the url of the API as a parameter
    .then((resp) => resp.json()) // Transform the data into json
    .then(function(data) {
      // Your code for handling the data you get from the API
      if (type === "fastest") {
        document.getElementById("fastest").textContent = data.fastestFee;
      } else if (type === "halfHour") {
        document.getElementById("30").textContent = data.halfHourFee;
      } else if (type === "hour") {
        document.getElementById("60").textContent = data.hourFee;
      }
    })
    .catch(function(err) {
      // This is where you run code if the server returns any errors (optional)
      console.log(err)
    });
}

<span>fastest</span>
<div id="fastest">

</div>

<br>
<span>halfHour</span>

<div id="30">

</div>

<br>
<span>Hour</span>

<div id="60">
</div>

【讨论】：

非常感谢。解释是10+