调用RapidAPI的Dad Joke接口返回undefined如何解决？

架构老林

2026-9-28

问题原因

你当前代码里用jokeData.value取值不符合接口返回的结构，所以会输出undefined。根据你提供的控制台输出，接口返回的冷笑话数据存放在jokeData.body数组的第0个元素中，你需要的setup（铺垫）和punchline（包袱）字段都在这个元素里。

修复后的代码

只需要修改runApiQueries函数里的取值逻辑即可，参考代码如下：

const runApiQueries = async () => {
  ////////  GET JOKE RESULTS  //////////
  const jokeData = await getData(JOKE_URL, JOKE_HOST);
  console.log(jokeData);
  // 新增：取出body数组里的第一个冷笑话对象
  const joke = jokeData.body?.[0]
  // 异常兼容：如果没取到数据就显示提示
  if (!joke) {
    app.innerHTML += `<p>冷笑话加载失败，请稍后重试</p>`
    return
  }

  ////////  UPDATE UI WITH DATA /////////////
  app.innerHTML += /*html*/ `
    <div
    class="max-w-2xl
    w-full
    bg-yellow-400
    border-2 border-gray-300
    shadow-lg
    p-6
    rounded-md
    tracking-wide
    "
    >
    <div class="flex items center mb-4">
    <img alt="avatar"
    class="w-20"
    src= "./img/donkey1.jpeg"
    />
    <div class= "leading-5 ml-6 sm">
    <h4 class="text-xl font-semibold">Dad Joke</h4>
    <h5 class="font-semibold text-purple-800">Jokes</h5>
    </div>
    </div>
    <div class="text-center">
    <p class="italic text-white text-lg">${joke.setup}</p>
    <p class="italic text-white text-lg font-bold mt-3">${joke.punchline}</p>
    </div>
    </div>
    `;
}