nestjs からフロントエンドに返されるデータ形式のカプセル化実装

nestjs からフロントエンドに返されるデータ形式のカプセル化実装

通常、開発プロセスでは、インターフェイス要求の成功または失敗は httpcode に基づいて決定されるのではなく、要求によって返されるデータに基づいてコード フィールドが追加されます。

1. 返されるデータ形式の比較

1. 直接返されるデータ形式

{
  "id": 1,
  "UUID": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "名前": "ハスキー1",
  「年齢」: 12,
  "色": null、
  "作成日時": "2019-07-25T09:13:30.000Z",
  「更新日時」: 「2019-07-25T09:13:30.000Z」
}

2. データを弊社でパッケージ化して返却

{
 コード: 0,
 メッセージ: 「リクエストは成功しました」、
 データ: {
  "id": 1,
  "UUID": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "名前": "ハスキー1",
  「年齢」: 12,
  "色": null、
  "作成日時": "2019-07-25T09:13:30.000Z",
  「更新日時」: 「2019-07-25T09:13:30.000Z」
 }
}

2. すべてのエラー要求をインターセプトし、戻り形式を統一する

1. コマンドを使用してフィルターを作成する

ネストされたGFフィルター/httpException

2. フィルターコード

輸入 {
 引数ホスト、
 キャッチ、
 例外フィルター、
 HttpException、
 Httpステータス、
 ロガー、
} '@nestjs/common' から;

@Catch(HttpException)
エクスポートクラス HttpExceptionFilter は ExceptionFilter を実装します {
 catch(例外: HttpException、ホスト: ArgumentsHost) {
  定数ctx = ホスト.switchToHttp();
  定数レスポンス = ctx.getResponse();
  定数リクエスト = ctx.getRequest();

  定数メッセージ = exception.message.message;
  Logger.log('エラープロンプト', メッセージ);
  定数エラーレスポンス = {
   データ: {
    エラー: メッセージ、
   }, // すべてのエラーメッセージを取得します。メッセージ: 'リクエストが失敗しました',
   code: 1, // カスタムコード
   url: request.originalUrl, // 間違った URL アドレス};
  定数ステータス =
   例外インスタンス HttpException
    ? 例外.getStatus()
    : HttpStatus.INTERNAL_SERVER_ERROR;
  // 返されたステータスコード、リクエストヘッダーを設定し、エラー情報を送信します。response.status(status);
  レスポンスヘッダー('Content-Type', 'application/json; charset=utf-8');
  レスポンスを送信します(エラーレスポンス);
 }
}

3. main.tsでのグローバル登録

...
'./filters/http-exception.filter' から { HttpExceptionFilter } をインポートします。

非同期関数bootstrap() {
 ...
 // エラー フィルターをグローバルに登録します。app.useGlobalFilters(new HttpExceptionFilter());
}
ブートストラップ();

4. テスト、返されたエラー情報

{
 「ステータスコード」: 400,
 "エラー": "不正なリクエスト",
 "データ": {
  "メッセージ": [
   {
    "age": "必須の整数"
   }
  ]
 },
 "メッセージ": 'リクエストが失敗しました',
 "コード": 1,
 "url": "/api/v1/cat"
}

3. 成功したリクエストの戻りデータを統合する

1. インターセプターを作成する src/interceptor/transform.interceptor.ts

2. インターセプターコード

輸入 {
 注射剤、
 ネストインターセプター、
 コールハンドラ、
 実行コンテキスト、
} '@nestjs/common' から;
'rxjs/operators' から { map } をインポートします。
'rxjs' から {Observable} をインポートします。
インターフェースResponse<T> {
 データ: T;
}
@インジェクタブル()
TransformInterceptor<T> クラスをエクスポートする
 NestInterceptor<T, Response<T>> を実装します {
 インターセプト(
  コンテキスト: 実行コンテキスト、
  次: CallHandler<T>、
 ): Observable<Response<T>> {
  next.handle().pipe() を返す
   マップ(データ => {
    戻る {
     データ、
     コード: 0,
     メッセージ: 'リクエストが成功しました'、
    };
   })、
  );
 }
}

3. グローバル登録

...
'./interceptor/transform.interceptor' から TransformInterceptor をインポートします。

非同期関数bootstrap() {
 ...
 // グローバルに登録されたインターセプター app.useGlobalInterceptors(new TransformInterceptor());
 ...
}
ブートストラップ();

4. テストリターンデータ

{
 "データ": {
  "id": 1,
  "UUID": "cbbe7abc-b95e-48a0-8d24-b1ac93c45328",
  "名前": "ハスキー1",
  「年齢」: 12,
  "色": null、
  "作成日時": "2019-07-25T09:13:30.000Z",
  「更新日時」: 「2019-07-25T09:13:30.000Z」
 },
 「コード」: 0,
 "メッセージ": "リクエストが成功しました"
}

これで、nestjs がフロントエンドに返すデータ形式のカプセル化実装に関するこの記事は終了です。nestjs がフロントエンドに返すデータ形式に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Nest.js 認証検証方法の例
  • Nest.js 環境変数の設定とシリアル化の詳細な説明
  • expressを使用して複数の静的ディレクトリを提供するためにnest.jsを使用する方法

<<:  Dockerコンテナ相互接続の予備的な実践についての簡単な説明

>>:  Nginx ロケーション設定のチュートリアル (ゼロから)

推薦する

DockerとVMwareの競合を解決する

1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...

史上最も便利な Zookeeper サーバーの構築方法 (推奨)

ZooKeeperとはZooKeeper は、分散アプリケーションに効率的で可用性の高い分散調整サ...

JavaScript で配列の最大値と最小値を実装する 6 つの方法

配列[1,8,5,4,3,9,2]が与えられた場合、配列の最大値9と最小値1を取得するアルゴリズムを...

MySQL テーブルとデータベース シャーディングのアプリケーション シナリオと設計方法

多くの友人がフォーラムやメッセージエリアで、どのような状況で MySQL をシャーディングする必要が...

CSS3で実装されたサムネイルホバー効果

成果を達成する実装コードhtml <ヘッダー> <h1><em>...

ソースコードから、Vue2がデータとメソッドを直接取得できる理由がわかる

目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...

MySQL のソート関数 field() の詳細な例

序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...

axios を使用してプロジェクト内の複数の繰り返しリクエストをフィルタリングする方法

目次1. はじめに:この場合、通常は 2 つのアプローチがあります。 2. CancelToken ...

Dockerは複数のポートマッピングコマンドを有効にします

次のように: docker run -d -p 5000:23 -p 5001:22 --name ...

jsはショッピングカートの加算と減算、価格計算機能を実現します

この記事では、ショッピングカートの増減と価格計算を実現するためのjsの具体的なコードを紹介します。具...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

HTML ページ内の js および css ファイルのキャッシュを自動的にクリーンアップします (バージョン番号を自動的に追加します)

Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...

MySQL における exists、in、any の基本的な使い方

【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...

Vuex全体のケースの詳細な説明

目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...

優れたHTML印刷コードがページめくりをサポート

ylbtech_html_print HTML 印刷コード、ページめくりをサポートコードをコピーコー...