Question

我正在尝试调用两个不同的 API。我的想法是当你点击底部时，屏幕上会出现一个随机的笑话。我创建了两个不同的函数来获取两个不同的 API。然后，我用 Math.random() 两次得到一个随机数。如果随机数 > 50，则执行一个函数，否则执行另一个函数。我的问题是来自 Chuck Norris API 的 API 数据总是返回 Undefined，我正在努力找出错误所在。

这是我的JS代码：

const button = document.getElementById("button");
const joke = document.getElementById("joke-content");
const url = " https://icanhazdadjoke.com/";
const urlChuck = "https://api.chucknorris.io/jokes/random";

button.addEventListener("click", getJoke = () => {
    const randomNumber = 100 * Math.random();
    return randomNumber > 50 ? getDadJoke() : getChuckJoke();
}
);

const getDadJoke = () => {
    fetch(url, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.joke)
}

const getChuckJoke = () => {
    fetch(urlChuck, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.joke)
}

Answer 1

对于 Chuck Norris 的笑话，您指的是 data.joke，但它应该是 data.value：

const getChuckJoke = () => {
    fetch(urlChuck, {
        headers: {
            "Accept": "application/json"
        }
    }).then(response => response.json())
        .then(data => joke.innerHTML = data.value)
}

API 查克诺里斯笑话未定义

1 个答案: