异步 Http 角度请求 [重复]答案

【问题标题】：Async Http angular request [duplicate]异步 Http 角度请求 [重复]
【发布时间】：2018-12-03 16:07:15
【问题描述】：

我正在使用 Angular 6，现在我正在以这种方式更新我的资源距离

this.user = api.getUser();

public getUser(): User {
  const myHeader = new HttpHeaders({
    'Authorization': 'Basic ' + this.session.getAccessToken(),
  }).append('Content-Type', 'application/json');
  this.http.get < User > (API_URL + '/users', {
      headers: myHeader
    })
    .pipe(
      catchError(this.handleError('get-user', [])))
    .subscribe((response) => {
      return <User > response;
    });
  return null;
}

我的问题是我的响应首先返回 null，然后返回我的响应距离。我如何为此提供解决方案？

谢谢

【问题讨论】：

您将返回 null，然后返回结果。删除return null;，它会正常工作。您也不应该订阅该服务。您应该删除 .subscribe 并添加 return this.http.get(...) 并订阅组件。
它说我必须返回一些东西......
@AlesandroGiordano 在上面更新了我的答案。如果你不熟悉 Angular 看看这个：angular.io/tutorial/toh-pt4

标签： javascript node.js angular

【解决方案1】：

您的getUser 方法应返回Observable<User>。像这样的：

public getUser(): Observable<User> {

  const myHeader = new HttpHeaders({
    'Authorization': 'Basic ' + this.session.getAccessToken(),
  })
  .append('Content-Type', 'application/json');

  return this.http.get<User>(API_URL + '/users', { headers: myHeader })
    .pipe(
      catchError(this.handleError('get-user', []))
    );
}

当您调用api.getUser() 时，您应该将subscribe 发送到此Observable<User> 以获取用户。像这样：

api.getUser()
  .subscribe(response => this.user = response);

【讨论】：

【解决方案2】：

public getUser(): Observable<User> {
    const myHeader = new HttpHeaders({
      'Authorization': 'Basic ' + this.session.getAccessToken(),
    }).append('Content-Type', 'application/json');

    return this.http
      .get<User>(API_URL + '/users', {headers: myHeader})
      .pipe(
        catchError(this.handleError('get-user', []))
      );
  }



api.getUser().subscribe(user => this.user = user);

【讨论】：

类型 Observable 不可分配给 Osservable
请帮帮我，我对角度不太熟悉
@AlesandroGiordano 只需将 Observable<User> 替换为 Observable<any>

【解决方案3】：

您需要做的是异步设置 this.user 的值。您应该从该方法返回 Observable，而不是在 getUser 方法中订阅您的 http 调用。它看起来像这样：

public getUser(): Observable<User> {
    const myHeader = new HttpHeaders({
      'Authorization': 'Basic ' + this.session.getAccessToken(),
    }).append('Content-Type', 'application/json');
    return this.http.get<User>(API_URL + '/users', {headers: myHeader})
      .pipe(
      catchError(this.handleError('get-user', [])));
}

getUser().subscribe((user) => this.user = user);

希望有帮助！

【讨论】：