Angular 5 承诺 returns 未定义

Question

我试图在 HTTP 请求后 return 一个承诺，但是当我在我的组件上打印 return 时我得到了未定义。

服务：

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

这是我的组件调用：

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

Answer 1

.then() 中的参数函数将作为参数传递给 resolve()。

因此，当您执行 resolve('stuff') 时，最终 .then(r => console.log(r)) 将打印 'stuff'.

你得到 undefined 因为现在你的 resolve 被调用时没有参数:

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

由于您希望 .then() 获得 results，请将其添加到 resolve。上面的代码应该是：

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

Answer 2

您返回的是未定义的，因为您没有使用 Promise 解析。

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

Answer 3

我在正确使用 promise 时遇到了同样的问题，显然问题是因为 HTTP 拦截器我不得不处理一些错误状态代码。

我正在使用

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

        return of(err);
    })
);

改为

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

        return throwError(err);
    })
);

Angular 5 承诺 returns 未定义

Angular 5 Promise returns undefined

angular-http

angular