API端点URL能否自动纠错？React Fetch请求异常排查

我在React应用中使用Fetch API获取并展示测验题目，API端点为：https://opentdb.com/api.php?amount=${amount}&difficulty=${difficulty}&type=multiple

测试时发现两种现象：

• 当拼写错误在URL的?之前（即路径部分）时，完全无法获取响应。比如把api.php写成api.ph（缺末尾的p），请求没有结果。
• 当拼写错误在URL的?之后（即参数部分）时，有时返回空数组，有时却能拿到数据。比如把参数amount写成amoun（缺末尾的t），偶尔能获取到题目数据。

目前应用还在本地开发阶段，用VSCode运行npm start调试。想知道这是不是URL自动纠错机制导致的？或者是缓存的问题？

我的请求代码如下：

export const fetchQuizQuestions = async (
  amount: number,
  difficulty: Difficulty
) => {
  const endPoint = `https://opentdb.com/api.php?amount=${amount}&difficulty=${difficulty}&type=multiple`;

  try {
    const response = await fetch(endPoint);
    console.log(response);

    const data = await response.json();
    console.log(data);
    if (data.results.length === 0) {
      throw new Error("The part after ? contains some mistake");
    }
    // 新增all_answers属性并打乱答案顺序
    return data.results.map((question: Question) => ({
      ...question,
      all_answers: shuffleArray([
        ...question.incorrect_answers,
        question.correct_answer,
      ]),
    }));
  } catch (error: any) {
    console.log(error.name);
    console.log(error.message);
  }
};

1. 路径拼写错误无响应的原因 #

URL中?之前的是服务器的资源路径，api.ph并不是opentdb服务器上存在的接口文件，服务器找不到对应的资源时会返回4XX类错误（比如404），自然无法拿到有效响应。这是标准的HTTP资源未找到逻辑，和纠错、缓存无关。

2. 参数拼写错误结果不稳定的原因 #

这和URL自动纠错无关，完全是opentdb API的参数处理逻辑导致的：

• 当你写错参数名（比如amoun），API会忽略这个无效参数，转而使用参数的默认值返回数据。比如amount的默认值可能是10，所以即使传了错误的amoun=5，API仍会返回默认数量的题目，这时你能拿到数据。
• 但如果同时存在其他无效参数组合（比如difficulty也写错），或者API的默认规则在某些场景下匹配不到可用题目，就会返回空的results数组。

3. 缓存问题的验证方法 #

如果怀疑是缓存导致的结果不稳定，可以在请求URL后添加一个随机参数绕过缓存，比如：

const endPoint = `https://opentdb.com/api.php?amount=${amount}&difficulty=${difficulty}&type=multiple&t=${Date.now()}`;

这样每次请求的URL都带有唯一的时间戳，浏览器或服务器不会返回缓存的旧数据，就能验证是否是缓存的问题。

额外优化建议 #

可以在代码里先检查HTTP响应状态码，提前识别路径错误类问题：

const response = await fetch(endPoint);
if (!response.ok) {
  throw new Error(`请求失败，状态码：${response.status}`);
}

这样能更准确区分是路径错误导致的请求失败，还是参数问题导致的空结果。

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