JavaScirptによるHTTP通信 入門
今回は、JavaScirptによるHTTP通信について解説していきます。
こちらはJavaScriptを使うのであれば必須の知識になるかと思うので、ぜひ参考にしてください。
(実行例などは、参考元の記事から引用しています。)
fetch
まず、JavaScriptでHTTPリクエストを発行するための代表的なAPIであるfetch APIについて解説していきます。
基本的な使い方は以下の通りです。
fetch("https://qiita.com/api/v2/items”);
たったこれだけで、HTTPリクエストを実行することができます。
ちなみに値はPromiseで帰ってくるので、以下のように受け取ります。
const result = await fetch("https://qiita.com/api/v2/items");
(もちろんasync/awaitではなく、thenでもOKです)
中身をログに出力すると以下のようになります。
{
type: "basic"
url: "https://qiita.com/api/v2/items"
redirected: false
status: 200
ok: true
statusText: ""
headers: Headers {}
body: (...)
bodyUsed: false
__proto__: Response
}
このようにHTTPレスポンスを受け取っています。
そして、bodyの中にHTTPレスポンスボディの中身が入っています。
ただ、このままだと取り出せないので、事前に設定されているメソッドを使用します。
const parsedResult = result.json();
今度は以下のように具体的な内容まで見ることができます。
{
lastIndex: (...)
lastItem: (...)
0: {rendered_body: "<h2>...</h2>", body:"...", ...}
1: {rendered_body: "<h2>...</h2>", body:"...", ...}
<<中略>>
19: {rendered_body: "<h2>...</h2>", body:"...", ...}
length: 20
__proto__: Array(0)
}
ちなみに、jsonメソッド以外にも、arrayBuffer, blobなどのメソッドもあります。
また、以下のようにHTTPリクエストヘッダを設定することもできます。
await fetch(url, {
headers: {
Authorization: "Basic " + btoa("username" + ":" + "password"),
Accept: "application/json",
"Content-Type": "application/json;charset=utf-8"
}
});
さらに、GET以外のメソッドや、modeやcredential、cacheなどのその他のオプションも設定可能です。
axios
次に、axiosというライブラリについて解説していきます。
こちらもHTTPを扱うためのものになります。
このライブラリの方がシンプルに書けるといったメリットがあるので、こちらを使っている現場の方が圧倒的に多いです。
また、第2引数にパラメータを渡すだけでHTTPリクエストボディーに追加されます。
axios.post("/api/user", {name: "hoge"})
さらに、fetchのようにJSONデータにエンコードする必要がないので簡潔なコードになります。
コードで見た方が分かりやすいと思うので、次のコードを参考にどうぞ。
axios.get("/api/user")
.then((response) => console.log(response.data)
最後に、エラーハンドリングの仕様も異なります。
fetchはHTTPステータスコードが404や500を受け取ってもエラーを吐かず、thenの処理を走らせます。
一方、axiosは404や500を受け取るとエラーを吐き、catchの処理が実行されます。
多くの人にとって、こちらの方が直感的で扱いやすいでしょう。
こういった理由もあり、fetchよりもaxiosを使ってる現場の方が多いのです。
まとめ
今回は、JavaScriptにおけるHTTP通信の方法について解説してきました。
どなたかの参考になれば幸いです。
宣伝
0からエンジニアになるためのノウハウをブログで発信しています。
また、YouTubeでの動画解説も始めました。 YouTubeのvideoIDが不正です
インスタの発信も細々とやっています。
興味がある方は、ぜひリンクをクリックして確認してみてください！
参考
Discussion