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

推薦する

Ubuntu 16.04 mysql5.7.17 リモートポート 3306 を開く

MySQLへのリモートアクセスを有効にするデフォルトでは、MySQL ユーザーにはリモート アクセス...

JavaScript ドラッグタイム ドラッグケースの詳細な説明

目次DragEvent インターフェースデータ転送インターフェースの概要DataTransfer の...

AWSサーバーリソースを無料で使用する方法を教えます

AWS - Amazon のクラウド コンピューティング サービス プラットフォーム以前、AWS の...

Chrome、Firefox、IEで入力カーソルの位置がずれる問題の解決方法

ブラウザで入力カーソルがずれる問題の詳しい説明<br />仕事で問題に遭遇し、解決策を探...

Js クラスの構築と継承のケースの詳細な説明

JS のクラスの定義や継承は本当に多様なので、別のノートブックを開いて記録しておきます。意味オブジェ...

MySQL データベースのパフォーマンス最適化の概要

目次なぜ最適化するのですか? ?どこから始めますか? ?解決策は何ですか? ? ?どうやって選ぶ? ...

Linuxで静的ネットワーク接続を構成する方法

Linux システムのネットワーク接続を構成するのは難しい場合があります。幸いなことに、多くの新しい...

Win10 の Linux サブシステムを有効にする方法を説明します (詳細な画像とテキスト付き)

今日は、Windows 10 で Linux サブシステムを有効にする方法を紹介します。早速、手順を...

ウェブフロントエンド開発の細部

1 選択タグは閉じられている必要があります <select></select>...

MySQL Server 8.0.13.0 インストールチュートリアル(画像とテキスト付き)

MySQL 6.1.3 をベースにした 8.0.13 をインストールします。 MySQL 8.0....

システムエラー 1067 を解決するための MySQL データベース グリーン バージョンのインストール チュートリアル

ソフトウェアのグリーンバージョンとインストールバージョンの違いは何ですか?通常、ファイルのインストー...

CSS3 で虫眼鏡効果を模倣するいくつかの方法の原理の分析

記事のタイトルが「模造虫眼鏡」なのはなぜですか?今日お話ししたいのは、一般的に言われているような、マ...

MySQL 文字セットの概要

目次文字セット比較ルール4つのレベルの文字セットと比較規則3つのシステム変数このノートは主にMySQ...

MySqlを最適化するためにnot inを使用する方法

最近、プロジェクトで選択クエリを使用する際に、未使用の主キー ID を除外するために not in ...