Fetch API - zurückgegebene Variable undefined

Question

Ich bin ein bisschen ein Neuling zu ES6 Javascript und habe versucht, ein Modul zu schreiben, um einige Daten von der FourSquare API mit fetch() zu greifen und die Ergebnisse in einige Listenelemente zu stecken.

Der Code für das Modul ist unter:

export default (config) => class fourSquare { 

constructor(){ 
    this.clientid = config.client_id; 
    this.secret = config.client_secret; 
    this.version = config.version; 
    this.mode = config.mode; 
} 

getVenuesNear (location) { 
    const apiURL = `https://api.foursquare.com/v2/venues/search?near=${location}&client_id=${this.clientid}&client_secret=${this.secret}&v=${this.version}&m=${this.mode}`; 

    fetch(apiURL) 
     .then((response) => response.json()) 
     .then(function(data) { 
      const venues = data.response.venues; 


      const venuesArray = venues.map((venue) =>{ 
       return { 
        name: venue.name, 
        address: venue.location.formattedAddress, 
        category: venue.categories[0].name 
       } 
      }); 


      const venueListItems = venuesArray.map(venue => { 
       return ` 
        <li> 
         <h2>${venue.name}</h2> 
         <h3>${venue.category}</h3> 
        </li> 
       `; 
      }).join(''); 

      return venueListItems; 


     }) 
    .catch(function(error) { 
     //console.log(error); 
    }); 
} 

}

ich dieses Modul in einer anderen Datei am Import und versuchen, die zurückgegebenen Listenelemente zu verwenden:

const venueHTML = fourSquareInstance.getVenuesNear(locationSearchBox.value); 

    console.log(venueHTML); 

Aber die Ergebnis ist immer undefiniert. Ich weiß, dass der Code innerhalb des Moduls in Ordnung ist, denn wenn ich Folgendes ändere: return venueListItems zu console.log(venueListItems) werden die Listenelemente auf der Konsole protokolliert. Ich glaube, dass dies auf die asynchrone Art von fetch() zurückzuführen ist, aber nicht sicher, wie ich meinen Code neu einteilen kann, um Daten von der getVenuesNear-Funktion zurückzugeben.

Answer 1

Sie haben das Ergebnis von fetch() zurückzukehren:

return fetch(apiURL) 

Auch wenn Sie die getVenuesNear Funktion aufrufen, müssen Sie die then Methode verwenden, um das Ergebnis zu gelangen:

fourSquareInstance.getVenuesNear(locationSearchBox.value).then(venueHTML => { 
    console.log(venueHTML); 
});