Angular typescript Async HTTPClient call

Published

I have a problem. In my angular project I am trying to do a Http POST call, to login in my website. I provide the call with an username and password. If the API endpoint returns null, the login failed and if the endpoint returns an Account object it succeeded. The code to make the Http POST call is the following:

import { Injectable } from '@angular/core';
import {Account} from "../models/Account";
import {Observable} from "rxjs";
import {HttpClient, HttpHeaders} from "@angular/common/http";
import {PostService} from "./post.service";

@Injectable({
    providedIn: 'root'
})
export class AccountService {

    public loggedInAccount: Account | null;

    private httpOptions = {
        headers: new HttpHeaders({
            'Content-Type':  'application/json',
            //Authorization: 'my-auth-token'
        })
    };

    constructor(private httpClient: HttpClient) {
        this.loggedInAccount = null;
    }

    public login(account: Account):Account | null {
        this.restLogin(account).subscribe(
            (data) => {
                if (data != null) {
                    this.loggedInAccount = data;
                }
                return data;
            },
            (error) => {
                alert('Error: Status ' + error.status + ' - ' + error.error);
            });
        return null;
    }


    private restLogin(account: Account): Observable<Account> {
        let email = account.email;
        let password = account.password;
        return this.httpClient.post<Account>('http://localhost:8080/account/login', {email, password}, this.httpOptions);
    }

}

The problem is that the login() function always returns null. I understood I had to use some kind of async/await, but I can’t seem to figure out how to use it in my case. Here is what I tried. In the AccountService:

public async login(account: Account):Promise<Account | null> {
    let returnValue = null;
    await this.restLogin(account).subscribe(
        (data) => {
            if (data != null) {
                this.loggedInAccount = data;
            }
            returnValue = data;
        },
        (error) => {
            alert('Error: Status ' + error.status + ' - ' + error.error);
        });
    return returnValue;
}

On the login page:

public onLoginClick(): void {
    let email = (document.getElementById("txtEmail") as HTMLInputElement).value;
    let password = (document.getElementById("txtPassword") as HTMLInputElement).value;

    if (this.accountService.login(new Account(email, password)) != null) {
        this.accountService.loggedInAccount!.posts = this.postService.getAccountPosts(this.accountService.loggedInAccount!.id);
        this.route.navigate(['/']);
    }
    else {
        (document.getElementById("txtMessage") as HTMLDivElement).innerHTML = "Incorrect email/password!"
    }
}

But this gives me an error on the login page on this line:

this.accountService.loggedInAccount!.posts = this.postService.getAccountPosts(this.accountService.loggedInAccount!.id);

saying that this.accountService.loggedInAccount is null, but that couldn’t be possible, because I set it with this in de AccountService:

if (data != null) {
    this.loggedInAccount = data;
}
return data;

Can someone tell me how to fix and optimize (if possible) this?

Source: Angular Questions

Published
Categorized as angular, httpclient, typescript Tagged , ,

Answers

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq