HTTP 错误处理如何与可观察对象一起工作？

Question

我看到很多教程都是这样做的：

http.get("...").subscribe(
  success => console.log('hello success'),
  error => console.log('bye error')
);

我不知道它是如何工作的，因为没有任何类型或任何东西，但是我试着自己做，结果我总是请求成功，即使我有错误。有什么问题？

麻烦制造者：

this.memberService.create(this.currentMember)
      .subscribe(
        success => {
          let mem: Member = success.json() as Member;
          if (this.selectedOrganization) {
            this.addMemberToOrganization(mem);
          } else if (this.selectedServiceProvider) {
            this.addMemberToServiceProvider(mem);
          } else {
            this.toastsService.error("lbl_users_service_provider_and_organization_undefined");
          }
        },
        error => console.log(error)
      );

memberService中的Create-Method:

  create(member: Member): Observable<any> {
    return this.http
      .post(this.RESOURCE_BASE_URL, member)
      .map(response => {
        if (response.status === 200) this.toastsSerivce.success(this.translateService.instant('lbl_users_member_created'));
        return response;
      })
      .catch(error => this.toastsSerivce.error(this.translateService.instant('lbl_users_member_create_failed')));
  }

我什至发现了错误，但 subscribe 部分似乎并不在意。它在 success.json() 处失败，因为如果有错误，就没有 json。但是如果出现错误，我希望它调用 error =>... 而不是 success。非常感谢任何建议。

Answer 1

我认为问题在于 你不是 throwing 错误 Observable.throw(errMsg)。

因此，您可以像这样使用它：

.catch((error:any) => Observable.throw(error.json().error || 'Server error'));

在你的例子中：

create(member: Member): Observable<any> {
    return this.http
      .post(this.RESOURCE_BASE_URL, member)
      .map(response => {
        if (response.status === 200) this.toastsSerivce.success(this.translateService.instant('lbl_users_member_created'));
        return response;
      })
      .catch((error:any) => Observable.throw(this.toastsSerivce.error(this.translateService.instant('lbl_users_member_create_failed'))));
  }

但是，您可以使用错误处理程序，例如 Angular 建议 here:

private handleError (error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }

因此，您的方法看起来更像这样：

create(member: Member): Observable<any> {
    return this.http
      .post(this.RESOURCE_BASE_URL, member)
      .map(response => {
        if (response.status === 200) this.toastsSerivce.success(this.translateService.instant('lbl_users_member_created'));
        return response;
      })
      .catch(this.handleError);
  }

对于您可能在您的服务中创建的其他方法，它实际上更干净且更可重用。

我建议也使用响应处理程序，就像 Angular 的开发人员使用的那样：this.extractData.

显然，您可以在错误处理方法中放置您自己的自定义逻辑，这取决于您希望如何显示或处理错误。

注意：我没有测试您的代码，也没有测试我在此处发布的代码。但是我想show/express这个概念。 您应该抛出错误，以免每次都进入 success。你如何处理它取决于你和你的应用程序。

Answer 2

对我有用：

this.http.post('http://example.com/path/', {sampleData: 'd'}).subscribe(
  res => {alert('ok!');},
  err => {alert(err.error)}
)

HTTP 错误处理如何与可观察对象一起工作？

How does HTTP error-handling work with observables?

angular-http

angular

angular-observable