Question

我有一系列地名，例如：

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来确保它在使用之前已填充？

Answer 1

使用Promise.all()。

更新现有代码的步骤：

使用Array.map()代替forEach()将数据存储在数组中。
让回复map() 返回承诺（即axios.get().then()的返回值）。
对axios.get()的调用的响应将包含包含结果的数据属性，因此请使用response.data.results代替response.results
再次回复承诺

然后在设置promises数组之后，可以使用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>

如何从Google商家信息中获取一系列地点的坐标，然后在完成所有操作后使用结果？

1 个答案:

客户端Javascript中的示例