リクエストを、さまざまな方法で行うことができます。使ったリクエストのテスト作成方法について説明します。前提条件このチュートリアルを進めるには、以下の準備が必要です。リクエストを実行します。リクエストが成功すると、リクエストしたデータを含む応答が返されます。リクエストが失敗すると、エラーが返されます。リクエストと応答をインターセプトし、変換や編集することもできます。詳しくは、このチュートリアルの後半で説明します。アプリケーションのやり取りのしくみを示します。どちら宛てかを判断します。リクエストの方法を決定し、応答を変換して、サーバーリクエストの送信元のクライアントに返します。送信するリクエストの種類に応じて、他のオプションも設定します。以下にリクエストの例を示します。メリットは、リクエストを非常に柔軟に構成できることです。ドット区切り表記での呼び出しに対応しています。リクエストの構成プロパティとして使用することもできます。リクエストの送信メソッドが、以下のように複数サポートされています。使ってリクエストを送信したら、当然のことながら応答が返ってきます。応答のデータ構造を示します。{}}この応答には、以下の情報が含まれています。オブジェクト必要なデータに応じて、クライアント側アプリケーションでこの応答を処理します。理論の説明ばかりで退屈でしょうか?それでは、次のセクションに進みましょう。リクエストを行う方法を具体的にご説明します。リクエストを実行し、同時リクエストを観察します。内部での処理を把握するのに役立つアプリケーションも利用します。リポジトリをクローンしてください。以下のコマンドを実行します。making-http-requests-axiosこれで、このチュートリアルに必要なファイルが手に入りました。つをインストールします。以下のコマンドを実行します。現時点では、ボタンには何の機能もありません。チュートリアルの後半で、それぞれの機能を作成します。つのボタンがあります。リクエストが実行され、ブラウザーにデータが返されて、応答が表示されるようにします。返されたデータを表示するためのイベントリスナーがあります。このファイルには、リクエストを行うための関数も含まれています。リクエストから始めましょう。リクエストを実行する今回は、以下のスニペットに示すリクエストを使用します。ブロックを使用しています。関数に追加して保存します。ボタンをクリックしてみましょう。ボタンの下に、応答の詳細を示すコンテンツが表示されれば成功です。スタイルや表示形式はあらかじめこちらで用意したものです。応答のセクションには、以下のものがあります。応答のステータスコードを表示します。あり、リクエストが成功したことを意味しています。ヘッダーが示されます。関するすべての情報です。渡されたすべての設定が示されます。ライブラリと同様です。リクエストだったので、リクエストと一緒に本文を渡す必要はありませんでした。リクエストを実行する方法について説明します。リクエストとは少し異なります。リクエストを使ってユーザーを作成し、そのユーザーに関する詳細情報を渡します。このリクエストのコードスニペットは、以下のとおりです。後でオブジェクトを使用して、ユーザーの作成に必要なプロパティを定義します。処理が完了すると、サーバーから応答が返ります。ボタンをクリックします。リクエストとは異なる以下のような応答が返されます。この例では、新しいユーザーが作成されました。プロパティに示されます。データの保存先が示されます。サーバーに送信した情報が示されます。リクエストと一緒に送信した設定が含まれます。具体的には、メソッド、URL、送信したデータなどです。同じであることを確認してください。リクエストの基本構造、想定される応答について説明しました。送信される前に検証する方法について説明します。コードブロックの処理の前です。トークンが含まれるかどうかを調べるとしましょう。このためには、リクエストインターセプターを設定して、サーバーに対して行われるすべての呼び出しに有効なトークンが含まれることを確認します。有効なトークンが呼び出しに含まれていない場合は、システムのユーザーをログインページに戻し、再び認証を受けさせます。簡潔に説明するため、現在のアプリケーション用のロガーを作成するという、やや単純なユースケースを使います。トリガーされた時間を記録します。以下のコードスニペットを使用します。セクションにアクセスして、リクエストのメソッド、URL、時間を表示します。ブラウザーコンソールを開いてください。最初のユーザーをフェッチするメソッドを実行しましょう。対する同時リクエストとして呼び出す必要があります。メソッドを、以下のコードスニペットに示します。サーバーに送信する前に変更したり、検査したりできることがわかります。インターセプターは、強力なだけではありません。リクエストや応答の動作の制御もできるのです。リクエストと応答を変更、検査する方法については以上です。実装に関するテストを作成しましょう。実装をテストするテストはアプリケーション開発に不可欠なプロセスです。テストを行うことにより、アプリケーションの動作が意図どおりであるかを確認し、常に高い品質を確保できます。バージョンを使用します。インストールしたので、すぐにテストの作成を始められます。つのファイルを作成します。ファイルを作り直す必要があります。このメソッドのリクエストの構造は、ブラウザー版のメソッドと同じです。アクセスできるように、応答を返します。ファイル外部でも使用できるようにエクスポートします。テストファイルにインポートします。その後、以下に示すとおりにテストを記述します。呼び出しに成功したことを検証できます。入力し、このテストを実行しましょう。リクエストと同時リクエストを検証するためのテストも作成します。テストファイルに以下のテストを追加します。expect(response.status).toBe(200);});完成したら、テストを再実行します。パイプラインを作成しましょう。ツールでは、変更によってパイプラインに問題が発生し、テストが失敗したときに、関係者に通知することができます。このようなフィードバックループを構築すると、ソフトウェア開発プロセスを順調に進めるうえで欠かせないインサイトと透明性が得られます。ファイルを作成します。設定ファイルになります。このファイルに以下の設定を追加します。イメージを指定しています。その後、プロジェクトに保存済みキャッシュがあるかどうかを確認します。キャッシュがある場合は、復元してから新しい依存関係をインストールします。新しい依存関係をインストールした後は、キャッシュを保存します。その後、テストを実行し、生成されたアーティファクトを保存します。リポジトリに変更をプッシュしましょう。ダッシュボードにログインします。リポジトリを探します。