JavaScriptでAPI通信を簡単にする方法－axiosの使い方－

その他

この記事を書いたチーム：frontier

axiosについて
axiosの導入方法
axiosの基本的な使い方
- GETリクエスト
- POSTリクエスト
まとめ

axiosについて

【エンジニア募集中】フルリモート可◎、売上/従業員数9年連続UP、平均残業8時間、有給取得率90％、年休124日以上 etc.　　詳細はこちらから＞

axiosとは、簡単にHTTPリクエストのやり取りができるPromiseベースのライブラリです。非同期にHTTPメソッド(GET・POST・PUT・DELETE通信等)を取り扱えるので非常に便利です。今回は、GET通信とPOST通信の例を用いて紹介したいと思います。

主なHTTPメソッド

GET通信
→サーバからデータを取得。
POST通信
→サーバからデータを登録、更新、削除。
PUT通信
→サーバからデータを更新。
DELETE通信
→サーバのデータを削除。

axiosの導入方法

npmを使用して、インストールする方法は下記の通りにコマンドラインから実行します。

npm install axios

または、CDNリンクから直接使用することも可能です。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axiosの基本的な使い方

npmを使用した場合、使用するファイルは次のように事前にrequireする必要があります。

const axios = require('axios');

				1

						const axios = require('axios');

GETリクエスト

axiosを使用したGETメソッドリクエストの実行方法について説明します。例えば、GETリクエスト（通信）を行う場合は次のようにコードを書くことができます。

・GETリクエストのサンプルコード

// GETリクエスト
axios.get('URL', {
    params: {
        name: 'パラメータ名'
    }
  })
  // 通信が成功したときに返ってくる
  .then(function (response) {
    console.log(response);
  })
  // 通信が失敗したときに返ってくる
  .catch(function (error) {
    console.log(error);
  });

				
					
				1
2
3
4
5
6
7
8
9
10
11
12
13
14

						// GETリクエスト
axios.get('URL', {
    params: {
        name: 'パラメータ名'
    }
  })
  // 通信が成功したときに返ってくる
  .then(function (response) {
    console.log(response);
  })
  // 通信が失敗したときに返ってくる
  .catch(function (error) {
    console.log(error);
  });

					

			

指定したリクエストのURL（例：http://api.example.com）に対して、paramsオプションを指定しています。paramsオプションを指定することで、リクエストパラメータにセットすることができます。

今回の場合は、nameをキーとして、値をパラメータとして送信しています。そして、返ってきたデータに対して出力しています。また、成功すれば、responseで返された詳細を確認することができ、response.dataオブジェクトでJSON形式のデータを確認することができます。

POSTリクエスト

POSTリクエスト（通信）でやり取りする場合は、次のようにコードを書くことができます。

・POSTリクエストのサンプルコード

const data = {
  name: 'パラメータ名'
};

// POSTリクエスト
axios.post('URL', data)
// 通信が成功したときに返ってくる
  .then(function (response) {
    console.log(response);
  })
  // 通信が失敗したときに返ってくる
  .catch(function (error) {
    console.log(error);
  });

const data = {

name: 'パラメータ名'

};

// POSTリクエスト

axios.post('URL', data)

// 通信が成功したときに返ってくる

.then(function (response) {

console.log(response);

})

// 通信が失敗したときに返ってくる

.catch(function (error) {

console.log(error);

});

上記のコードは、指定したURL（例：http://api.example.com）に対してJSON形式でデータを送信し、GET通信と同様に返ってきたデータを取得し、出力しています。また、エラーが発生した場合は、catch()メソッドによって処理されます。

まとめ

以上がaxiosの使い方と基本的な機能の紹介です。いかがだったでしょうか？
今回は、GET通信とPOST通信のみの紹介でしたが、PUT通信やDELETE通信をはじめとする多くのHTTPメソッドも使用することができます。興味がありましたら試してみてください！axiosは簡潔なコードでAPI通信を行うことができ、他のライブラリとの比較でも高い人気を誇っています。ぜひ、開発に取り入れてみてください！

【エンジニア募集中】フルリモートも◎(リモート率85.7％)、平均残業8時間、年休124日以上、有給取得率90％ etc.　詳細はこちらから＞