Question

我精通Angular 1.x / Promises，但对Angular5 / Observables来说却是全新的。使用Angular 1和Promises，我们可以拦截对API的HTTP响应，使用HTTP响应执行某些特定的日志记录，然后使用新的延迟Promise传回返回给调用者的实际数据。然后调用者解析Promise以获取返回值。

我想用Angular 5做类似的事情，但我被Observables挂了。我似乎无法弄清楚如何获取HTTP响应，记录它或错误，然后使用数据或错误将响应数据传播回调用者。

EX：

＆＃39;基地＆＃39;函数调用HttpClient＆＃39;请求＆＃39;功能。我希望在这里订阅一些日志记录，然后返回一个新的Observable来传回，特别是如果调用成功的话。

base<R>(method: string, url: string) {
    const _headers = new HttpHeaders();
    const headers = _headers.append(this.CONTENT_TYPE_HEADER, this.CONTENT_TYPE)
      .append(this.AUTH_HEADER, (this.AUTH_TYPE + TokenMgrService.UserJwt));

    return this.http.request<R>(method, url, { headers: headers, observe: 'response' }).subscribe(
      (res: HttpResponse<R>) => {
        // Do some detailed logging here...
        return res.body;
      },
      err => {
        // Do some error logging here...
        return null;
      });
  }

＆＃39; get＆＃39;函数是一个简单的包装基地＆＃39;功能。计划是以类似的方式支持其他方法（POST，PUT，DELETE）。

  get<R>(url: string) {
    return this.base('GET', url);
  }

＆＃39; getFoo＆＃39;是应用程序/ API特定服务中的函数示例。我会提供模板类型并致电＆＃39; get＆＃39;包装函数。

  getFoo(foo_id: number) {
    return this.get<Foo>('https://hostname/v1/foos/' + foo_id);
  }

我希望来电者能够得到这样的信息。能够订阅以获得结果或错误....或者我...我不确定。

  // Caller
  getFoo(111).subscribe(
    res => {
      // WAT!?
    }
  );

功能＆＃39; getFoo＆＃39;窒息因为＆＃39;订阅＆＃39;返回的订阅中不存在源自＆＃39; base＆＃39;功能

显然，我离开基地......有人能指出我正确的方向吗？感谢。

Answer 1

我想通了......至少我试图解决的具体问题。我必须在示例中进行以下更改：

base<R>(method: string, url: string): Observable<R> {
    const _headers = new HttpHeaders();
    const headers = _headers.append(this.CONTENT_TYPE_HEADER, this.CONTENT_TYPE)
      .append(this.AUTH_HEADER, (this.AUTH_TYPE + TokenMgrService.UserJwt));

    return this.http.request<R>(method, url, { headers: headers, observe: 'response' }).do(
      (res: HttpResponse<R>) => {
        // Do some detailed logging here...
        console.log(res.statusText);
      },
      err => {
        // Do some error logging here...
        console.log(err);
      })
      .map((res: HttpResponse<R>) => { return res.body; });
  }

根据estus的建议添加了'do'和'map'运算符。 'do'允许我在没有订阅的情况下使用Observable，因此我可以进行一些特定的日志记录（将来会将日志数据发送到Elasticsearch进行跟踪）。 'map'允许我转换请求Observable＆lt;的HttpResponse＆LT; T＆GT;＆GT;只是可观察的＆lt; T＆GT;在我传递给调用者之前从响应中去掉HTTP元数据。

  get<R>(url: string): Observable<R> {
    return this.base('GET', url);
  }

如此明确地返回Observable＆lt; R＆GT;

如何处理Angular HttpClient HttpResponse

1 个答案: