如何通过goole.maps.places API getPlacePredictions promisify回调？

Question

我正在尝试Google地图API功能，但似乎没有成功。调用我的函数时，我得到Cannot read property 'then' of undefined。

我试图按照该线程中的例子，但没有运气：Turn callback into promise

回调函数应该是这样的：

predictionService = new google.maps.places.AutocompleteService(); 
predictionService.getPlacePredictions(
    { input: '1 main street, south bend' }, 
    displayPredictionSuggestionsCallback 
); 

function displayPredictionSuggestionsCallback(input){ 
    // output results 
} 

我promisifaction看起来是这样的：

predictionService = new google.maps.places.AutocompleteService(); 

function getPredictionSuggestion (input){ 

    var dfd = $.Deferred(); 

    predictionService.getPlacePredictions({ 
     input: input 
    }, function (place, status) { 
     if (status != google.maps.places.PlacesServiceStatus.OK) { 
      return dfd.reject("Request failed: " + status); 
     } 
     dfd.resolve(place).promise(); 
    }); 
} 

这是调用服务的功能：

getPredictionSuggestion('1 main street, south bend').then(function(results) { 
     console.log('promise results = ' + results); 
    }, function(err) { 
     alert(err); 
    }); 

Answer 1

你正在做的事情是正确的。改变的事情：

1. 您需要从您的功能返回承诺。在末尾添加return dfd.promise();。

2. 您不需要需要return在您的回调中，只需else。请致电。

所以：

predictionService = new google.maps.places.AutocompleteService(); 

function getPredictionSuggestion (input){ 

    var dfd = $.Deferred(); 

    predictionService.getPlacePredictions({ 
     input: input 
    }, function (place, status) { 
     if (status != google.maps.places.PlacesServiceStatus.OK) { 
      dfd.reject("Request failed: " + status); // *** 
     } else {          // *** 
      dfd.resolve(place);     // *** 
     }           // *** 
    }); 

    return dfd.promise();       // *** 
} 

---

这对jQuery的Deferred。你可能会想，如果需要使用本地Promise代替，用填充工具：

predictionService = new google.maps.places.AutocompleteService(); 

function getPredictionSuggestion(input) { 
    return new Promise(function(resolve, reject) { 
     predictionService.getPlacePredictions({ 
      input: input 
     }, function (place, status) { 
      if (status != google.maps.places.PlacesServiceStatus.OK) { 
       reject(new Error(status)); 
      } else { 
       resolve(place); 
      } 
     }); 
    }); 
} 

注意使用new Error与reject。通常，将Error与拒绝一起使用非常有用，因为它提供了上下文（出现“错误”的位置）。