如何在运行另一个函数之前等待 fetch 完成

Question

我目前正在尝试创建一个带有标记的地图，如果用户之前曾表示该标记是他们的“最爱”之一，我希望某些标记由不同的图标表示。

为此，我尝试使用首先获取然后将部分数据推送到数组中的函数，然后我使用另一个函数来创建地图并用标记填充它。我希望第二个函数仅在第一个函数完成后运行。不幸的是，每次我运行代码时，所有标记都是相同的，并且似乎应该包含所有收藏站点的 ID 的数组是空的。我认为这意味着等待无法正常工作，因为第一个函数尚未完成运行。

代码是：

var favouriteStops = []

async function firstFunction(){

    fetch("api/favstop/")

    .then(response => {

        return response.json();

    })

    .then(data => {

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

        favouriteStops.push(data[i].stopid)

     }

 })

};

function addFavStop (){

        console.log(favouriteStops)

    }

async function initMap(){

    await firstFunction();

    //Map options

    var options = {

        zoom: 15,

        center: {lat:53.3477, lng:-6.2800},

        styles: mapStyle,

        disableDefaultUI: true

    }

    //Creating the map 

    var map = new google.maps.Map(document.getElementById('map'), options);

    //Add marker function

    function addMarker(stop){

        var coords = {lat: stop.lat, lng: stop.long}

        //Style for the icon

        if (favouriteStops.includes(stop.id)){

            var icon = {

                url: '../static/images/favourite.png',

                scaledSize: new google.maps.Size(12, 12)

            };

        } else {

            var icon = {

                url: '../static/images/bus-stop.png',

                scaledSize: new google.maps.Size(12, 12)

            };

            console.log(favouriteStops, stop.id)

        }

        var marker = new google.maps.Marker({

            position: coords,

            map:map,

            icon: icon,

            scaledSize: new google.maps.Size(1, 1),

            name:stop.name,

            id:stop.id

        })

        var infoWindow = new google.maps.InfoWindow({

            content: marker.name + '<br>' + '<button htmlType="submit" onClick=addFavStop()> Add Stop As Favourite </button>'

        });

        marker.addListener('click', function(){

            infoWindow.open(map, marker);

        });

    }

Answer 1

要await真正等到fetch完成，您应该返回承诺：async function firstFunction(){&nbsp; return fetch("api/favstop/")&nbsp; .then(response => {&nbsp; &nbsp; return response.json();&nbsp; })&nbsp; .then(data => {&nbsp; &nbsp; for(var i = 0; i<= data.length; i++){&nbsp; &nbsp; &nbsp; favouriteStops.push(data[i].stopid)&nbsp; &nbsp; }&nbsp; })};

Answer 2

await您可以通过使用inside firstFunctionlike轻松解决此问题：async function firstFunction() {&nbsp; const response = await fetch("api/favstop/")&nbsp; const data = await response.json();&nbsp; for (var i = 0; i <= data.length; i++) {&nbsp; &nbsp; favouriteStops.push(data[i].stopid)&nbsp; }};或者，只返回如下承诺：async function firstFunction() {&nbsp; return fetch("api/favstop/")&nbsp; &nbsp; .then(response => {&nbsp; &nbsp; &nbsp; return response.json();&nbsp; &nbsp; })&nbsp; &nbsp; .then(data => {&nbsp; &nbsp; &nbsp; for (var i = 0; i <= data.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; favouriteStops.push(data[i].stopid)&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })};

Answer 3

您不需要在异步函数中使用承诺链。事实上，它有点违背了整个目的。所以，你的异步函数看起来有点像这样：async function firstFunction(){&nbsp; &nbsp;const fetcher = await fetch("api/favstop/");&nbsp; &nbsp;const data = await fetcher.json();&nbsp; &nbsp;&nbsp; &nbsp;for(var i = 0; i<= data.length; i++){&nbsp; &nbsp; &nbsp; favouriteStops.push(data[i].stopid)&nbsp; &nbsp;}};