web-dev-qa-db-de.com

Wie kann man Angular2 http synchronisieren?

Ich verstehe das Verwenden von Observable. Ich kann eine Methode ausführen, wenn die Anforderung abgeschlossen ist. Wie kann ich jedoch warten, bis ein http-Befehl abgeschlossen ist und die Antwort in ng2 http zurückgibt?

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;
} 

der Wert von "value" ist null, wenn es zurückgegeben wird, weil get async ist. 

20
Hulk

ihre Serviceklasse: /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();
            });
      }

    }

ihre Komponente: /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 Durch Betrachtung der Winkelquelle ( https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46 ) wird deutlich, dass das Async Attribut des XMLHttpRequest wird nicht verwendet. Der dritte Parameter von XMLHttpRequest muss für synchrone Anforderungen auf "false" gesetzt werden.

2
Suresh

Eine andere Lösung wäre die Implementierung einer Prioritätswarteschlange.

Von dem, was ich verstehe, werden http-Anforderungen nicht ausgeführt, bis Sie Abonnenten hinzufügen. Daher können Sie so etwas tun:

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

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

Dies setzt voraus, dass requestPriorityQueue ein Dienst ist, der in Ihre Komponente eingefügt wird. Die Prioritätswarteschlange würde Einträge in einem Array im folgenden Format speichern:

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

Sie müssen entscheiden, wie die Elemente zu Ihrem Array hinzugefügt werden. Schließlich wird folgendes im Hintergrund passieren:

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

Die processQueue-Methode würde so etwas tun:

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);
        });
}

Wenn Sie neue Abhängigkeiten hinzufügen können, versuchen Sie es mit dem folgenden NPM-Paket: async-priority-queue

0
Je Suis Alrick

Ich habe nachgesehen und konnte keine Möglichkeit finden, eine HTTP-Anrufsynchronisierung anstelle von asynchron durchzuführen.

Der einzige Weg, um dies zu umgehen: Wickeln Sie Ihren Anruf in eine while-Schleife mit einer Flagge ein. Lassen Sie den Code nicht fortfahren, bis das Flag den Wert "fortsetzen" hat.

Pseudocode wie folgt:

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

Finden Sie den Code für Ihr Problem Nachfolgend finden Sie die Komponenten- und Servicedatei. Und Code funktioniert einwandfrei für Synchornize

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!")
  );
 }

}

Unten ist die Servicedatei ..

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