Javascript 在for循环内部处理多个异步调用

我有一个javascript for循环，在这个循环中，我为每个lat lng绑定调用一个函数，在这个函数中，我执行三个对googlemaps Places API的异步调用，在所有三个调用执行之后，我将绑定涂成绿色

问题是我的for循环是以同步方式执行的，所有的边界在一个记号中都是绿色的，而不是等待所有三个异步调用恢复

如何才能使for循环在进入下一个迭代之前等待异步调用的执行

我的代码：

async startScrapingGridLoop()
    {
        const self = this;

        for (var i = 0; i < self.zoneBoundaries.length; i++)
        {
            //Multiple async calls
            await self.scrapeCellWithPlaces(self.zoneBoundaries[i]);
            //After all three async calls end I want to color the bound green
            let currentPolygon = self.polygonsArray[i];
            currentPolygon.setOptions({fillColor: 'green', fillOpacity:0.6});

        }
    },

async scrapeCellWithPlaces(zoneBoundaries)
    {
        const self = this;
        var request = {};
        var bounds = new google.maps.LatLngBounds(new google.maps.LatLng({ lat:zoneBoundaries.sw.lat(), lng:zoneBoundaries.sw.lng() }), new google.maps.LatLng({ lat:zoneBoundaries.ne.lat(), lng:zoneBoundaries.ne.lng() }));


        for (var i = 0; i < self.types.length; i++)
        {
                
                
            request = { bounds: bounds, type: self.types[i] };
                
            self.placesService.nearbySearch(request, self.scrapeCellWithPlacesCallback);
            console.log('Scraping bounds for '+self.types[i]);
        }

    },

scrapeCellWithPlacesCallback(results, status, pagination)
    {
        const self = this;
         
        if (status == google.maps.places.PlacesServiceStatus.OK)
        {      
            for (var i = 0; i < results.length; i++)
            {
                self.results.push(results[i]);
            } 

            //self.setPlacesMarker(self.results);
            //self.fitPlacesBounds(self.results);
            
            if (pagination.hasNextPage)
            {
                console.log('fetching next set of sets');
                sleep:3;
                pagination.nextPage();

                for (var i = 0; i < results.length; i++)
                {
                    self.results.push(result[i]);
                } 
            }
        }
        console.log(self.results);
    },

async startstrapinggridloop（）
{
const self=这个；
对于（变量i=0；i

您应该将nearbySearch的回调版本转换为promise版本，因此等待promise将起作用

async startScrapingGridLoop() {
  const self = this

  for (var i = 0; i < self.zoneBoundaries.length; i++) {
    //Multiple async calls
    await self.scrapeCellWithPlaces(self.zoneBoundaries[i])
    //After all three async calls end I want to color the bound green
    let currentPolygon = self.polygonsArray[i]
    currentPolygon.setOptions({ fillColor: "green", fillOpacity: 0.6 })
  }
},

async scrapeCellWithPlaces(zoneBoundaries) {
  const self = this
  var request = {}
  var bounds = new google.maps.LatLngBounds(
    new google.maps.LatLng({
      lat: zoneBoundaries.sw.lat(),
      lng: zoneBoundaries.sw.lng(),
    }),
    new google.maps.LatLng({
      lat: zoneBoundaries.ne.lat(),
      lng: zoneBoundaries.ne.lng(),
    })
  )

  for (var i = 0; i < self.types.length; i++) {
    request = { bounds: bounds, type: self.types[i] }

    await self.nearbySearchPromise(request);
    console.log("Scraping bounds for " + self.types[i])
  }
},

nearbySearchPromise(request) {
  const self = this

  return new Promise((resolve) => {
    self.placesService.nearbySearch(request, (results, status, pagination) => {
      if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
          self.results.push(results[i])
        }
    
        //self.setPlacesMarker(self.results);
        //self.fitPlacesBounds(self.results);
    
        if (pagination.hasNextPage) {
          console.log("fetching next set of sets")
          sleep: 3
          pagination.nextPage()
    
          for (var i = 0; i < results.length; i++) {
            self.results.push(result[i])
          }
        }
      }
      console.log(self.results)

      resolve()
    })
  })
}

async startstrapinggridloop（）{
const self=this
对于（变量i=0；i{
self.placesService.nearbySearch（请求，（结果、状态、分页）=>{
if（status==google.maps.places.PlacesServiceStatus.OK）{
对于（var i=0；i

您可以使用

Promise.all

尝试在处理之前获取所需的所有数据

例如：

---

尝试过，但仍然没有结果，贴图中的所有多边形同时变为绿色，看起来下一个调用在执行下一个调用之前会等待上一个调用结束。我编辑了OP以显示新的code@gabogabans您还应将添加到OP的

scrapeCellWithPlacesCallback

的详细信息，sorry@gabogabans我更新了答案，你可以看看试试

async function scrapeGrid() {
  let boundaries = [];
  this.zoneBoundaries.forEach(boundary => boundaries.push(scrapeCellWithPlaces(boundary)));
  const polygons = await Promise.all(boundaries);
}