3
votes

Angular - recevoir et renvoyer la réponse Observable dans Http.post

J'ai implémenté une méthode qui retourne un Observable. Dans cette méthode, j'utilise http.post pour envoyer une requête au backend. Après avoir reçu la réponse, qui est un objet JSON, je souhaite la stocker dans une variable observable et renvoyer cette variable. Mais d'une manière ou d'une autre, je n'ai pas réussi à résoudre ce problème. Dans .subscribe la variable res n'est pas stockée dans la variable postResponse, mais je peux voir dans le "local" console.log que la variable res a la valeur correcte. Le fichier global console.log est vide. De plus, j'obtiens l'erreur:

"TS2322: Le type "ArqResponse" n'est pas attribuable au type "Observable" " erreur pour le retour.

Mon code ressemble à ceci:

postARQRequest(request): Observable<ArqResponse>{
    let postResponse = new ArqResponse;
    const result = this.http.post<ArqResponse>(this.arqUrl, request)
                       .subscribe((res: ArqResponse) => { postResponse = res; console.log('shadow: ' + res)});
    console.log('global: ' + JSON.stringify(postResponse));
    return postResponse;
}

Mes questions sont:

Comment puis-je stocker le corps de la réponse dans une variable, qui peut alors être retourné?
Comment puis-je "convertir" une variable ArqResponse en un Variable observable?
.subscribe semble être faux puisque j'obtiens:

this.arqService.postARQRequest (...). subscribe n'est pas une fonction erreur

typescript angular rxjs rxjs6 observable

0 commentaires

3 Réponses :

0
votes

YLa méthode http.post renvoie déjà un Observable , donc vous pouvez directement faire comme ça:

import { of } from 'rxjs';

// ...

// create an Observable from a value:
of(someObject);

puis vous abonner à it: this.arqService.postARQRequest(...).subscribe()

Si vous voulez transformer un objet en observable, vous pouvez utiliser de code> de Rxjs6

postARQRequest(request): Observable<ArqResponse>{
    return this.http.post<ArqResponse>(this.arqUrl, request);
}

2 commentaires

Mais je ne pourrais toujours pas stocker la valeur de res dans postResponse.

Dans quoi souhaitez-vous stocker la valeur et pourquoi? affichez-vous simplement la valeur dans un modèle? ou faire plus?

5
votes

Je suppose que c'est ce que vous voulez:

postARQRequest(request): Observable<ArqResponse>{
    return this.http.post<ArqResponse>(this.arqUrl, request).pipe(
        map((res) => ...) // do stuff with res here, but it *will map to whatever you return from this handler*
   );
}

Il n'est pas nécessaire de s'abonner à quoi que ce soit ici. Étant donné que this.http.post renvoie le type que vous voulez, renvoyez-le simplement.

Si vous voulez vraiment stocker la réponse dans une variable locale, il y a quelques façons de faire cela:

Utilisez plutôt une promesse pour obtenir le résultat. Rendez-le observable en utilisant de plus tard:

postARQRequest(request): Observable<ArqResponse>{
    return this.http.post<ArqResponse>(this.arqUrl, request).pipe(
        tap((res) => ...) // do stuff with res here, but it won't be mutated
    );
}

Utilisez l'opérateur tap pour réagir à la réponse, mais ne pas muter it

async postARQRequest(request): Observable<ArqResponse>{
    let postResponse = new ArqResponse;
    postResponse = await this.http.post<ArqResponse>(this.arqUrl, request).toPromise();

    return of(postResponse);
}

Utilisez l'opérateur map pour mapper la réponse à autre chose

postARQRequest(request): Observable<ArqResponse>{
    return this.http.post<ArqResponse>(this.arqUrl, request);
}

0 commentaires

0
votes

Je pense que cela peut vous aider

private extractData(res: Response) {
   let body = res.json(); 
   return body.data || { }; 
}

private handleError (error: any) {
    let errMsg = error.message || 'Server error';
    console.error(errMsg); 
    return Observable.throw(errMsg);
}

à gérer la réponse et l'erreur ici

postARQRequest(): Observable<ArqResponse[]> {
 return this.http.post(this.arqUrl, request)
 .map(this.extractData()) <== passing result of function
 .catch(this.handleError()); <== passing result of function
}

0 commentaires