javascript - Javascript将不会返回存储的JSON文件的内容

Question

我正在研究一个小脚本，该脚本应该从JSON文件中获取信息，并使用该信息填充网页中的表格。我正在从Youtube教程here编写脚本，以下是该教程中给出的代码:

<script type="text/javascript">
        const rankingsBody = document.querySelector("#rankings-table > tbody");

        function loadRankings() {
            const request = new XMLHttpRequest();

            request.open("get", "data/rankings.json");

            request.onload = () => {
                try {
                    const json = JSON.parse(request.responseText);
                    populateRankings(json);
                } catch (e) {
                    console.warn("Could not load rankings");
                }
            };

            request.send();
        }


        function populateRankings (json) {
            console.log(json);
        }

        console.log(request);
    </script>

现在，脚本末尾的console.log()函数应该将JSON文件的内容打印到控制台，在Firefox中 checkin 后，它不会打印并抛出以下错误:

ReferenceError: request is not defined

当我尝试在控制台中运行loadRankings函数时，它说它是未定义的，所以，我猜它未按预期返回数据，因为尚未定义？

我不太确定可能是什么问题，您能帮我解决这个问题吗？在此先感谢大家。

Answer 1

您在request中声明了loadRankings()。然后，您尝试使用console.log(request); const declarations are not hoisted将其打印在存在该上下文的上下文之外，因此会出现引用错误。可以像这样将声明移到全局范围，以便对console.log()语句可见:

    const rankingsBody = document.querySelector("#rankings-table > tbody");
    let globalRequest;

    function loadRankings() {

        const request = new XMLHttpRequest();
        // Expose the most recent request in the global variable
        globalRequest = request;

        request.open("get", "data/rankings.json");

        request.onload = () => {
            try {
                const json = JSON.parse(request.responseText);
                populateRankings(json);
            } catch (e) {
                console.warn("Could not load rankings");
            }
        };

        request.send();
    }


    function populateRankings (json) {
        console.log(json);
    }

    console.log(globalRequest);

或者只是完全删除console.log()语句。