web-dev-qa-db-ja.com

Angular map HttpClient.Post

だから私は最終的に時代に追いつき、いくつかの古いangular HttpのものをHttpClientに移行することにしました。

このアプリは、多くのPromiseベースのコードで実行されていましたが、その後（ほとんど）削除されました。
私の古いPromise関数は次のようになりました：

public getUser(profileId: number): Promise<User> {
    return this.http.post("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
    .map(u => new User(u))
    .catch(this.handleError)
    .toPromise();
}

私の新しいHttpClient関数ははるかに優れています：

public getUser(profileId: number): Observable<any> {
    return this.http.post("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
}

しかし、現在私が気に入らないのは、これに対するeachサブスクリプションで、データをUserのインスタンスにマップする必要があるということです...

service.getUser(1).subscribe(data => {
    data = new User(data);
});

これが最も簡単な.map私が持っている、いくつかのpostメソッドは、実際には多くの新しいオブジェクトインスタンスにマップするかなり複雑なオブジェクトを返します。

HttpClient.get Typeで応答をアサートできます。.post各サブスクリプションでデータを新しいユーザーにマップする必要がないようにするには？

注：最終的には、これを実際にユーザー変数にサブスクライブするより良いアーキテクチャに再び移行しますが、ここではHttpClientを実装したいと思います。

angulartypescriptangular-httpclient
5
Zze

can I do something like this with .post so that I don't have to map the data to a new User in each of the subscriptions <=はい、戻り値の型を指定するためのまったく同じジェネリックがpostおよびputでも使用できます。自動的にはオブジェクトに変換されませんが、返されたデータのインターフェースを指定できます。あるいは、以前と同じようにサービスでmapをチェーンすることもできますが、 パイプ可能な演算子 を使用することをお勧めします。

パイプ可能演算子 を使用して、前のコードの内容を模倣する例。

import { map } from 'rxjs/operators/map';

public getUser(profileId: number): Observable<User> {
    return this.http.post("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions())
        .pipe(map(data => new User(data)));
}

Userがプロパティを持つインターフェースにすぎない例。

データ自体が、プロパティを持つインターフェースを表すJSONである場合は、直接変換できます。

export interface User {
  userId: number;
  name: string;
}


public getUser(profileId: number): Observable<User> {
    return this.http.post<User>("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
}
7
Igor

サービスにユーザークラスをインポートする場合は、Userの後で<User>の前に()を追加することで、postオブジェクトにマップし直すことができます。

public getUser(profileId: number): Observable<any> {
    return this.http.post<User>("/api/url", postObject, HttpSettings.GetDefaultHttpRequestOptions());
}
2
Wesley Coetzee