1

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

4

2 回答 2

3

实际上，您在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不会调用该操作员。

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

希望它可以帮助你，蒂埃里

于 2016-01-21T18:04:57.150 回答
0

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

// 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); }
于 2016-01-21T20:57:35.847 回答