axiosのGETおよびPOSTリクエストを作成する方法

Webアプリケーションを構築しているときに、外部リソースにアクセスするためにHTTPリクエストを実行したい場合があります。たとえば、ブログを作成しているとします。 APIを呼び出して、各ブログ投稿に表示するコメントのリストを取得することをお勧めします。

Axiosは、Webリクエストを行うために使用できる人気のあるJavaScriptライブラリです。このガイドでは、axiosを使用してGETリクエストを行う方法について説明します。いくつかの例を見ていき、axiosがどのように機能し、コードでどのように使用できるかを紹介します。

なぜAxiosなのか

Axiosは、Webリクエストを簡単に作成できるPromiseベースのライブラリです。

疑問に思われるかもしれませんが、他の多くのWebリクエストライブラリの1つでaxiosを使用する必要があるのはなぜですか？ GETリクエストを作成するために使用できるfetchなどの他のライブラリがあることは事実ですが、axiosにはこれらのライブラリにはない多くの利点があります。

Axiosは古いブラウザをサポートしているため、よりアクセスしやすいユーザーエクスペリエンスを作成できます。 Axiosには、脆弱性を防ぐためのCSRF保護機能も組み込まれています。 Node.jsでも機能するため、フロントエンドまたはバックエンドの両方のWebアプリケーションを開発している場合に最適です。

Axiosのインストール方法

axiosを使用してGETリクエストを行う前に、ライブラリをインストールする必要があります。次のコマンドを使用してこれを行うことができます：

npm install axios --save

このコマンドはaxiosをインストールし、ローカルのpackage.jsonファイルに保存します。これで、axiosライブラリの使用を開始する準備が整いました。

Axiosを使用してリクエストを行う方法

axiosの使用を開始するのは簡単です。 Webリクエストを行うには、データをリクエストするURLと使用するメソッドを指定するだけです。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

cat-factsAPIから猫に関するランダムなファクトのリストを取得するとします。このコードを使用してこれを行うことができます：

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

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

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-factsAPIに対してHTTPGETリクエストが行われます。 async / await関数を使用しているため、Webリクエストが完了するまでプログラムは続行されません。これは、axiosが最初にpromiseを返すためです。リクエストが完了した後、リクエストからデータを返します。

axiosライブラリには、Webリクエストを行うために使用できるいくつかの簡略コマンドが付属しています。

• axios.get（）
• axios.post（）
• axios.delete（）
• axios.put（）
• axios.patch（）
• axios.options（）

このチュートリアルでは、axios.get()に焦点を当てます。 およびaxios.post() 他のすべての省略形メソッドと同じ基本構文を使用するメソッド。

axiosを使用したGETリクエストの作成

最後の例では、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の猫の事実が返されました。

コードを分解してみましょう。最初に、getCatFacts()という非同期関数を宣言しました。 Webリクエストを行います。

次に、axios.get()を使用します cat-factsAPIからcatfactsのリストを取得します。 「response.data」は、リクエストからのレスポンスオブジェクトとリクエスト本文を保持します。

最後に、.length属性を使用して、リクエストから返された猫のファクトの数を計算します。次に、この番号を「猫の事実が返されました」という文字列に追加します。

axiosを使用したヘッダーの送信

GETリクエストを行う場合、リクエスト先のWebリソースにカスタムヘッダーを送信する必要がある場合があります。認証が必要なAPIからデータを取得するとします。認証ヘッダーを指定する必要がある場合があります。

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

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

このコードは、値が「header-value」のヘッダー「header-name」を指定したURLに送信します。

axiosを使用したパラメータの送信

多くのAPIを使用すると、GETリクエストでパラメータを送信できます。たとえば、APIを使用すると、limitパラメーターを使用して返される応答の数を制限できます。

axiosを使用すると、Webリクエストで送信するパラメーターを簡単に指定できます。パラメータをクエリ文字列として含めるか、paramsプロパティを使用できます。次に、クエリ文字列を使用してパラメータを指定するWebリクエストを作成するaxiosの例を示します。

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

または、次のコードを使用して、axiosオプションでparamsプロパティを指定することもできます。

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

これらの例はどちらも、名前が「date」で値が「2020-05-15」のパラメーターを指定されたURLに送信します。

axiosを使用してPOSTリクエストを作成する方法

POSTリクエストを作成するための構文は、GETリクエストを作成する場合と同じです。違いは、axios.post()を使用する必要があることです。 axios.get()の代わりにメソッド 。

APIにPOSTリクエストを作成するとします。次のコードを使用してこれを行うことができます：

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

GETリクエストを行うのと同じ方法で、ヘッダーとパラメータを指定できます。 POSTリクエストで、値が「James」のヘッダー「Name」を送信するとします。次のコードを使用してこれを行うことができます。

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

結論

axiosライブラリは、JavaScriptでWebリクエストを行うために使用されます。 JavaScriptを使用するフロントエンドと、Node.jsなどのプラットフォームを使用するバックエンドの両方で使用できます。他のWebリクエストライブラリとは異なり、axiosにはCSRF保護が組み込まれており、古いブラウザをサポートし、promise構造を使用します。 Webリクエストを行うのに最適です。

これで、プロのWeb開発者のようにaxiosを使用してGETおよびPOSTリクエストを作成する準備が整いました。