javascript - 如何 promise 来自 google.maps.places API getPlacePredictions 的回调？

Question

我试图 promise Google map 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
}

我的 promise 是这样的:

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. 您需要从函数返回 promise 。在末尾添加 return dfd.promise();。

2. 您不需要在回调中使用return，只需else即可。

3. 您不需要在resolve调用中需要.promise()。

所以:

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 的延迟。您可能想使用原生的 Promise，如果需要的话可以使用 polyfill:

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与reject结合使用非常有用，因为它提供了上下文(“错误”发生的位置)。