関連する推奨事項: 「vscode の基本的な使用方法のチュートリアル 」
新しい API をテストするために IDE を離れる必要があるのはなぜですか?今はその必要はありません。
Web 開発に長い間取り組んでいる方は、おそらく私たちの仕事の多くがデータを中心に展開していることをご存知でしょう。 : データの読み取り、データの書き込み、データの操作、および適切な方法でのデータのブラウザーでの表示。
このデータのほとんどは REST API エンドポイントによって提供されます。平たく言えば、必要なデータは他のサービスまたはデータベースに存在し、アプリケーションはサービスにクエリを実行してデータを取得し、必要に応じてデータを使用します。自分自身のニーズ。
以前は、UI に接続してデータを受け取る前に REST API をテストするには、通常、ターミナルのコマンド ラインを通じて API にクエリを実行するか、Insomnia や Postman などの GUI を使用する必要がありました (以前のブログの比較でそれらについて書きました）。
しかし、VS Code を使用すると (VS Code を使用してコードを書くのはとても素晴らしいことです!)、作業はシンプルになります。 API をテストするために IDE を終了する必要はなくなりました。REST クライアントというこれを実行できるプラグインがあるためです。
REST クライアントの使用は非常に簡単です。このプラグインがいかにシンプルでフル機能であるかを説明します。
私は数年間 VS Code コード エディターのファンです。誰かが新しいプラグインを作成しました。VS Code マーケットプレイスへの便利なプラグインや追加に非常に感謝しています。
そこで、新しい API ルートをテストする必要があるたびに Postman または Insomnia を起動するのは面倒だと判断したとき、それを簡単に実行できる REST クライアント プラグインを発見しました。
REST クライアントは、現在存在するツールの最もわかりやすい名前であり、VS Code マーケットプレイスの説明にはその機能が正確に要約されています。「REST クライアントを使用すると、HTTP リクエストを送信し、Visual Studio Code で直接応答を表示できます」 ."
とても簡単です。次に、その使用方法の多くの詳細と例が示されていますが、実際には、これは VS Code に組み込まれた HTTP ツールです。それでは、使ってみましょう。
これを見つけるには、VS Code で Market 拡張機能 (左側のパネルにある小さなテトリス アイコン) を開き、「rest client」と入力してインストールします。リストの最初の結果 (著者は Huachao Mao である必要があります)。
.http で終わるファイルを作成するだけです。はこれを認識でき、そのファイルから HTTP リクエストを実行できるはずであることを認識しています。
test.http という名前のファイルをプロジェクト フォルダーのルート ディレクトリにドロップしました。
POST です。これは、アプリケーション内のユーザーが最初に登録する必要があるためです。他のことをします (結局のところ、これは単なるログイン サービスです)。
test.http ファイルに表示されます。
http://localhost:3003/registerUser です。 1 行目の末尾の HTTP/1.1 は RFC 2616 で定められた標準に関連していますが、必要かどうかわからないので、念のためそのままにしておきます。
POST であるため、Content-Type と body の間に注意して、JSON 本文をリクエストに含める必要があります。空白行があります - これは REST クライアントによって意図的に必要とされています。したがって、必須フィールドに入力すると、小さな send Request オプションが POST の上に表示されるはずです。マウスをその上に置き、クリックして何が起こるかを確認します。
最後に注意していただきたいのは、test.http ファイル内のリクエストの後の です。リクエスト間の区切り文字 、各リクエストの間に
を挿入することで、ファイルに任意の数のリクエストを含めることができます。
これでユーザーが作成されました。パスワードを忘れたので、パスワードを取得するために電子メールを送信したとします。電子メールには、トークンと、パスワードをリセットするためのページに移動するリンクが含まれています。 ユーザーがリンクをクリックしてページにアクセスすると、パスワードをリセットするための電子メールに含まれているトークンが有効であることを確認するために
リクエストが開始され、それが可能です。
私の GET は /reset エンドポイントを指し、サーバー側での認証に必要な resetPasswordToken を追加します クエリパラメータ。 Content-Type は引き続き application/json であり、下部の
更新例
PUT
に更新され、本文には更新が必要なオブジェクトのフィールドが含まれています。私のアプリケーションでは、ユーザーは自分の名、姓、または電子メールを更新できます。
認証例
REST クライアントでサポートされているさまざまな認証形式の広さに改めて感銘を受けました。この記事の執筆時点では、REST クライアントのドキュメントには、アプリケーションがすべての保護されたルートで依存する認証タイプである JWT 認証のサポートを含む、6 つの一般的な認証タイプがサポートされていると記載されています。
REST クライアント リクエストに承認を追加するのは非常に簡単です。ルートとコンテンツ タイプが宣言されている場所の下にキー Authorization
Authorization
ヘッダーの値として追加します。 これは次のようになります:Authorization: jwt XXXXXXXXXXXXXXXXXX
上で提供した他の例の後、この例は単純なものになるはずです
#ThisDELETE 必須のクエリ パラメータは
であるため、データベース内のどのユーザーを削除するかを認識し、このユーザーがこのリクエストを行う資格があるかどうかを確認する必要もあります。それ以外に、ここで紹介する新しいものはありません。
這其實只是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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
