Expo React Native 控制台不输出fetch返回的JSON响应日志问题求助

核心问题排查点 #

• text 参数未做URL编码，当传入的搜索文本包含中文、空格、特殊符号时，会导致请求URL格式非法，接口返回400错误或请求直接异常中断，后续JSON解析流程无法触发。
• 声明了超时配置、AbortController 实例，但未将其关联到fetch请求逻辑中，也没有实现超时中断逻辑，请求长时间pending时会直接卡住，不会触发后续的回调执行。
• 先检查控制台是否开启了日志过滤规则，确认info级别日志没有被屏蔽，同时先查看是否有catch块的错误日志输出，快速定位请求阶段的异常。
• 若接口返回的响应体不是标准JSON格式，res.json() 会抛出语法错误，直接进入catch分支，导致第二个then的日志无法打印，可以先在第一个then中打印 res.status 确认请求状态，以及打印 res.text() 查看原始响应内容验证格式合法性。
• 额外检查点：调用fetchResults时是否传入了合法的text参数，若text为空或未定义，会导致接口参数非法，无法返回正常响应。

修复后代码 #

const fetchResults = async (text, offset = data.length, options = {}) => {
  // 增加基础参数校验
  if (!text?.trim()) {
    console.error('搜索文本不能为空');
    return;
  }
  const { timeout = 8000 } = options;
  const controller = new AbortController();
  // 实现超时中断逻辑
  const timeoutId = setTimeout(() => controller.abort(), timeout);
  // 对搜索文本做URL编码，避免特殊字符导致请求异常
  const encodedText = encodeURIComponent(text.trim());
  const requestUrl = `https://itunes.apple.com/search?limit=30&offset=${offset}&term=${encodedText}`;
  console.log('请求地址：', requestUrl);

  try {
    // 关联中断控制器到fetch请求
    const res = await fetch(requestUrl, { signal: controller.signal });
    console.log('请求响应状态：', res.status);
    // 先判断请求是否成功
    if (!res.ok) {
      throw new Error(`请求失败，状态码：${res.status}`);
    }
    const jsonRes = await res.json();
    // 此处日志可正常输出
    console.log('JSON解析结果：', jsonRes);
    return jsonRes;
  } catch (err) {
    console.error('Request failed', err);
  } finally {
    // 请求完成后清除超时定时器，避免内存泄漏
    clearTimeout(timeoutId);
  }
};

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