使用管道和地图在Angular HttpClient帖子的响应上运行逻辑

Question

我打电话给我的Web API登录.该调用返回一个JSON对象,该对象具有一个名为token的属性.

在我的AuthService中,我有以下功能:

  login(model: any) {
    return this.http.post('http://localhost:5000/api/auth.login', model, httpOptions).pipe(map((response: Response) => {
      console.log(response);
      if (response) {
        // localStorage.setItem('token', jwtHelper.decodeToken(response.token));
        // this.decodedToken = jwtHelper.decodeToken(response.token);
        // this.userToken = response.token;
      }
    }));
  }

以下是console.log响应的样子:

{token: "eyJhbGciOiJIUzXxMiIsInR5cCI6IkpXVCJ9.eyJuYW1laWQiO…CDNojrJEwmuIbLOjhCxzDwls22SA4Whpklh7zPFaR6g_1iQcQ"}

我可以让这个函数没有返回调用它的组件,但为了在本地存储和一些其他属性中设置令牌,我使用管道,然后映射.它是否正确？我尝试访问它时,response.token会抛出一个错误,因为typescript不知道响应中的token属性.

Answer 1

要摆脱TS错误,您可以引入根据您的响应设计的新界面.此外,如果您只想对值执行某些操作,则最好使用tap运算符(以前称为do):

interface MyApiResponse {
  token: string;
}

login(model: any) {
  return this.http.post<MyApiResponse>('http://localhost:5000/api/auth.login', model, httpOptions)
    .pipe(tap((response: MyApiResponse) => {
      console.log(response.token);
      if (response) {
        // localStorage.setItem('token', jwtHelper.decodeToken(response.token));
        // this.decodedToken = jwtHelper.decodeToken(response.token);
        // this.userToken = response.token;
      }
    }));
}

如果您只想返回令牌(因此您希望改变响应),请map改用(如您所知).

Answer 2

map当您想要更改响应并提供修改后的响应时可以使用；

this.http.post('http://localhost:5000/api/auth.login', model, httpOptions)
.pipe(
    map((response: any) => { // <--------- MAP
        // Your code 
    })
);

但是，如果您只想处理某些功能并且不想更改/修改响应，tap则操作员是

this.http.post('http://localhost:5000/api/auth.login', model, httpOptions)
.pipe(
    tap((response: any) => { // <--------- TAP
        // Your code 
    })
);

注意：tap运算符在 RxJs6 / 5.5 中可用，对于旧版本，请使用do相同的运算符