Webpack环境下fetchSinglePlayer函数调用返回undefined问题求助

问题描述 #

在Webpack环境下，将ajaxHelpers.js中的fetchSinglePlayer异步函数导入renderHelpers.js使用，无引用错误。点击按钮时能获取正确的puppyData（即playerId），函数内部console.log可输出正确的接口返回结果result和playerId，但调用后singlePuppy变量始终返回undefined。

相关代码 #

ajaxHelpers.js

export const fetchSinglePlayer = async (playerId) => {
 try { 
    const response = await fetch(`${APIURL}players/${playerId}`); 
    const result = await response.json(); 
    console.log(result); 
    console.log(playerId); 
    if (result.error) { 
      throw result.error;
    } 
    return result.data.players;
  } catch (error) {
    console.error('Uh oh, trouble fetching players!', error); 
  } 
};

renderHelpers.js

let detailButtons = [...document.getElementsByClassName("detail-button")];
for (let i = 0; i < detailButtons.length; i++) {
  const button = detailButtons[i];
  button.addEventListener("click", async () => {
    const puppyData = button.dataset.id;
    const singlePuppy = await fetchSinglePlayer(puppyData);
    console.log(puppyData);
    console.log(singlePuppy);
    return renderSinglePlayer(singlePuppy);
  });
}

解决方法 #

1. 确认返回数据路径的正确性 #

首先检查接口返回的result结构是否匹配代码中的取值路径result.data.players：

• 如果接口返回的是单个玩家数据，结构可能是result.data.player（单数形式），而非复数的players，这会直接导致返回undefined。
• 可以在return语句前添加日志，确认数据结构：

  console.log(result.data); // 打印data对象，确认是否存在players字段
  return result.data.players;
  

2. 修复catch块的错误处理逻辑 #

当前fetchSinglePlayer的catch块仅打印错误，但没有返回值或重新抛出错误，这会导致函数在捕获到错误时默认返回undefined。根据业务需求选择以下处理方式：

• 重新抛出错误：让调用者感知错误并处理：

  catch (error) {
    console.error('Uh oh, trouble fetching players!', error);
    throw error; // 重新抛出错误，传递到调用层
  }
  

• 返回默认值：避免调用者拿到undefined，比如返回空数组或空对象：

  catch (error) {
    console.error('Uh oh, trouble fetching players!', error);
    return []; // 返回默认空数组
  }
  

3. 调用层增加错误处理与空值判断 #

在renderHelpers.js的点击事件回调中，添加try-catch捕获异步错误，并增加空值判断，避免传递undefined给renderSinglePlayer：

button.addEventListener("click", async () => {
  try {
    const puppyData = button.dataset.id;
    const singlePuppy = await fetchSinglePlayer(puppyData);
    console.log(puppyData);
    console.log(singlePuppy);
    // 增加空值判断，确保数据存在再渲染
    if (singlePuppy) {
      renderSinglePlayer(singlePuppy);
    } else {
      console.warn('未获取到有效玩家数据');
    }
  } catch (err) {
    console.error('获取玩家数据失败:', err);
    // 可在此添加错误提示UI，比如显示Toast
  }
});

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