如何等待得到请求响应

提问者：小点点

如何等待得到请求响应

我尝试创建一个html模板，它显示了从特定URL获取数据后的一些图表，并带有GET response。

它必须是非常基本的操作，但它没有。

在响应返回之前，我无法停止Java脚本的执行。

互联网建议使用异步-等待一个我用过:

<!DOCTYPE html>
<html>
    <head>
        <script>
            function graphDrawFunction() {

                var request = async () => {
                    var response = await fetch('http://127.0.0.1/log');
                    return await response.json();
                }
                var data = request();

                for (let i=0;i<data.length;i++) {

                    // Some calculations generates traces and layouts from data for graphs
                    //var trace = function test1(data)
                    //var layout = function test2(data)

                    var section = document.getElementById('graphContainer');
                    var plotlyDiv = document.createElement("div");
                    plotlyDiv.id = "graph" + String(Math.random());
                    section.appendChild(plotlyDiv);

                    Plotly.plot(plotlyDiv.id, trace, layout);

                }

                return "--"
            };
        </script>
    </head>
<body onload="graphDrawFunction();">

<h1>Report</h1>
<div id="graphContainer">**********</div>

</body>
</html>

这件事不起作用，因为async没有像我预期的那样返回response.json（）。

所以我做了不同的事:

function graphDrawFunction() {

    var request = async () => {
        var response = await fetch('http://127.0.0.1/log');
        var data = await response.json();

        for (let i=0;i<data.length;i++) {

            // Some calculations generates traces and layouts from data for graphs
            //var trace = function test1(data)
            //var layout = function test2(data)

            var section = document.getElementById('graphContainer');
            var plotlyDiv = document.createElement("div");
            plotlyDiv.id = "graph" + String(Math.random());
            section.appendChild(plotlyDiv);

            Plotly.plot(plotlyDiv.id, trace, layout);

            }

        return "--"
    }
};

但这也不起作用。

所以我需要帮助。

有关项目得详细信息:

我的目标是创建一个报告程序。用户可以筛选数据并根据数据创建报表。我用的是细长的破折号和烧瓶。

首先，Python-Dash从SQL中获取数据。然后，用户使用Dash提供的几个按钮过滤数据。这发生在Python端。然后Flask在http://127.0.0.1/log上提供数据。因此，任何想要使用数据的东西只需发送GET请求即可。

当用户单击create report按钮时，一个新的选项卡将打开，其中包含我上面写的模板。你知道这之后的故事。

如果有更合适的方法来做这件事，尽管说我不太懂Web编程

谢谢你的阅读。

共3个答案

匿名用户

这样试试看

           async function graphDrawFunction() {

            var request = async () => {
                var response = await fetch('http://127.0.0.1/log');
                return response.json();
            }
            var data = await request();

            for (let i=0;i<data.length;i++) {

                // Some calculations generates traces and layouts from data for graphs
                //var trace = function test1(data)
                //var layout = function test2(data)

                var section = document.getElementById('graphContainer');
                var plotlyDiv = document.createElement("div");
                plotlyDiv.id = "graph" + String(Math.random());
                section.appendChild(plotlyDiv);

                Plotly.plot(plotlyDiv.id, trace, layout);

            }

            return "--"
        };

匿名用户

请查看fetch API的文档:https://developer.mozilla.org/en-us/docs/web/api/fetch_api/using_fetch。

await只是等待响应，一旦设置了响应，您应该能够在response.json()中访问它，如下所示:

null

<!DOCTYPE html>
<html>
    <head>
        <script>
            function graphDrawFunction() {

                var request = async () => {
                    var response = await fetch('http://127.0.0.1/log');
                    return response.json();
                }
                var data = request();

                for (let i=0;i<data.length;i++) {

                    // Some calculations generates traces and layouts from data for graphs
                    //var trace = function test1(data)
                    //var layout = function test2(data)

                    var section = document.getElementById('graphContainer');
                    var plotlyDiv = document.createElement("div");
                    plotlyDiv.id = "graph" + String(Math.random());
                    section.appendChild(plotlyDiv);

                    Plotly.plot(plotlyDiv.id, trace, layout);

                }

                return "--"
            };
        </script>
    </head>
<body onload="graphDrawFunction();">

<h1>Report</h1>
<div id="graphContainer">**********</div>

</body>
</html>

匿名用户

使用第一个示例:

由于request是一个异步函数，除非您用await调用它，否则它将异步运行。

因此，GraphDrawFunction()可以这样编写:

null

function graphDrawFunction() {

    var data = (await fetch('http://127.0.0.1/log')).json();

    for (let i=0;i<data.length;i++) {
      // ....
    }

    return "--"
};