如何使用 axios 为 Google 地图和 React 中的 placeid 获取数据？

Posted 2023-02-22

【中文标题】如何使用 axios 为 Google 地图和 React 中的 placeid 获取数据？

【英文标题】：How to fetch data with axios for a placeid in Google maps and React?

【发布时间】：2018-11-19 19:53:59

【问题描述】：

我有一个状态为restaurantsFetchedFromGoogle 的数组，它当前存储了以前从谷歌地图获取的 20 个地点标识。它们存储在数组中：

0:"ChIJTb1qU315MhMRiL7pihnMWfg"
1:"ChIJGZ0jXCCNMRMRrH8VHRAgEYE"
2:"ChIJQ5jaX8eMMRMRnRoZxl6X95w"
...
19:"ChIJQ5jaX8errrMRnRoZxl6X95w"

现在我正在尝试使用 Axios 获取请求来迭代数组，例如：

componentDidMount()
    navigator.geolocation.getCurrentPosition(position=>
    this.setState(geoLat:position.coords.latitude,geoLng:position.coords.longitude);
    axios.get(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=$position.coords.latitude,$position.coords.longitude&radius=50000&keyword=recensioni&type=ristorante&keyword=cena&key=MYAPIKEY`)
         .then(response => this.setState(restaurantsFetchedFromGoogle:response.data.results));
    );
    this.state.restaurantsFetchedFromGoogle.map(item=>
      axios.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=$item.place_id&key=AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA`)
           .then(response => this.setState(placeId:response.data))
           .catch(err =>
           console.log(err);
           console.log(err.response.data.error);
    );
  );
    axios.get('/restaurants.json')
         .then(response =>this.setState(restaurants:response.data));
  

第一个和第三个 axios 请求通过但不是第二个。我做错了什么？

【参考方案1】：

添加一个错误处理程序来记录错误消息！这应该会告诉您请求失败的原因。

this.state.restaurantsFetchedFromGoogle.map(item=>
axios.get('https://maps.googleapis.com/maps/api/place/details/json?placeid='+ 
item + '&key=MYAPIKEY')
   .then(response => this.setState(placeId:response.data))
   .catch(err => 
     console.log(err)                     //Axios entire error message
     console.log(err.response.data.error) //Google API error message 
   )
);

即使没有 .catch - 您也可以使用 chrome 开发工具在开发工具的“网络”选项卡下查看错误。

如果您之后仍有问题 - 请发布具体的错误消息，我会看看。

【讨论】：

忘了说，没有错误信息。应用加载没有问题，没有错误消息，甚至没有警告

你的代码中有 axios .catch 吗？ -- axios 将返回响应或错误，其中之一应该能够帮助您。您是否尝试过向 API 发出更简单的请求，以查看是否可以从 API 中获取某些信息以确认您的密钥和 placeid 有效？

如果我对请求进行硬编码，例如：https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJAyYSATaLMRMRcfuQTscJ56I&key=MYKEY，它将返回相关的 placeid。所有的placeids都是有效的，因为他们从服务器回来了

您是否尝试过对地点详细信息请求进行硬编码？从那开始，console.log 来自 axios 的完整响应或错误。如果您当前的代码没有出现错误，则该请求可能有效。您确定您正在使用 response.data 正确访问从 API 返回的数据吗？

我将在原始问题中包含整个 componentDidMount 方法，因为在此评论中存在字符限制。