web-dev-qa-db-fra.com

Comment synchroniser Angular2 http get?

Je comprends qu’en utilisant observable, je peux exécuter une méthode lorsque la demande est complétée, mais comment puis-je attendre qu’un http se termine et renvoyer la réponse en utilisant ng2 http?

getAllUser(): Array<UserDTO> {
    this.value = new Array<UserDTO>();
    this.http.get("MY_URL")
                    .map(res => res.json())
                    .subscribe(
                        data => this.value = data,
                        err => console.log(err),
                        () => console.log("Completed")
    );

    return this.value;
}

la "valeur" sera null quand elle sera retournée car get est asynchrone. 

javascriptangulartypescriptangular2-http
20
Hulk

votre classe de service: /project/app/services/sampleservice.ts

    @Injectable()
    export class SampleService {

      constructor(private http: Http) {
      }

      private createAuthorizationHeader() {
         return new Headers({'Authorization': 'Basic ZXBossffDFC++=='});
      }


      getAll(): Observable<any[]> {
        const url='';
        const active = 'status/active';
        const header = { headers: this.createAuthorizationHeader() };
        return this.http.get(url + active, header)
          .map(
            res => {
              return res.json();
            });
      }

    }

votre composant: /project/app/components/samplecomponent.ts

export class SampleComponent implements OnInit  {


  constructor(private sampleservice: SampleService) {
  }

  ngOnInit() {
   this.dataset();
  }

  dataset(){
    this.sampleservice.getAll().subscribe(
      (res) => {
        // map Your response with model class
        // do Stuff Here or create method 
        this.create(res);
      },
      (err) => { }
    );
  }
  create(data){
   // do Your Stuff Here
  }

}
3
Dharan G

 enter image description here En examinant la source angulaire ( https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46 ), il est évident que la L'attribut XMLHttpRequest n'est pas utilisé. Le troisième paramètre de XMLHttpRequest doit être défini sur "false" pour les demandes synchrones.

2
Suresh

Une autre solution consisterait à implémenter une file d'attente prioritaire de tri.

D'après ce que je comprends, les demandes http ne sont pas exécutées tant que vous n'avez pas ajouté d'abonnés. Par conséquent, vous pouvez faire quelque chose comme ceci:

Observable<Response> observable = http.get("/api/path", new RequestOptions({}));

requestPriorityQueue.add(HttpPriorityQueue.PRIORITY_HIGHEST, observable,
                 successResponse => { /* Handle code */ }, 
                 errorResponse => { /* Handle error */ });

Cela suppose que requestPriorityQueue est un service injecté dans votre composant. La file d'attente prioritaire stockerait les entrées dans un tableau au format suivant:

Array<{
    observable: Observable<Response>, 
    successCallback: Function, 
    errorCallback: Function
}>

Vous devrez décider comment les éléments sont ajoutés à votre tableau. Enfin, ce qui suit se passera en arrière-plan:

// HttpPriorityQueue#processQueue() called at a set interval to automatically process queue entries

La méthode processQueue ferait quelque chose comme ceci:

protected processQueue() {
    if (this.queueIsBusy()) {
        return;
    }

    let entry: {} = getNextEntry();
    let observable: Observable<Response> = entry.observable;

    this.setQueueToBusy(); // Sets queue to busy and triggers an internal request timeout counter.
    observable.subscribe()
        .map(response => {
            this.setQueueToReady();
            entry.successCallback(response);
        })
        .catch(error => {
            this.setQueueToReady();
            entry.errorCallback(error);
        });
}

Si vous pouvez ajouter de nouvelles dépendances, vous pouvez essayer d'utiliser le package NPM suivant: async-priority-queue

0
Je Suis Alrick

J'ai regardé et je n'ai trouvé aucun moyen de faire une synchronisation d'appels HTTP au lieu d'un processus async.

Donc, le seul moyen de contourner cela: enroulez votre appel dans une boucle while avec un drapeau. Ne laissez pas le code continuer jusqu'à ce que l'indicateur ait la valeur "continuer".

Pseudo-code comme suit:

let letsContinue = false;

//Call your Async Function
this.myAsyncFunc().subscribe(data => {
   letsContinue = true;
}; 

while (!letsContinue) {
   console.log('... log flooding.. while we wait..a setimeout might be better');
}
0
eDriven_Levar

Veuillez trouver le code correspondant à votre problème Ci-dessous se trouve le fichier de composant et de service.

import { Component, OnInit } from '@angular/core';
import { LoginserviceService } from '../loginservice.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  model:any={};
  constructor(private service : LoginserviceService) { 
}

ngOnInit() {

}
save() {
   this.service.callService(this.model.userName,this.model.passWord).
   subscribe(
      success => {
        if(success) {
            console.log("login Successfully done----------------------------    -");
            this.model.success = "Login Successfully done";
     }},
    error => console.log("login did not work!")
  );
 }

}

Ci-dessous, le fichier de service.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { UserData } from './UserData';
import 'rxjs/add/operator/map'
import 'rxjs/add/operator/toPromise'
import {Observable} from 'rxjs/Rx'

@Injectable()
   export class LoginserviceService {
   userData = new UserData('','');   
   constructor(private http:Http) { }

    callService(username:string,passwrod:string):Observable<boolean> {
     var flag : boolean;      
     return (this.http.get('http://localhost:4200/data.json').
       map(response => response.json())).
        map(data => {
          this.userData = data;
          return this.loginAuthentication(username,passwrod);
        });
      }

  loginAuthentication(username:string,passwrod:string):boolean{
     if(username==this.userData.username && passwrod==this.userData.password){
        console.log("Authentication successfully")
        return true;
   }else{
     return false;
   }


  }
}
0
stackinfostack