如何在运行另一个函数之前等待 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(){

  return fetch("api/favstop/")

  .then(response => {

    return response.json();

  })

  .then(data => {

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

      favouriteStops.push(data[i].stopid)

    }

  })

};

Answer 2

await您可以通过使用inside firstFunctionlike轻松解决此问题：

async function firstFunction() {

  const response = await fetch("api/favstop/")

  const data = await response.json();

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

    favouriteStops.push(data[i].stopid)

  }

};

或者，只返回如下承诺：

async function firstFunction() {

  return fetch("api/favstop/")

    .then(response => {

      return response.json();

    })

    .then(data => {

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

        favouriteStops.push(data[i].stopid)

      }

    })

};

Answer 3

您不需要在异步函数中使用承诺链。事实上，它有点违背了整个目的。所以，你的异步函数看起来有点像这样：

async function firstFunction(){

   const fetcher = await fetch("api/favstop/");

   const data = await fetcher.json();

   

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

      favouriteStops.push(data[i].stopid)

   }

};