替换自定义GitHub数据源后Fetch API无法获取数据，求问题排查

核心问题 #

你用了Gist的网页展示链接来发起Fetch请求，但这个链接返回的是HTML页面，不是你需要的JSON数据，所以res.json()解析会直接失败，导致数据无法获取。

解决步骤 #

• 获取Gist原始数据链接：打开你的Gist页面，点击文件右上角的「Raw」按钮，复制弹出的纯文本链接——这个链接才会直接返回你存在Gist里的原始内容。
• 替换Fetch地址：把代码里的fetch("https://jsonplaceholder.typicode.com/users")替换成刚才复制的原始链接。
• 校验JSON格式：确保Gist里的内容是合法的JSON数组，格式要和jsonplaceholder返回的结构一致（比如[{"name":"张三", "email":"zhangsan@xxx.com"}, ...]），格式错误也会导致解析失败。

修改后的示例代码 #

const userCardTemplate = document.querySelector("[data-user-template]")
const categoriesSearch = document.querySelector("[data-user-cards-container]")
const searchInput = document.querySelector("[data-search]")

let users = []

searchInput.addEventListener("input", e => {
  const value = e.target.value.toLowerCase()
  users.forEach(user => {
    const isVisible = 
    user.name.toLowerCase().includes(value) ||
    user.email.toLowerCase().includes(value)
  user.element.classList.toggle("hide", !isVisible)
  })
})

// 替换为Gist原始数据链接
fetch("https://gist.githubusercontent.com/UllestReal/09ca3d968dda94535e8fc25b998a6ce5/raw/09ca3d968dda94535e8fc25b998a6ce5/gistfile1.txt")
.then(res => {
  // 先检查请求是否成功
  if (!res.ok) throw new Error(`请求失败，状态码：${res.status}`)
  return res.json()
})
.then(data => {
  users = data.map(user => {
    const card = userCardTemplate.content.cloneNode(true).children[0]
    const header = card.querySelector("[data-header]")
    const body = card.querySelector("[data-body]")
    header.textContent = user.name
    body.textContent = user.email
    categoriesSearch.append(card)
    return { name: user.name, email: user.email, element: card}
  })
})
.catch(err => console.error("数据获取失败：", err)) // 新增错误捕获，方便排查问题

额外提示 #

• 加上.catch()错误捕获后，控制台会显示具体的失败原因，比如链接错误、格式错误，能更快定位问题。
• 如果不确定JSON格式是否合法，可以用在线JSON校验工具检查Gist里的内容。

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