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

推薦する

mysql 5.7.18 winx64 パスワード変更

MySQL 5.7.18 が正常にインストールされた後、バージョン 5.7 では空のパスワードでのロ...

Zabbixは複数のmysqlプロセスの監視を実装します

1 つのサーバー上で 3 つの MySQL インスタンス プロセスが開始され、それぞれ異なるポート ...

WeChat アプレット開発フォーム検証 WxValidate の使用

個人的には、WeChat アプレットの開発フレームワークは VUE と概ね似ていると感じていますが、...

最新のウェブフロントエンドフレームワーク10選を紹介(翻訳)

Web 開発の世界では、フレームワークは非常に一般的です。新しいフレームワークやテンプレートが毎日の...

Docker Consul の概要とクラスター環境構築手順(グラフィカルな説明)

目次1. Dockerコンサルの概要2. nginxとconsulをベースにした自動検出と高可用性の...

WebWorkerはJavaScriptサンドボックスの詳細をカプセル化します

目次1. シナリオ2. IJavaScriptShadowboxを実装する2.1 メインスレッドの実...

docker に基づいて nginxssl 設定を開始する

前提条件クラウドサーバー(Alibaba Cloud、Tencent CloudなどのcentOS)...

MySQL SQL ステートメント分析とクエリ最適化の詳細な説明

パフォーマンスの問題のあるSQL文を取得する方法1. ユーザーからのフィードバックを通じてパフォーマ...

HTML テーブル マークアップ チュートリアル (1): テーブルの作成

<br />これは 123WORDPRESS.COM が提供する一連のチュートリアルです...

ページデザインにおけるテーブルとdivの適切な適用についての簡単な説明

この記事の冒頭で、以前書いた入門記事の間違いを訂正したいと思います。初心者を再び誤解させないように、...

LinuxにDockerをインストールする(非常に簡単なインストール方法)

最近、かなり暇です。大学4年生として数か月間インターンをしていました。インターンとして、Docker...

MySQL で単一のフィールド内の複数の値を分割および結合する方法

複数の値を組み合わせて表示これで、図1から図2に示す要件が揃いました。 どうやってやるんですか?次の...

Linux/CentOS システムでネットワーク時間を同期する 2 つの方法の詳細な説明

ハードウェア上の理由により、機械は標準時間にある程度追いつけない場合があり、その誤差は 1 か月で数...

Kylin V10 への zabbix-agent のインストール手順

1. インストールパッケージをダウンロードするダウンロードアドレス: https://sourcef...

グリーンスタイルのウェブデザイン作品18点の最新コレクション

トイ・ストーリー3 オンラインマーケティングウェブサイトゼンモバイル鉄から鉄へスプラウトファンドバー...