web-dev-qa-db-fra.com

Comment faire un appel synchrone en angular 5?

Donc, j'essayais de trouver la solution de ce problème. Mais, d'une manière ou d'une autre, je ne suis pas en mesure de le faire, peut-être en raison du manque de connaissances dans angular 5. C'est mon service:

GetCurrentUserData(): Observable<ResponseData> {
    return this.http.get<ResponseData>(ApplicationURLS.GetCurrentUserInformation)
        .map(response => {
            return response;
        });
    //.catch(error => this.handleError(error));
}

Voici ma composante:

public GetCurrentUserInformation(): any {

        return this.loginService.GetCurrentUserData().subscribe(data => { return data; });
    }

Ici, j'essaie d'accéder aux données:

ngAfterViewInit() {
        debugger;                
        this.responseData = this.GetCurrentUserInformation();
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }

    }

Lorsque je vérifie le this.responseData, il renvoie toujours cela à la place, je veux des données: enter image description here

Je souhaite simplement effectuer un appel de synchronisation afin de pouvoir obtenir les données immédiatement.

J'ai également essayé d'utiliser le do () en service mais son retour do () n'est pas une fonction.

angularserviceangular-servicesangular-componentsangular5
6
Just code

cela peut être simplifié en utilisant async/await ????????

public GetCurrentUserInformation(): Promise<any>{
    return this.loginService.GetCurrentUserData().toPromise()
}

ngAfterViewInit

async ngAfterViewInit() {    
        this.responseData = await this.GetCurrentUserInformation(); // ????‍♂️ 
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
    }
6
malbarmavi

Abonnez-vous à GetCurrentUserData() l'appel http est asynchrone (chaque appel d'api du navigateur est asynchrone, car le moteur javascript s'exécute dans un seul thread (google pour la boucle d'événements du navigateur pour plus, ce n'est pas un angular problème))

this.GetCurrentUserInformation().subscribe((data: ResponseData) => {
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
});
7
G.Vitelli

Les fonctions asynchrones ne peuvent pas être appelées de manière synchrone, car elles sont asynchrones.

subscribe ne devrait généralement pas être exécuté dans des méthodes censées être chaînées. Même si c'est le cas, un abonnement observable et non un abonnement doit être retourné à partir d'une méthode (un abonnement peut en outre être enregistré pour être désabonné lors de la destruction).

La méthode GetCurrentUserInformation est redondante car il s'agit simplement d'un wrapper pour l'appel de service. Le code peut être refactorisé en:

ngAfterViewInit() {
    this.loginService.GetCurrentUserData().subscribe(data => {
        this.responseData = data;
        if (this.responseData.code != responseCodes.success) {
            this.googleInit();
        }
    });
}
3
Estus Flask

Pour vous assurer que vos appels asynchrones sont exécutés avant de traiter la réponse, vous pouvez utiliser Observable.forkJoin () de ReactiveX.

Observable.forkJoin(
    this.http.get('/links.json').map((response:Response) => response.json()),
    this.http.get('/bookmarks.json').map((response:Response) => response.json())
).subscribe(
    data => {
      this.links = data[0]
      this.bookmarks = data[1]
    },
    error => console.error(error)
);

le gestionnaire onNext de la fonction subscribe () s'exécutera lorsque toutes les requêtes HTTP se termineront avec succès.

Importations requises:

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';

Vous pouvez en trouver plus dans cet article .

2
vic-nik

il n'y a pas de moyen direct pour effectuer un appel synchrone, mais vous pouvez effectuer la procédure suivante (ce code est écrit en angular 7).

import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';

export class SampleComponent implements OnInit {
  Request1result:Object;
  Request2result:Object;

  constructor(private http:HttpClient) { }

   ngOnInit() 
   {
    this.http.get("URL1").subscribe((res)=>{
      this.Request1result=res;
      this.after1(); // execution will move to next request only when first is done.
    });
   }
  after1()
  {
    this.http.get("URL2").subscribe((res)=>{
      this.Request2result=res;
      this.after2(); // execution will move to the rest of the code only when both the requests are done.
    });
  }
  after2()
    {
    // rest of the code.
    console.log(this.Request1result);
    console.log(this.Request2result);

    }

}
0
Faizan Yaseen