如何使用visual studio 2019和javascript从api获取数据？

Question

I want to get some data from the api and display on alert box with java script, but I have one error and cannot display the data.我想从 api 获取一些数据并使用 java 脚本显示在警报框中，但是我有一个错误并且无法显示数据。

The error is:错误是：

My code:我的代码：

    <!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 defer
            src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCLLN5Uon6l2A41J2N0whRM7WQ9YAmRFeQ&callback=initMap">
    </script>


    <script type="text/javascript">

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

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

        function LoadMap() {

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

            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,
                    icon: 'http://192.168.0.1/markers/marker.png',
                    opacity: 0.4
                });
                (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 async getData() {

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

        let response = await fetch(url);

        if (response.ok) {
            let json = await response.json();
            window.alert(json);
        } else {
          alert("HTTP-Error: " + response.status);
        }
    }
}

    </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>

So the error is on this line:所以错误在这一行：

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

Can I take some example how to fix this issue ?我可以举一些例子来解决这个问题吗？

I try a different methods to get the data from API but the error is the same with every method..我尝试了不同的方法来从 API 获取数据，但是每种方法的错误都是一样的。

This is a sceenshot of warnings...这是警告的截图...

Answer 1

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

Is probably not where the actual error is thrown, I would assume it is可能不是抛出实际错误的地方，我认为是

let response = await fetch(url);

since you don't mark your getData function with async, you cannot use await inside the getData function.因为你没有用 async 标记你的getData函数，所以你不能在getData函数中使用await 。

async function getData() {

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

        let response = await fetch(url);

        if (response.ok) {
            let json = await response.json();
            window.alert(json);
        } else {
          alert("HTTP-Error: " + response.status);
        }
    }

or with .then或.then

 function getData() {

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

        fetch(url).then(res => {
            if (res.ok) {
                let json = await response.json();
                window.alert(json);
            } else {
                alert("HTTP-Error: " + response.status);
            }
        })
}

Answer 2

Just try to use "" instead of . Use只需尝试使用 "" 而不是. Use . Use when you put on URL a value from an object like that: const url = http://192.168.0.1:3000/sdfasdfadf/${data.id} ; . Use时，你从这样的一个对象的URL把一个值：常量URL = http://192.168.0.1:3000/sdfasdfadf/${data.id} ;

Try this: const url = "http://192.168.0.1:3000/?date=2019-10-20&id=1010&daysForward=8"试试这个： const url = "http://192.168.0.1:3000/?date=2019-10-20&id=1010&daysForward=8"

如何使用visual studio 2019和javascript从api获取数据？

问题描述

2 个解决方案

解决方案1
0 2020-09-16 11:52:31

解决方案2
0 2020-09-16 12:42:01

如何使用visual studio 2019和javascript从api获取数据？

问题描述

2 个解决方案

解决方案1 0 2020-09-16 11:52:31

解决方案2 0 2020-09-16 12:42:01

解决方案1
0 2020-09-16 11:52:31

解决方案2
0 2020-09-16 12:42:01