Angular - получить данные в формате JSON от сервера для использования в том же компоненте

Question

Пытаюсь добиться такого поведения:

getAuth() {return false;}
currentAuth: Auth = {
    "auth": this.getAuth()
};

Но функция getAuth() должна вернуть результат обращения к простому АПИ:

{"auth":false}

Пытаюсь как то так:

getAuth() {   
  this.http.get('/server/api/userService').subscribe(data => {
   this.user = data;
   console.log(this.user.auth); // тут вижу нормальное значение, но на этом мои знания заканчиваются и не могу вернуть это значение из функции для использования ниже, в том же компоненте
  });
}



currentAuth: Auth = {
    "auth": this.getAuth()
};

Answer 1

HttpClient

• http.get - https://angular.io/api/common/http/HttpClient#get
  там дока
• пример - https://angular.io/guide/http
  там куча куча ... кода с вынесением в сервисы и ничего не понятно по делу.
• Observable<T> - https://angular.io/guide/observables
  там тоже дока

Будь внимателен, приведённый код писался в блокнотике на коленке - работоспособность не гарантирую. Но идею донести должен.

зачем нужен http.get

http.get нужен для того, чтобы ваш код работал и в вебе и "на мобилке" (native)
инфа без пруфа, как я её понимаю

http.get как и fetch асинхронен

поэтому давайте для понимания как он работает заменим его на fetch.
мы ведь все знаем как работает fetch

interface $auth {
    auth: any;
}
interface $user extends $auth {
    name: any;
}
class Q {
    user: $user;
    ngOnInit() {
        this.reqUserAuth()
    }
    async reqUserAuth() {
        const r = await fetch('/server/api/userAuth')
        if (!r.ok) {
            const e = new Error('!r.ok')
            console.error(e)
            return;
        }
        const data: $auth = await (r.json() as Promise<$auth>)

        if(!this.user)this.user = {} as any;
        Object.assign(this.user, data)
    }
}

<div>
{{user?.auth}}
<div>

0

Этот пример имеет смысл вынести в сервисы, но как и в предыдущем - не обязательно.

interface $user {
    auth: any;
}
class Q {
    user: $user;
    _user: Observable<$user> = this.http.get<$user>('/server/api/userService')
    ngOnInit() {
        this._user.subscribe((data: $user) => {
            this.user = data;
        });
    } 
}