javascript - How do I promisify a callback from the goole.maps.places API getPlacePredictions? -


i trying promisify google maps api function, seem not succeed. getting cannot read property 'then' of undefined when calling function.

i tried follow examples in thread, no luck: turn callback promise

the callback function this:

predictionservice = new google.maps.places.autocompleteservice(); predictionservice.getplacepredictions(     { input: '1 main street, south bend' },      displaypredictionsuggestionscallback  );  function displaypredictionsuggestionscallback( input ){     // output results } 

my promisifaction looks this:

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();     }); } 

and function calls service:

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

you're doing things right. things change:

  1. you need return promise function. add return dfd.promise(); @ end.

  2. you don't need return within callback, else.

  3. you don't need .promise() on resolve call.

so:

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();                            // *** } 

that's jquery's deferred. might want use native promiseinstead, polyfill if needed:

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);             }         });     }); } 

note use of new error reject. in general, using error reject useful because provides context (where "error" occurred).


Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -