使用Wikimedia API开发维基搜索页时遇Uncaught end of input错误求助

这种报错真的很磨人——尤其是之前类似逻辑在简单场景下能跑通，到了实际项目里就出问题。我帮你梳理几个最可能的原因，以及对应的排查步骤：

1. API 请求参数或跨域配置错误，导致响应不是合法 JSON #

Wikimedia API 对请求参数有严格要求，要是参数不对，返回的可能是错误页面（HTML格式），或者因为跨域被浏览器拦截，拿到不完整的响应，这时候 JSON 解析就会直接报「Unexpected end of input」。

排查步骤：

• 先确认你的请求 URL 是否包含必要参数：
  正确的搜索 API 格式应该是这样的（以英文维基为例）：

  https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=你的搜索词&srlimit=10&format=json&origin=*
  

  重点要加 format=json（指定返回 JSON）和 origin=*（解决跨域问题，否则浏览器会拦截响应）。
• 打开浏览器开发者工具（F12）→「Network」标签，找到你的 API 请求，查看「Response」面板：
  • 如果返回的是 HTML 页面（比如 404 错误），说明参数写错了；
  • 如果返回的是空内容，大概率是跨域没处理好。

2. 对返回数据的结构理解有误 #

你提到要使用返回对象的第2个元素（零索引1），但 Wikimedia 标准搜索 API 的返回结构是类似这样的：

{
  "query": {
    "search": [
      {"title": "页面1", ...},
      {"title": "页面2", ...}
      // 最多10条结果
    ]
  }
}

也就是说，搜索结果数组其实是 data.query.search，而不是 data[1]。如果你的代码硬取 data[1]，要么会拿到 undefined，要么如果 API 返回的结构和你预期完全不同，也可能导致解析报错。

排查步骤：
在成功函数里第一行加个 console.log(data)，然后看浏览器控制台里的实际数据结构，再调整取值逻辑。

3. 代码存在语法遗漏（最容易忽略的点） #

「Unexpected end of input」很多时候是代码语法不完整导致的——比如某个大括号没闭合、字符串没加结束引号、循环/条件语句的结构没写完。比如下面这种情况：

function handleResults(data) {
  const results = data[1];
  for (let i = 0; i < results.length; i++) {
    // 注释：后续要加文本和链接
    // 这里忘了写闭合的 }

编辑器可能不会立刻提示，但浏览器解析到代码末尾就会报错。

排查步骤：

• 用编辑器的语法检查功能（比如 VS Code 会自动标红错误）；
• 把成功函数的代码单独拎出来，逐行检查括号、引号的闭合情况。

给你一个可参考的正确示例代码 #

如果用原生 fetch 实现，大概是这样的：

const searchInput = document.getElementById('search-input');
const resultsList = document.getElementById('results-list');

searchInput.addEventListener('input', async function() {
  const searchTerm = this.value.trim();
  if (!searchTerm) {
    resultsList.innerHTML = '';
    return;
  }

  try {
    const response = await fetch(`https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=${encodeURIComponent(searchTerm)}&srlimit=10&format=json&origin=*`);
    const data = await response.json();
    const results = data.query.search;

    resultsList.innerHTML = '';
    results.forEach(result => {
      const li = document.createElement('li');
      const link = document.createElement('a');
      link.href = `https://en.wikipedia.org/wiki/${encodeURIComponent(result.title)}`;
      link.textContent = result.title;
      li.appendChild(link);
      resultsList.appendChild(li);
    });
  } catch (error) {
    console.error('请求或解析出错:', error);
    resultsList.innerHTML = '<li>搜索出错，请稍后重试</li>';
  }
});

先按上面的步骤排查，应该能很快定位到问题~

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