CODEWITHSUNDEEP
angularangular-http
John
John

Reputation: 2163

Angular 5 Promise returns undefined

I'm trying to return a promise after an HTTP Request but I get undefined when I print the return on my component.

service:

getPlace() {
let promise = new Promise((resolve, reject) => {

  this.http.get('http://localhost:3000/api/place/')
      .toPromise()
      .then(
          res => { // Success
            this.results = res.results.map(item => {
              var place = new Place();
              place.place_id = item.place_id;
              place.name=item.name;
              place.vicinity=item.vicinity;
              place.coordinates = new Coordinates();
              place.coordinates.latitude = item.geometry.location.lat;
              place.coordinates.longitude = item.geometry.location.lng;
              return place;
            });

            resolve();
            console.log(  this.results);
          },
          msg => { // Error
            reject(msg);
          }
      );
});
return promise;
}

here its my component call:

getPlace(): void{
 this.cityService.getPlace().then( (res) => {console.log(res);
   });
}

Upvotes: 2

Views: 5697

Answers (3)

a7md0
a7md0

Reputation: 447

I had the same issue while using the promise correctly, apparently the issue was because of HTTP interceptor I had to handle some error status code.

I was using

return next.handle(request).pipe(
    catchError((err: any) => {
        // ...

        return of(err);
    })
);

Changed to

return next.handle(request).pipe(
    catchError((err: any) => {
        // ...

        return throwError(err);
    })
);

Upvotes: 0

Narm
Narm

Reputation: 10844

You are returning undefined, because you're not using the Promise resolution.

this.http.get('http://localhost:3000/api/place/')
      .toPromise()
      .then(
          res => { // Success
            this.results = res.results.map(item => {
              var place = new Place();
              place.place_id = item.place_id;
              place.name=item.name;
              place.vicinity=item.vicinity;
              place.coordinates = new Coordinates();
              place.coordinates.latitude = item.geometry.location.lat;
              place.coordinates.longitude = item.geometry.location.lng;
              //return place; Remove this
            });

        resolve(this.results);
        console.log(  this.results);
      },
      msg => { // Error
        reject(msg);
      }
  );

Upvotes: 1

acdcjunior
acdcjunior

Reputation: 135772

The argument function in .then() will get as argument whatever you pass to resolve().

So when you do resolve('stuff') then an eventual .then(r => console.log(r)) would print 'stuff'.

You are getting undefined because right now your resolve is being called without arguments:

      res => { // Success
        this.results = res.results.map(item => {
          var place = new Place();
          place.place_id = item.place_id;
          place.name=item.name;
          place.vicinity=item.vicinity;
          place.coordinates = new Coordinates();
          place.coordinates.latitude = item.geometry.location.lat;
          place.coordinates.longitude = item.geometry.location.lng;
          return place;
        });

        resolve();                              // <==== resolve without arguments here
        console.log(  this.results);
      },

Since you want the .then() to get the results, add it to the resolve. The code above then should be:

      res => { // Success
        this.results = res.results.map(item => {
          var place = new Place();
          place.place_id = item.place_id;
          place.name=item.name;
          place.vicinity=item.vicinity;
          place.coordinates = new Coordinates();
          place.coordinates.latitude = item.geometry.location.lat;
          place.coordinates.longitude = item.geometry.location.lng;
          return place;
        });

        resolve(this.results);                  // <===== changed this line
        console.log(  this.results);
      },

Upvotes: 3

Related Questions