Question

在我的Service类中，我有一个名为token的变量，我想在调用函数时为其分配一个值。假设有一个名为login的方法，它只应返回包含后发请求的响应：

login(email: string, password: string): Observable<Response> {
    return this.httpClient.post(url, {email: email, password: password})
          .pipe(
            catchError(error => of(error))
          );
}

该函数可能看起来像这样。现在，我在其中尝试将响应中的值分配给this.token。

我该如何解决这个问题？

Answer 1

login(email: string, password: string): Observable<Response> {
    return this.httpClient.post(url, {email: email, password: password}).subscribe(data => {
        this.token = data.token;
    }, err => {
        console.log(err);
        return false;
    )
}

Answer 2

您可以使用以下代码获取响应并设置$(".modal-body").on("click", "img", function() { var src = $(this).attr('src'); alert("src: "+src); //$(this).html("<img src='"+src+"'>"); //$(".list .item #image").html("<img src='"+src+"'>"); });：

this.token

您还可以指定期望作为响应的模型类型，如下所示：

/* 
Your user model can be like this: 
interface User {
  token: string;
}
*/
this.httpClient.post(url, {email: email, password: password}).pipe(
      tap(async (userInfo: User) => {
        // login successful if there's a jwt token in the response
        if (userInfo) {                    
          this.token = userInfo.token;
        }
        return userInfo;
      })
    );

以下是如何在代码中使用它：

this.httpClient.post<User>(url, {email: email, password: password})

Answer 3

我认为最简单的方法是使用RXJS，使一切变得更简单。

httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json'
    })
  };

private loginService(url, data) {
        try {
          return this._http.post(
            Url,
            data,
            this.httpOptions
          );
        } catch (e) {
          console.log(e);
        }
      }

httpClient已经返回了一个可观察对象，因此无需声明它。然后，您只需订阅它即可：

    this.loginService(url, {email: email, password: password}).subscribe(
          (data) => {
            console.log('Login info');
          },
          (error) => console.log(error),
          () => {
            console.log('Complete);
          },
        );

如何简单地通过HttpClient读取POST请求的响应？

3 个答案: