我怎样才能从Google地方获得一系列地点的坐标,然后在结束之后使用结果?

我有一些地名,例如:

const places = ['King Square, London', 'Empire State Building', 'Great Wall of China']; 

我需要一个新的对象数组,其中包含为地名数组中的每个元素设置的位置,例如:

 const places = [ { name: 'King Square, London', position: { latitude: ..., longitude: ... } }, ... ]; 

我想我必须做这样的事情:

 const places = []; ['King Square, London', 'Empire State Building', 'Great Wall of China'].forEach(placeName => { axios .get(`https://maps.googleapis.com/maps/api/place/textsearch/json?key=GOOGLE_PLACES_API_KEY&query=${placeName}`) .then(response => { if (!!response && !!response.results && !!response.results[0]) { const searchResult = response.results[0]; if (!!searchResult) { axios .get(`https://maps.googleapis.com/maps/api/place/details/json?key=GOOGLE_PLACES_API_KEY&placeid=${searchResult.place_id}`) .then(response => { const placeResult = response.result; if (!!placeResult) { places.push({ name: placeName, position: placeResult.geometry.location }) 

但似乎并不奏效。

应该看起来像这样,我可以填充的places并使用数组后填充? 我必须使用承诺,以确保它使用之前填充?

使用Promise.all() 。

更新现有代码的步骤:

  1. 使用Array.map()而不是forEach()将承诺存储在数组中。
  2. 让map() 返回 promise(即从axios.get().then() )返回的值。
  3. 对axios.get()的调用的响应将具有包含结果的数据属性,所以使用response.data.results而不是response.results
  4. 再次承诺
  5. 然后在promises数组已经build立之后,可以使用Promise.all():

     const places = []; //1 - store promises in an array var promises = ['King Square, London', 'Empire State Building', 'Great Wall of China'].map(placeName => { return axios //2 - return promise .get(`https://maps.googleapis.com/maps/api/place/textsearch/json?key=GOOGLE_PLACES_API_KEY&query=${placeName}`) .then(response => { //3 - use response.data.results instead of response.results if (!!response && !!response.data && !!response.data.results && !!response.data.results[0]) { const searchResult = response.data.results[0]; if (!!searchResult) { return axios //4 return nested promise .get(`https://maps.googleapis.com/maps/api/place/details/json?key=GOOGLE_PLACES_API_KEY&placeid=${searchResult.place_id}`) .then(response => { const placeResult = response.data.result; if (!!placeResult) { places.push({ name: placeName, position: placeResult.geometry.location }); } }) } } }); }); //5 - After promises are done, use the places array Promise.all(promises).then(results => { console.log('places:', places); }) 

输出

 places: [ { name: 'King Square, London', position: { lat: 51.52757920000001, lng: -0.0980441 } }, { name: 'Great Wall of China', position: { lat: 40.4319077, lng: 116.5703749 } }, { name: 'Empire State Building', position: { lat: 40.7484405, lng: -73.98566439999999 } } ] 

在客户端JavaScript中的示例

以下是(客户端)JavaScript的端口。 注意它是如何非常相似的,但是使用了StackOverflow API(因为没有这样的CORS问题)。

 var ranks = []; var promises = [94, 95].map(badgeId => { return axios.get(`https://api.stackexchange.com/2.2/badges/${badgeId}?site=stackoverflow&order=desc&sort=rank&filter=default`) .then(response => { var responsebadgeId = response.data.items[0].badge_id; return axios.get(`https://api.stackexchange.com/2.2/badges/${responsebadgeId}/recipients?site=stackoverflow`) .then(response => { console.log('pushing rank into array from data: ',response.data.items[0].rank); ranks.push(response.data.items[0].rank); }); }); }); Promise.all(promises).then(responses => { console.log('promises all callback - ranks:',ranks); }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script>