web-dev-qa-db-fra.com

Angular2 - Comment chaîner des appels de service asynchrones (requêtes http) dans un composant?

J'ai un composant qui doit d'abord appeler un service qui POST quelque chose. Puis, dans le même composant, je veux attendre que l'opération POST soit terminée, pour appeler un autre service contenant les données GET.

Comment faire en sorte que l'appel GET attende l'appel POST pour terminer?

Dans new-version.component.ts:

private createNewVersion(value) {
    ...

    // create new version, then call on all available versions

    // POST call
    this._newVersionService.createNewVersion(vnr);

    // GET call
    this._versionService.getAvailableVersions(); 

    ...
}

Dans new-version.service.ts:

export class NewVersionService {

response$: Subject<any>;

constructor(private _http: Http) {
    this.response$ = new BehaviorSubject<any>(null);
 }

public createNewVersion(versionNr) {    
    this._http.post('http://localhost:8080/services/' + versionNr, null, {
        method: 'POST',
    })
    .subscribe(response => {
        this.response$.next(response.status);
    },
    error => console.error(error));
}

Merci!

httpasynchronousangularchaining
10
Sojye

Lorsqu'un appel retourne une chaîne Promise, les appels avec 

someFunction() {
  return returnsPromise()
    .then(result => doSomethingNext())
    .then(result => doSomethingAfterThat());
}

Assurez-vous que vous avez une return qui retourne la Promise de cette chaîne afin que l'appelant de someFunc() ait également la possibilité d'exécuter du travail supplémentaire après l'exécution de doSomethingAfterThat().

Lorsqu'un appel retourne une Observable, utilisez le rappel complete.

someFunction() {
  return returnsObservable()
    .subscribe(
      event => doForEachEvent(),
      error => handleError(),
      () => doSomethingNext()
          .then(result => doSomethingAfterThat());
}

doSomethingNext() est exécuté après la dernière event et doSomethingAfterThat() est à nouveau chaîné à then() pour montrer comment mélanger observable et promesse. doSomething().

5
Günter Zöchbauer

Vous devriez pouvoir concat réaliser la séquence et reduce collecter les valeurs émises

var a = this._newVersionService.createNewVersion(vnr);
var b = this._versionService.getAvailableVersions(); 

Rx.Observable.concat(a, b).reduce((acc:Array<any>, x:any) => {
    acc.Push(x); return acc;
}, []).subscribe(t=> { 
      var firstEmitted = t[0];
      var secondEmitted = t[1];
});
1
pixelbits

Vous pouvez faire comme ceci: Changez createNewVersion en:

public createNewVersion(versionNr) {
 return this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
    method: 'POST',
 });
}

Puis dans votre appel:

this._newVersionService.createNewVersion(vnr).subscribe(response=> {
 this._versionService.getAvailableVersions(); 
}, error => console.error(error));
0
Vlado Tesanovic

Une autre façon de faire la même chose consiste à subscribe dans le new-version.component.ts et à vous appeler GET à partir de la demande POST, c'est-à-dire à vérifier si votre demande POST est effectuée correctement ou non Si oui POST est fait correctement, alors appelez-vous GET demande. Comme ci-dessous:

Dans new-version.component.ts:

 private createNewVersion(value) {
    ...
    // create new version, then call on all available versions

    // POST call
    this._newVersionService.createNewVersion(vnr)
        .subscribe((res) => {
            if(res){
                console.log(res);
                if (---Post request done properly check via status or something else here----{
                    CALL YOUR GET REQUEST HERE.....
                    // GET call 
                    this._versionService.getAvailableVersions(); 
                }
                else {
                    DO something else whatever you want....
                }
            }
        });
    ...
}

Dans new-version.service.ts:

export class NewVersionService {

response$: Subject<any>;

constructor(private _http: Http) {
    this.response$ = new BehaviorSubject<any>(null);
 }

public createNewVersion(versionNr) {    
    this._http.post('http://localhost:8080/nod_inspection_plugin/services/' + versionNr, null, {
        method: 'POST',
    })
    .map(response => {
        return [{status: response.status, json: response.json()}];
    },
    error => console.error(error));
}

pour plus d’informations sur http demander vous pouvez lire ici .

0
Pardeep Jain

Mieux utiliser switchMap() ici.

const versions$ = this._newVersionService.createNewVersion(vnr)
                 .switchMap(response => this._versionService.getAvailableVersions());

versions$.subscribe(response2 => this.versions = response2)

Mais le problème sera que si vous faites une autre demande POST avant la première résolution, la demande précédente sera annulée.

0
ritz078