修复JavaScript通过fetch获取API数据并渲染到HTML的错误代码

• 作用域错误：data变量定义在fetch的then回调函数内部，属于局部变量，回调外无法访问
• 异步逻辑错误：res.json()返回的是Promise对象，直接赋值无法拿到接口返回的真实数据，需要等待异步执行完成
• 执行顺序错误：DOM更新代码写在fetch异步请求外部，请求还没返回就会先执行DOM赋值，此时目标数据不存在
• 字段名错误：Binance接口返回的对应字段是小写开头的priceChange，代码中大写开头的PriceChange无法匹配到对应值

提供两种写法可任选：

写法1：async/await 写法（更易读） #

<div id="priceChange"></div>

<script>
setInterval(tradestime, 5000);
// 声明为异步函数
async function tradestime(){
  try {
    // 等待接口请求完成
    const res = await fetch("https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT");
    // 等待解析完接口返回的JSON数据
    const data = await res.json();
    // 拿到数据后再更新DOM，同时修正字段名
    document.getElementById("priceChange").innerHTML = data.priceChange;
  } catch (err) {
    // 捕获异常，避免请求失败时逻辑中断
    document.getElementById("priceChange").innerHTML = "数据加载失败";
    console.error("请求错误：", err);
  }
}
</script>

写法2：Promise then 链写法 #

<div id="priceChange"></div>

<script>
setInterval(tradestime, 5000);
function tradestime(){
  fetch("https://api.binance.com/api/v1/ticker/24hr?symbol=LTCUSDT") 
  // 解析JSON数据
  .then(res => res.json())
  // 拿到数据后更新DOM
  .then(data => {
    document.getElementById("priceChange").innerHTML = data.priceChange;
  })
  // 捕获请求异常
  .catch(err => {
    document.getElementById("priceChange").innerHTML = "数据加载失败";
    console.error("请求错误：", err);
  })
}
</script>

内容的提问来源于stack exchange，提问作者MSU Rubel