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 ロケーション設定のチュートリアル (ゼロから)

推薦する

int(3)とint(10)の値の範囲はmysqlで同じですか?

目次質問:答え:現実:知識ポイント結論は:要約する質問: MySQLフィールド、unsigned i...

Dockerコンテナのデータボリュームの詳細な説明

何ですかまず、Docker の概念を見てみましょう。アプリケーションと実行環境をコンテナにパッケージ...

node.js チュートリアルの Util モジュールの例の詳細な説明

目次タイプ判定から始める厳格な平等エラーファーストと約束デバッグと出力タイプ判定から始めるJavaS...

MySQL innodb B+ツリーの高さを取得する方法

序文MySQL の InnoDB エンジンがインデックスの保存に B+tree を使用する理由は、デ...

Momentsで写真を整理するためのCSSコード

まず、Moments を開いて、写真の数が異なるいくつかのレイアウトを確認するか、以下の例を参照して...

SQL ストアド プロシージャの取得、データ取得、プロセス分析

この記事は主に、SQL のストアド プロシージャから返されたデータを取得するプロセスの分析を紹介しま...

nginxコンテナ設定ファイルの独立した実装

コンテナを作成する [root@server1 ~]# docker run -it --name ...

MySQL の完全バックアップとクイックリカバリ方法

過去 15 日間のデータをバックアップするシンプルな MySQL 完全バックアップ スクリプト。バッ...

Vue で axios を使用して画像をアップロードするときに発生する問題

目次FormDataとは何ですか? vueとaxiosの協力による実践的な体験追加()セット()消去...

Nginxリバースプロキシ設定でプレフィックスが削除される

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

HTMLプログラミングタグとドキュメント構造の詳細な説明

HTML を使用してコンテンツをマークアップする目的は、Web ページにセマンティクスを与えることで...

iframe でページを開く方法

解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

Vueコンポーネントのカスタムイベントの詳細な説明

目次要約する <テンプレート> <div> 要素 <h2>{{メ...

Vue.js パフォーマンス最適化 N 個のヒント (収集する価値あり)

目次機能コンポーネント子コンポーネントの分割ローカル変数v-show によるDOMの再利用キープアラ...