如何从restful api获取javascript上的数据答案

【问题标题】：How to fetch data on javascript from restful api如何从restful api获取javascript上的数据
【发布时间】：2021-01-03 01:09:31
【问题描述】：

我在 c#（Windows 窗体应用程序）上有桌面应用程序，在解决方案上添加了 Web 浏览器并使用 java 脚本。我想为保加利亚创建一些气象预报。

我不知道如何从 api 服务器获取数据..？

我在 node.js 上有 Restful API，想从 API 中获取数据。

API 的结构如下所示：

我的 api 的 url 如下所示：

http://192.168.0.1:3000/?date=2019-10-20&id=1010&daysForward=8

我现在想获取所有数据并显示到一些表格中..

我可以举一些例子吗？

我的代码：

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <script type="text/javascript">

        var markers = [
            { "title": 'Населено място', "lat": '41.19197', "lng": '25.33719', "description": 'Информация за населеното място' }
        ];

        window.onload = function () {
            LoadMap();
            DrawChart();

            //remove the markers here..
        }

        function LoadMap() {

            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                minZoom: 7,
                maxZoom: 10,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);

            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:300px;min-height:100px'>" + data.description + "</div>");
                        infoWindow.open(map, marker)
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);
            }
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }

        function DrawChart() {
            new Chart(document.getElementById("mixed-chart"), {
                type: 'bar',
                data: {
                    labels: ["1900", "1950", "1999", "2050"],
                    datasets: [{
                        label: "Температура",
                        type: "line",
                        borderColor: "#ff1414",
                        backgroundColorHover: "#ff1414",
                        data: [133, 221, 783, 2478],
                        fill: false,
                    }, {
                        label: "Атмосферно налягане",
                        type: "line",
                        borderColor: "#8e5ea2",
                        backgroundColorHover: "#14ffcc",
                        data: [408, 547, 675, 734],
                        fill: false
                    }, {
                        label: "Скорост на вятъра",
                        type: "line",
                        borderColor: "#b5c918",
                        data: [400, 500, 600, 700],
                        fill: false
                    }, {
                        label: "Относителна влажност",
                        type: "line",
                        borderColor: "#18c994",
                        data: [408, 547, 675, 734],
                        fill: false
                    } , {
                        label: "Дъжд",
                        type: "bar",
                        backgroundColor: "#038cfc",
                        borderColor: "#038cfc",
                        data: [402, 543, 635, 714],
                    }, {
                        label: "Сняг",
                        type: "bar",
                        backgroundColor: "#14ffcc",
                        backgroundColorHover: "#14ffcc",
                        data: [133, 221, 783, 2478]
                    }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Синоптична графика'
                    },
                    legend: { display: true },
                    tooltips: {
                    mode: 'nearest'
                    }
                }
            });
        }

     
    </script>

    <div id="dvMap" style="width: 100%; height: 600px">
    </div>

    <div style="width: 100%; height: 270px">
        <canvas id="mixed-chart" width="1000" height="270"></canvas>
    </div>
</body>
</html>

【问题讨论】：

您应该可以轻松找到有关使用 fetch() 获取数据的基础知识的教程

标签： javascript c# reactjs visual-studio web

【解决方案1】：

你可以使用 fetch()

var apiPromise = fetch(`http://192.168.0.1:3000/?date=2019-10-20&id=1010&daysForward=8`, {
                     method: 'GET'
                 });
apiPromise.then(async (response)=>{
     var data = await response.json();
     console.log(data)
});
apiPromise.catch((error)=>{...});
apiPromise.finally(()=>{...});

使用javascript.info 了解更多信息

【讨论】：

如何控制台记录数据？
在 then 函数中使用“var data = await response.json(); console.log(data)”