如何将 fetch API 链接到一个函数，然后链接到另一个函数？答案

【问题标题】：How to chain a fetch API to a function then to another function?如何将 fetch API 链接到一个函数，然后链接到另一个函数？
【发布时间】：2021-12-31 00:31:06
【问题描述】：

我不断收到语法错误“Uncaught (in promise) ReferenceError: showQuestion is not defined”试图找到解决此问题的方法。而且我对整个事情还是很陌生。

fetch(
    'https://jservice.kenzie.academy/api/random-clue?valid=true'
)
    .then(response => response.json())
    .then(randomDataId => {
        const categoryDataId = randomDataId.categoryId;
        console.log(`category id is: ${categoryDataId}`);

        fetch(
            `https://jservice.kenzie.academy/api/clues?category=${categoryDataId}`
        )
            .then(response => response.json())
            .then(randomCatyId => {
                const rightAnswer =
                    randomCatyId.clues[randomData].answer;

                const showTitle =
                    randomCatyId.clues[randomData].category.title;

                const showQuestion =
                    randomCatyId.clues[randomData].question;

                showCategory.innerText = `Category: ${showTitle}`;

                h2Question.innerText = `Question: ${showQuestion}`;

                console.log('question: ' + showQuestion);
                console.log('answer: ' + rightAnswer);

                questionFetch();
            });
    });

function questionFetch() {
    h2Question.innerHTML = `Question: ${showQuestion}`;
}

【问题讨论】：

很难从引用的代码中看出，但似乎 questionFetch 函数中对 showQuestion 的引用超出了定义范围。

标签： javascript fetch-api

【解决方案1】：

fetch api 本质上是异步的，您正在尝试读取尚不可用的数据“showQuestion”。请看下面的代码。使用 async-await，这是玩 fetch api 更好的方式。

 const randomData = 2; // fake Data

        async function GetDataFromApi(url) {
            const response = await fetch(url);

            return await response.json();
        }


        async function RunApp(params) {

            const randomDataId = await GetDataFromApi('https://jservice.kenzie.academy/api/random-clue?valid=true');

            const categoryDataId = randomDataId.categoryId;
            console.log(`category id is: ${categoryDataId}`);

            const randomCatyId = await GetDataFromApi(`https://jservice.kenzie.academy/api/clues?category=${categoryDataId}`);

            const rightAnswer = randomCatyId.clues[randomData].answer;
            const showTitle = randomCatyId.clues[randomData].category.title;
            const showQuestion = randomCatyId.clues[randomData].question;

            // showCategory.innerText = `Category: ${showTitle}`;

            // h2Question.innerText = `Question: ${showQuestion}`;

            console.log('question: ' + showQuestion);
            console.log('answer: ' + rightAnswer);

            questionFetch(showQuestion);
        }

        function questionFetch(showQuestion) {
            //h2Question.innerHTML = `Question: ${showQuestion}`;
        }

        RunApp();

【讨论】：

成功了，谢谢！现在唯一的问题是让答案部分不显示答案功能的任何错误。

【解决方案2】：

questionFetch() 函数无法访问 showQuestion 常量。这是因为这个常量是在获取请求中定义的。函数 showQuestion 无权访问在另一个函数中定义的数据。（更多关于“范围”的信息：https://www.w3schools.com/js/js_scope.asp）

要解决这个问题，您应该在调用函数 questionFetch 时提供常量 showQuestion 作为参数：

                questionFetch(showQuestion); //we supply the constant to the function
            });
    });

/**
     * function takes an argument, calls it x, and applies it as x. 
     * The name of the argument does not matter, 'x' just the label 
     * this function uses to hold the data supplied 
     * (in our case, the question string);
     * */
function questionFetch(x) { 
    h2Question.innerHTML = `Question: ${x}`;
}

请确保定义并提供在第二个 fetch 函数中使用的 [randomData] 参数，因为它当前未定义。

【讨论】：