VSCode REST プラグインを使用して API 呼び出しを行う方法の詳細な説明

関連する推奨事項: 「vscode の基本的な使用方法のチュートリアル 」

新しい API をテストするために IDE を離れる必要があるのはなぜですか?今はその必要はありません。

データの取得方法

Web 開発に長い間取り組んでいる方は、おそらく私たちの仕事の多くがデータを中心に展開していることをご存知でしょう。 : データの読み取り、データの書き込み、データの操作、および適切な方法でのデータのブラウザーでの表示。

このデータのほとんどは REST API エンドポイントによって提供されます。平たく言えば、必要なデータは他のサービスまたはデータベースに存在し、アプリケーションはサービスにクエリを実行してデータを取得し、必要に応じてデータを使用します。自分自身のニーズ。

以前は、UI に接続してデータを受け取る前に REST API をテストするには、通常、ターミナルのコマンド ラインを通じて API にクエリを実行するか、Insomnia や Postman などの GUI を使用する必要がありました (以前のブログの比較でそれらについて書きました）。

しかし、VS Code を使用すると (VS Code を使用してコードを書くのはとても素晴らしいことです!)、作業はシンプルになります。 API をテストするために IDE を終了する必要はなくなりました。REST クライアントというこれを実行できるプラグインがあるためです。

REST クライアントの使用は非常に簡単です。このプラグインがいかにシンプルでフル機能であるかを説明します。

VS Code REST クライアント プラグインについて知る

私は数年間 VS Code コード エディターのファンです。誰かが新しいプラグインを作成しました。VS Code マーケットプレイスへの便利なプラグインや追加に非常に感謝しています。

そこで、新しい API ルートをテストする必要があるたびに Postman または Insomnia を起動するのは面倒だと判断したとき、それを簡単に実行できる REST クライアント プラグインを発見しました。

REST クライアントは、現在存在するツールの最もわかりやすい名前であり、VS Code マーケットプレイスの説明にはその機能が正確に要約されています。「REST クライアントを使用すると、HTTP リクエストを送信し、Visual Studio Code で直接応答を表示できます」 ."

とても簡単です。次に、その使用方法の多くの詳細と例が示されていますが、実際には、これは VS Code に組み込まれた HTTP ツールです。それでは、使ってみましょう。

REST クライアントのインストール

これを見つけるには、VS Code で Market 拡張機能 (左側のパネルにある小さなテトリス アイコン) を開き、「rest client」と入力してインストールします。リストの最初の結果 (著者は Huachao Mao である必要があります)。

#インストールが完了したら、設定を続行できます。

REST クライアント スクリプトのセットアップ

プロジェクトのルート ディレクトリに

.http で終わるファイルを作成するだけです。はこれを認識でき、そのファイルから HTTP リクエストを実行できるはずであることを認識しています。

テストの際、数年前に作成した Docker 化されたフルスタック MERN ログイン アプリケーションを使用し、

test.http という名前のファイルをプロジェクト フォルダーのルート ディレクトリにドロップしました。

テストしてみましょう: 基本操作

ここがすばらしい部分です: 私の経験では、この小さな REST はクライアント プラグインで次のように実行できます。 Postman のようなより複雑な API クライアントも同様です。

以下では、基本的な CRUD 操作の各タイプを実行する方法に加えて、呼び出しをポイントするためにローカルで実行されている MERN ユーザー登録アプリケーションを使用して、JWT トークンなどの認証を必要とする API 呼び出しを行う方法を示します。

POST 例

最初に説明する例は、REST クライアントの

POST です。これは、アプリケーション内のユーザーが最初に登録する必要があるためです。他のことをします (結局のところ、これは単なるログイン サービスです)。

したがって、このコードは

test.http ファイルに表示されます。

それでは、上記のコード スニペットで何が起こっているかを確認してみましょう。

REST クライアントが適切に動作するために最初に必要なのは、行われるリクエストのタイプと、アクセスしようとしているルートの完全な URL パスです。この場合、リクエストは POST で、URL は

http://localhost:3003/registerUser です。 1 行目の末尾の HTTP/1.1 は RFC 2616 で定められた標準に関連していますが、必要かどうかわからないので、念のためそのままにしておきます。

次に、これは

POST であるため、Content-Type と body の間に注意して、JSON 本文をリクエストに含める必要があります。空白行があります - これは REST クライアントによって意図的に必要とされています。したがって、必須フィールドに入力すると、小さな send Request オプションが POST の上に表示されるはずです。マウスをその上に置き、クリックして何が起こるかを確認します。

最後に注意していただきたいのは、test.http ファイル内のリクエストの後の です。リクエスト間の区切り文字 、各リクエストの間に

を挿入することで、ファイルに任意の数のリクエストを含めることができます。

リクエストが成功すると、上で投稿したものと同様のものが表示されます。リクエストが失敗した場合でも、何が起こったのか、そして (できれば) 何がうまくいかなかったのかに関するすべての情報を得ることができます。クールな

GET 例

これでユーザーが作成されました。パスワードを忘れたので、パスワードを取得するために電子メールを送信したとします。電子メールには、トークンと、パスワードをリセットするためのページに移動するリンクが含まれています。 ユーザーがリンクをクリックしてページにアクセスすると、パスワードをリセットするための電子メールに含まれているトークンが有効であることを確認するために

GET

リクエストが開始され、それが可能です。

私の GET は /reset エンドポイントを指し、サーバー側での認証に必要な resetPasswordToken を追加します クエリパラメータ。 Content-Type は引き続き application/json であり、下部の

はこのリクエストをファイル内の他のリクエストから分離します。

トークンが実際に有効な場合、サーバーの応答は次のようになります:

GET リクエストに必要なのはこれだけであり、これを行う必要はありません。リクエストボディの問題を心配してください。

更新例

次は U: CRUD での更新です。ユーザーがプロフィール情報の何かを更新したいとします。 RESTクライアントの使い方も難しくありません。

このリクエストでは、リクエスト タイプが

PUT

に更新され、本文には更新が必要なオブジェクトのフィールドが含まれています。私のアプリケーションでは、ユーザーは自分の名、姓、または電子メールを更新できます。

したがって、本文を渡すとき、REST クライアントが PUT エンドポイントに正常に到達した場合、VS Code の [応答] タブは次のようになります。

それでは、認証の例に進みましょう。私の知る限り、何らかの認証を必要とする保護されたルーティングを持たないアプリケーションはほとんどないからです。

認証例

REST クライアントでサポートされているさまざまな認証形式の広さに改めて感銘を受けました。この記事の執筆時点では、REST クライアントのドキュメントには、アプリケーションがすべての保護されたルートで依存する認証タイプである JWT 認証のサポートを含む、6 つの一般的な認証タイプがサポートされていると記載されています。

それでは、早速、検証する必要があるエンドポイントの 1 つである、データベース内のユーザー情報の検索を説明します。

REST クライアント リクエストに承認を追加するのは非常に簡単です。ルートとコンテンツ タイプが宣言されている場所の下にキー Authorization

を追加するだけです。少なくとも私の場合）JWT のキーと値（ブラウザのローカル ストレージに表示されるもの）を

Authorization

ヘッダーの値として追加します。

これは次のようになります:

Authorization: jwt XXXXXXXXXXXXXXXXXX

その後、リクエストを送信して、何が起こるかを確認してください。

認証が正しく設定されている場合、サーバーから何らかのタイプの 200 応答を受け取ります。この応答は、私のリクエストに対して、データベースに保存されているそのユーザーに関連するすべての情報と、ユーザーが次のことを行ったというメッセージを返します。無事に見つかりました。

この部分には多少の試行錯誤が必要になるかもしれませんが、ブラウザの Dev Tools ネットワーク呼び出し、既存の Swagger エンドポイント、またはドキュメントなどを通じてリクエストが成功する方法を理解できれば、問題はありません。価値がある。

#DELETE 例

上で提供した他の例の後、この例は単純なものになるはずです

#ThisDELETE 必須のクエリ パラメータは

username

であるため、データベース内のどのユーザーを削除するかを認識し、このユーザーがこのリクエストを行う資格があるかどうかを確認する必要もあります。それ以外に、ここで紹介する新しいものはありません。

######

這其實只是REST Client可以做的冰山一角。我涵蓋了REST請求和一種形式的認證，但它也可以支援GraphQL請求、多種其他類型的認證、環境和自訂變數、查看和保存原始回應等等。

我強烈建議您查閱文檔，以了解REST Client的所有功能，它非常強大。

REST Client文件：https://blog.bitsrc.io/vs-codes-rest-client-plugin-is-all-you-need-to-make-api-calls-e9e95fcfd85a

結束

資料驅動互聯網，而隨著職業生涯的進一步發展，Web開發人員最終會變得非常善於存取和轉換資料以滿足自己的需求。

以前，當獲取託管在其他地方的資料時，Web開發人員經常會求助於Postman或Insomnia這樣的工具，以擁有比命令列稍微好一點的介面，但現在有一個VS Code插件，它讓程式碼編輯器以外的需求成為了過去，它叫做REST Client，非常棒。

CRUD操作？沒問題！支援GraphQL？沒問題！認證選項？沒問題！ REST Client提供了所有這些選項以及更多，而且設定和使用起來非常簡單。我肯定會在以後的項目中更多地使用它。

請過幾週再回來看看－我將寫更多關於JavaScript，React，ES6或其他與Web開發相關的內容。

謝謝你的閱讀。我希望你能考慮用REST Client來處理你未來可能需要做的任何API查詢，我想你會對它能提供的愉快體驗感到驚喜，不需要任何API GUI。

原文網址：https://blog.bitsrc.io/

作者：Paige Niedringhaus

翻譯網址：https://segmentfault.com/a /1190000038223490

更多程式相關知識，請造訪：程式設計學習課程！ ！

以上がVSCode REST プラグインを使用して API 呼び出しを行う方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。