axiosでGET・POSTリクエストを作成する方法【初心者向け完全ガイド】

Webアプリケーションを開発していると、外部リソースにアクセスするためにHTTPリクエストを送りたい場面が出てきます。たとえばブログサイトを構築する場合、各記事にコメント一覧を表示するためにAPIを呼び出すことがあるでしょう。

Axiosは、Webリクエストを簡単に行うために広く使われているJavaScriptライブラリです。この記事では、axiosを使ってGETリクエストやPOSTリクエストを作成する方法を、具体的なコード例とともにわかりやすく解説します。

なぜAxiosを選ぶのか？

AxiosはPromiseベースのライブラリで、Webリクエストをシンプルに記述できるのが特徴です。

「fetchなど他にもHTTPリクエスト用のライブラリはあるのに、なぜaxiosを使うべきなのか？」と疑問に思う方もいるかもしれません。確かにfetchでもGETリクエストは可能ですが、axiosには他のライブラリにはない多くの利点があります。

まず、axiosは古いブラウザにも対応しているため、より幅広いユーザーにとってアクセスしやすい体験を提供できます。また、CSRF（クロスサイトリクエストフォージェリ）対策が組み込まれており、セキュリティ面でも安心です。さらにNode.js環境でも動作するため、フロントエンドとバックエンドの両方の開発で同じライブラリを使い回せる点も大きな魅力です。

Axiosのインストール方法

axiosでGETリクエストを送る前に、まずライブラリをインストールする必要があります。以下のコマンドを実行しましょう。

npm install axios --save

このコマンドにより、axiosがインストールされ、ローカルのpackage.jsonファイルに依存関係として保存されます。これでaxiosライブラリを使う準備が整いました。

Axiosでリクエストを行う基本の流れ

axiosの使い始めはとても簡単です。Webリクエストを送るには、データを取得したいURLと、使用するHTTPメソッドを指定するだけです。

たとえば、cat-facts APIから猫に関するランダムな豆知識の一覧を取得したい場合、次のようなコードを書きます。

axios ({
	url: "https://cat-fact.herokuapp.com/facts",
	method: "GET"
})

このコードは、まだ完了していないリクエストを表すPromiseを返します。このHTTPリクエストからデータを取得するには、async/await関数を次のように使います。

const axios = require("axios");

async function getCatFacts() {
	const response = await axios ({
		url: "https://cat-fact.herokuapp.com/facts",
		method: "GET"
	})

	console.log(response.data)
}

getCatFacts()

このコードを実行すると、サーバーから猫の豆知識の一覧が返されます。

この関数を呼び出すと、cat-facts APIに対してHTTP GETリクエストが送信されます。async/await関数を使用することで、Webリクエストが完了するまでプログラムの処理を先に進めないようにしています。これは、axiosが最初にPromiseを返し、そのリクエストが完了した後にデータを返す仕組みになっているためです。

また、axiosライブラリには、Webリクエストを簡潔に書くためのショートカットメソッドが用意されています。

• axios.get()
• axios.post()
• axios.delete()
• axios.put()
• axios.patch()
• axios.options()

この記事では、その中でも特によく使われるaxios.get()とaxios.post()の2つのメソッドに焦点を当てて解説します。これらの基本的な構文は、他のショートカットメソッドでも共通しています。

axiosでGETリクエストを送る方法

前の例ではaxiosオブジェクトを直接使ってGETリクエストを送りましたが、実はもっとシンプルな書き方があります。それがaxios.get()です。

たとえば、猫の豆知識の一覧を取得し、何件返ってきたかを数えたい場合は、次のようにコードを書けます。

const axios = require("axios");

async function getCatFacts() {
	const response = await axios.get("https://cat-fact.herokuapp.com/facts")

	console.log(`${response.data.all.length} cat facts were returned.`)
}

getCatFacts()

このコードを実行すると、「225 cat facts were returned.（225件の猫の豆知識が返されました）」という結果が出力されます。

コードの内容を分解してみましょう。まず、getCatFacts()というasync関数を宣言し、その中でWebリクエストを行っています。

次に、axios.get()を使ってcat-facts APIから猫の豆知識の一覧を取得します。「response.data」には、リクエストに対するレスポンスオブジェクトとレスポンスボディが格納されます。

最後に、.length属性を使って、リクエストで返された豆知識の件数を計算し、その数値を文字列に埋め込んで表示しています。

axiosでヘッダーを送信する方法

GETリクエストを送る際、リクエスト先のWebリソースに対してカスタムヘッダーを送る必要がある場合があります。たとえば、認証が必要なAPIからデータを取得する場合、認証用のヘッダーを指定しなければならないことがあります。

axiosのリクエストでヘッダーを指定するには、次のようなコードを使います。

axios.get("https://urlhere.com", {
	headers: { "header-name": "header-value" }
})

このコードでは、指定したURLに対して「header-name」という名前のヘッダーを「header-value」という値とともに送信します。

axiosでパラメータを送信する方法

多くのAPIでは、GETリクエストにパラメータを含めることができます。たとえば、limitパラメータを使って返されるレスポンスの件数を制限できるAPIもあります。

axiosでパラメータを指定するのは簡単です。クエリ文字列として直接URLに含める方法と、paramsプロパティを使う方法の2通りがあります。まず、クエリ文字列を使ってパラメータを指定する例を見てみましょう。

axios.get("https://urlhere.com/?date=2020-05-15")

あるいは、axiosのオプションでparamsプロパティを指定する場合は、次のように書きます。

axios.get("https://urlhere.com", {
	params: {
		date: "2020-05-15"
	}
})

どちらの例でも、「date」という名前のパラメータに「2020-05-15」という値を設定して、指定したURLに送信しています。paramsプロパティを使う方法の方が、コードの可読性が高く、複数のパラメータを扱いやすいというメリットがあります。

axiosでPOSTリクエストを行う方法

POSTリクエストの構文は、GETリクエストと基本的に同じです。違いは、axios.get()の代わりにaxios.post()メソッドを使う点だけです。

たとえば、APIに対してPOSTリクエストを送りたい場合は、次のようなコードになります。

axios.post("https://urlhere.com")

POSTリクエストでも、GETリクエストと同じようにヘッダーやパラメータを指定できます。たとえば、POSTリクエストとともに「Name」というヘッダーを「James」という値で送りたい場合は、次のように書きます。

axios.post("https://urlhere.com", {
	headers: { "Name": "James" }
})

なお、POSTリクエストでは通常、第2引数として送信したいデータ（リクエストボディ）を渡すこともできます。フォームデータやJSONデータをサーバーに送信する際に活用してください。

まとめ

axiosは、JavaScriptでWebリクエストを行うためのライブラリです。フロントエンドのJavaScriptでも、Node.jsなどのバックエンド環境でも利用できます。他のWebリクエストライブラリと異なり、axiosはCSRF対策が組み込まれており、古いブラウザにも対応し、Promiseベースの構造を採用しています。Webリクエストを行うための理想的な選択肢と言えるでしょう。

この記事で解説した内容を参考に、プロのWeb開発者のようにaxiosを使ったGET・POSTリクエストを作成してみてください。