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
    }
  );
}

您可以注意到catch上的Observable运算符可以捕获错误，如果出现错误，则不会调用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

2 个答案: