Fetch API - 返回的变量未定义 [英] Fetch API - returned variable undefined

问题描述

我是ES6 Javascript的新手，并且一直在尝试用一个模块来从FourSquare API中使用fetch（）获取一些数据，并将结果粘贴到一些列表项中。

该模块的代码如下：

  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（（places）=> {
 return {
 name：venue.name，
地址：places.location.formattedAddress，
 category：venue.categories [0] .name 
} 
}）; 
 
 
 const placesListItems = venuesArray.map（places => {
 return`
< li> 
< h2> $ {venue.name}< / h2> 
< h3& ; $ {places.category}< / h3> 
< / li> 
`; 
}）join（''）; 
 
 return venueListItems ; 
 
 
}）
 .catch（function（error）{
 //console.log （错误）; 
}）; 
} 
  

}

我在另一个文件中导入此模块，并尝试使用返回的列表项：

  const placesHTML = fourSquareInstance.getVenuesNear（locationSearchBox。值）; 
 
 console.log（placesHTML）; 
  

但结果始终未定义。我知道模块中的代码是正确的，因为如果我更改：返回placesListItems 到 console.log（placesListItems）列表项被记录到控制台。我相信这可能是由于fetch（）的异步性质，但不知道如何重新确定代码从getVenuesNear函数返回数据。

解决方案

您必须返回 fetch（）的结果：

 code> return fetch（apiURL）
  

此外，当您调用 getVenuesNear 函数，您必须使用然后方法来访问结果：

  fourSquareInstance.getVenuesNear（locationSearchBox.value）.then（placesHTML => {
 console.log（placesHTML）; 
}）; 
  

I am a bit of a newbie to ES6 Javascript and have been trying to write a module to grab some data from the FourSquare API using fetch() and stick the results into some list items.

The code for the module is below:

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);
    });
}

}

I am importing this module in another file and attempting to use the returned list items:

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

    console.log(venueHTML);

But the result is always undefined. I know that the code within the module is OK because if I change: return venueListItems to console.log(venueListItems) the list items are logged to the console. I believe this may be due to the asynchronous nature of fetch() but not sure how to re-factor my code to return data from the getVenuesNear function.

解决方案

You have to return the result of fetch():

return fetch(apiURL)

Also, when you call the getVenuesNear function, you have to use the then method to access the result:

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

这篇关于Fetch API - 返回的变量未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！