Angular 2 中的部分可观察处理

Question

我有一个登录表单的组件：loginForm 调用我的 api:

  onLogin(): void {

    let username = this.loginForm.value.username;
    let password = this.loginForm.value.password;

    this.api.login(username, password);

      .map(res => res.json())

      .subscribe(
        this._processData,
      );

  }

有一个调用 api 的服务：loginService。

login(username: string, password: string): Subscription<any> {

    let headers = new Headers();
    headers.append("Content-Type", "application/json");

    return this.http.put("https://myapi.com", JSON.stringify({ username: username, password: password}), {
      headers: headers
    })

    .map(res => res.json())

    .subscribe(
      data => console.log(data),
      err => console.log(err),
      () => console.log("Done")
    );

}

我要的是在loginService内部处理的错误。但是结果返回到 onLogin 方法。

我在 onLogin 中尝试了各种映射处理程序（如图所示），但无法使其正常工作。关于我可能做错的任何想法？

Answer 1

实际上，你在subscribe方法中定义了一个回调来处理login方法中的错误（第二个参数）。如果您想让错误传播到您的 onLogin 方法中，您需要删除此回调（甚至 subscribe 的调用）。

return this.http.put("https://myapi.com",
  JSON.stringify({ username: username, password: password}), {
    headers: headers
  })
.map(res => res.json());

如果您想记录错误然后传播它，您可以利用 Observable.throw 方法：

return this.http.put("https://myapi.com",
  JSON.stringify({ username: username, password: password}), {
    headers: headers
  })

.map(res => res.json())

.catch(err => {
  console.log(err);
  return Observable.throw(err);
});

在这种情况下你需要添加一个回调来处理onLogin方法中的错误：

onLogin(): void {
  let username = this.loginForm.value.username;
  let password = this.loginForm.value.password;

  this.api.login(username, password)
  .subscribe(
    (data) => {
      // Success
      this._processData(data)
    },
    (err) => {
      // Error
    }
  );
}

您可以注意到 Observable 上有一个 catch 运算符来捕获错误，在出现错误的情况下，不会调用 map 运算符。

这些答案可以为您提供更多详细信息：

希望对你有帮助，蒂埃里

Answer 2

您可以在您的服务中定义您的错误处理程序，并只从您订阅的组件传递错误。

// component

onLogin(): void {

let username = this.loginForm.value.username;
let password = this.loginForm.value.password;

this.api
  .login(username, password)
  .subscribe(
    this._processData, // success
    this.api.onError   // error
    // if above doesn't work this should:
    // error => this.api.onError(error)
  );

}

_processData(...data) { console.log(data); }

// service

login(username: string, password: string): Subscription<any> {

  let headers = new Headers();
  headers.append("Content-Type", "application/json");

  return this.http
    .put("https://myapi.com", JSON.stringify({ username: username, password: password}), { headers: headers })
    .map(res => res.json())
}

onError(...args) { console.log(args); }

Angular 2 中的部分可观察处理

Partial observable handling in Angular 2

angularjs

angular

angular2-services