return w Angular

Question

Witam. Mam takie coś w Angularze:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { NgForm } from '@angular/forms';

@Injectable()
export class AccountService {

  constructor(private http: HttpClient) { }

  logIn(form: NgForm): boolean {
    const credentials = form.value as JSON;
    let bool = false;

    console.log(credentials);
    this.http.post('https://localhost:44305/api/auth/login', credentials)
      .subscribe(data => {
        const token = (data as any).token;
        localStorage.setItem('jwt', token);
        bool = true;
      }, err => {
        bool = false;
      });
    return bool;
  }
}

Dlaczego to zawsze zwraca mi false, nawet jeśli ten bool ustawię na true? Dzięki za odpowiedzi.

Answer 1

Wartość true ustawiasz przy obsłudze promisa, a on wykona się później niż return false z metody logIn. Zwróć z tej metody całe zapytanie http.post (zapisz return w 5 linijce) - dodatkowo zmień typ zwracanej wartości z tej metody z boolean na Promise<boolean>. A jeśli logIn wołasz w templatce, to możesz się wspomóc async pipe. 

Comments

Dzięki, zrobiłem tak:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { NgForm } from '@angular/forms';
import { Observable } from 'rxjs';

@Injectable()
export class AccountService {

  constructor(private http: HttpClient) { }

  logIn(form: NgForm): Observable<object> {
    const credentials = form.value as JSON;
    return this.http.post('https://localhost:44305/api/auth/login', credentials);
  }
}

A potem tak:

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';
import { AccountService } from './services/account.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [AccountService]
})
export class AppComponent {
  title = 'JWT';

  constructor(private accService: AccountService) {

  }

  logIn(form: NgForm): void {
    const logged = this.accService.logIn(form);

    logged.subscribe(data => {
      const token = (data as any).token;
      localStorage.setItem('jwt', token);
      console.log('tak');
    }, err => {
      console.log('nie');
    });
  }
}

I wszystko działa. Wielkie dzięki :)

Answer 2

Najprościej rzecz ujmując, zanim otrzymasz rezultat tego POST-a zadziała Twój:

return bool;

M.