如何从API获取数据？调用API获取加密货币市值无法在页面显示如何解决

• 数组访问语法错误：JavaScript 中访问数组元素不能使用 . 加索引的写法，result.config.data.0.market_cap 属于非法语法，应该使用方括号 [] 访问数组索引，正确写法为 xxx[0].market_cap。
• 接口返回结构层级错误：你调用的接口返回的数据中，资产数据直接存在顶层 data 字段的数组里，不存在额外的 config 层级，你多写了 config 这一层。
• 无效HTML标签问题：原生HTML没有 <text> 标签，浏览器可能无法正常识别该节点，建议替换为 <span>、<p> 或者你需要的 <div> 标签。
• 缺少请求状态校验逻辑：fetch API 只有在网络请求本身失败时才会触发 catch，如果接口返回 4xx、5xx 等 HTTP 错误状态码，不会进入 catch 分支，建议先判断响应的 ok 属性再解析JSON。
• 跨域限制问题：如果控制台报CORS跨域错误，说明该接口不允许前端直接跨域调用，需要通过后端服务代理转发请求后再返回给前端。

修复后完整代码 #

<div id="result"></div>

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

fetchRes
  .then((res) => {
    if (!res.ok) {
      throw new Error(`请求错误，状态码：${res.status}`)
    }
    return res.json()
  })
  .then((result) => {
    console.log(result);
    document.getElementById('result').innerHTML = result.data[0].market_cap;
  })
  .catch(error => {
    console.log(error);
    document.getElementById('result').innerHTML = `数据加载失败：${error.message}`
  })
</script>

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