Angular 2 中的部分可观察处理答案

【问题标题】：Partial observable handling in Angular 2Angular 2 中的部分可观察处理
【发布时间】：2016-04-28 02:35:42
【问题描述】：

我有一个登录表单的组件：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 中尝试了各种映射处理程序（如图所示），但无法使其正常工作。关于我可能做错的任何想法？

【问题讨论】：

首先，在this.api.login(username, password); 中调用.map() 之前删除;，否则你不会调用它。其次，不要映射两次，您已经将映射器定义为服务中的可观察对象。第三，您正在执行的第二次订阅（控制器中的那个）是错误的，请使用您在服务中使用的相同语法：.subscribe( data => this.data = data );

标签： angularjs angular angular2-services

【解决方案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 运算符。

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

希望对你有帮助蒂埃里

【讨论】：

感谢您的回答！在this.api.login(username, password) .subscribe( 的行上，我收到一条错误消息，指出subscription<any> 类型上不存在“订阅”
我忘了说这是我的 login() 函数中的订阅。看来您不能同时订阅这两个功能或其他东西
是的，你是对的！我的回答有误。你需要返回Observable.throw(err);...我更新了我的代码。现在应该更好了;-)
现在我收到错误property 'subscribe' does not exist on type 'void'
奇怪的是，现在我清理了所有生成的 .js 文件，它再次给出了较早的错误 subscribe not exist on Subscription<any>

【解决方案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); }

【讨论】：