Question

我在角度5中发送了一个http：post方法，并希望获得一些数据，但如果出现错误，服务器将向我发送不同的数据结构。我的意思是，一个不同的对象。我创建了两个类，一个用于正确的响应，另一个用于错误响应。

也许是Observable。我很困惑。

登录后，我得到了这个：

{
    "token_type": "Bearer",
    "expires_in": 299,
    "access_token": "da7a2180c2883ff8dasdsadsc84",
    "refresh_token": "def502000396e1de7a2180c2883ff8c84"
}

但如果我的请求失败，我得到了这个：

{ 
    "error": "invalid_grant",
    "message": "a long message that nobody reads... ",
    "hint": "Check the configuration to see if the grant is enabled."
}

将获得响应的类是：

export class token {
        token_type: string;
        expires_in: number;
        access_token: string;
        refresh_token: string;
    }

获得失败响应的类就是这个：

export class error
    {
        error: string;
        message: string;
        hint: string;
    }

这是http.post：

  login (token: Token): Observable<Token> {
      const url = `${this.mainUrl}user/login?_format=json`;  
      const loginReturn = this.http.post(url, token);     
      console.log (loginReturn);    

      return loginReturn 
      .map((token: Token) => 
        {
            if (token && token.access_token){
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                 localStorage.setItem('token', JSON.stringify(token.access_token));
            }
        // console.log ('localstorage ' + localStorage['token']);
        return token;
       })   
  }

Answer 1

您可以设置union type - Token | Error，表示您的返回类型为Observable<Token>或Observable<Error>

login (token: Token): Observable<Token | Error> {
   ...
}

Answer 2

你的const loginReturn类型为响应https://angular.io/api/http/Response，在你拥有的那个对象上

布尔 ok ，对于好的调用是正确的，对于像400这样的错误调用是假的
或包含服务器的HttpStatusCode的字段状态

所以你应该在 ok === true 时进行映射代码，当bool为false时，你可以做一些通用的错误处理

或

甚至在你的令牌/错误周围包装一个父对象，包含相同的bool，这样你就可以处理调用这个服务的组件中的错误并返回它并在那里进行一些处理

export class response {
  token: token,
  error: error,
  ok: boolean
}

Answer 3

您应该在您的请求中添加.catch()

login (token: Token): Observable<Token> {
    ...
    return loginReturn 
        .map((token: Token) => ..)
        .catch((error) => throw Observable.throw(err))
}

然后您可以使用.subscribe()

中的错误回调

loginService.login(token)
    .subscribe(
        (data) => ...,
        (error) => ...handle error...
    )

如何在Angular 5中的http响应中处理两个可能的对象

3 个答案: