如何为Google Maps Places服务的nearbySearch添加.then或使用await

原官方示例代码 #

var map;
var service;
var infowindow;

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  service.nearbySearch(request, callback);
}

function callback(results, status) {
  if (status == google.maps.places.PlacesServiceStatus.OK) {
    for (var i = 0; i < results.length; i++) {
      createMarker(results[i]);
    }
  }
}

需求 #

官方示例通过回调函数处理nearbySearch的返回结果，但希望改用Promise风格，支持await异步调用或.then()链式调用，例如：

let result__ = await service.nearbySearch(request);

或：

service.nearbySearch(request)
  .then(()=>{})

解决方案 #

Google Places API的nearbySearch本身不支持Promise，我们可以手动封装一个Promise版本的函数：

1. 封装Promise版nearbySearch

function nearbySearchPromise(service, request) {
  return new Promise((resolve, reject) => {
    service.nearbySearch(request, (results, status) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        resolve(results);
      } else {
        reject(new Error(`搜索失败：${status}`));
      }
    });
  });
}

2. 使用async/await调用

将initialize改为异步函数，直接用await获取结果：

async function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  
  try {
    const results = await nearbySearchPromise(service, request);
    results.forEach(result => createMarker(result));
  } catch (error) {
    console.error(error.message);
  }
}

3. 使用.then()链式调用

如果偏好链式调用风格，可按如下方式使用：

function initialize() {
  var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);

  map = new google.maps.Map(document.getElementById('map'), {
      center: pyrmont,
      zoom: 15
    });

  var request = {
    location: pyrmont,
    radius: '500',
    type: ['restaurant']
  };

  service = new google.maps.places.PlacesService(map);
  
  nearbySearchPromise(service, request)
    .then(results => {
      results.forEach(result => createMarker(result));
    })
    .catch(error => {
      console.error(error.message);
    });
}

内容的提问来源于stack exchange，提问作者Sanket Patil