なぜ記事を書こうと思ったか
サービスの開発中にAPI通信が動作してるか確認する必要があった為、API通信確認方法の備忘録として残す為。
おすすめのAPI通信確認方法
おすすめのAPI通信確認方法としては、コードエディタにVScodeを利用している場合、VSCodeの拡張機能である「Thunder Client」をおすすめします。昔は「Postman」というサービスがAPI通信確認方法として利用されており、VScodeを使っていない場合は、利用するのもありだと思いますが、「Thunder Client」はVScodeで完結できる為、非常に便利です。
「Thunder Client」の導入方法と使い方
- 導入方法(インストールするだけですが笑)
VScodeの拡張機能を開き、以下のThunder Clientをクリックし、インストールを押して下さい。
- 使い方
1.拡張機能のマークの下に新しい雷のマークがあるので、クリックして下さい。
2.「New Request」を押して下さい。
3.検索バーの下にあるHeadersタブをクリックして下さい。
4.「Raw」のチェックマークにチェックを入れて下さい。
5.HttpHeadersにいらない情報がある為、全て削除して下さい。
6.HttpHeaderにcookieの値やX-CSRFtokenなど必要情報を入力して下さい。
もしわからない場合は、API通信できているか確認したいURLに関連するURLをグーグルで表示し、デベロッパーツールを開いて下さい。「Network」タブを開き、⌘+Rを押し、RequestHeaderの中身を全てコピーして下さい。
7.コピーした内容をThunderClientのHttpHeaderに貼り付け、検索バーにURLを入力後、Sendをクリックして下さい。
その後、ステータスコードなどが表示されます。
最後に
間違っている箇所があれば、ぜひ教えていただけると嬉しいです。
読んで頂きありがとうございました。