こんにちは！YKです！
JavaScriptで非同期通信の実装を行う方法は様々あり、結局どれがいいんだ…と悩んだ経験はありませんか？
この記事では、それらの実装方法を比較し、どれを使うのがいいのか紹介したいと思います！
結論
結論、Axiosを使うのが一番おすすめです！
理由としては、シンプルで書きやすく、データの扱いかたやエラーハンドリングがし易い点が挙げられます。
Axiosを使う場合、たとえば、以下のように記述します。
// Axiosをインストールする
npm install axios
// 読み込む
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log('エラーが発生しました：', error);
});XMLHttpRequestとFetch APIとの比較
XMLHttpRequest
JavaScriptの古典的な方法で、非同期通信を行うためのAPIです。現代のプロジェクトで採用することはほぼないでしょう。
古くから使われているXMLHttpRequestは、以下のように記述します。
▼GET送信の場合
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send();▼POST送信の場合
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/data', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(JSON.parse(xhr.responseText));
}
};
xhr.send(JSON.stringify({ key1: 'value1', key2: 'value2' }));
この方法は昔から使われているため、ブラウザの互換性は高いですが、現代的な書き方と比べて煩雑であると感じることがあります。
まとめ
- JavaScriptの古典的な方法で、非同期通信を行うためのAPIです。
- 現代のフロントエンド開発ではあまり推奨されていませんが、古いコードやライブラリではまだ見かけることがあります。
Fetch API
Fetch APIは、ブラウザの標準APIとして提供されています。
Fetch APIでは以下のように記述します。
// 'https://api.example.com/data'からデータを取得するためにGETリクエストを送信する
fetch('https://api.example.com/data')
.then(response => response.json()) // レスポンスをJSONとして解析
.then(data => console.log(data)) // データをコンソールに出力
.catch(error => console.log('エラーが発生しました：', error)); // エラーが発生した場合にエラー情報をコンソールに出力▼POST送信の場合
// 'https://api.example.com/data'にPOSTリクエストを送信する
fetch('https://api.example.com/data', {
method: 'POST', // HTTPメソッドとしてPOSTを使用
headers: {
'Content-Type': 'application/json' // ヘッダーにコンテンツタイプを設定
},
body: JSON.stringify({ key1: 'value1', key2: 'value2' }) // 送信するデータをJSON形式に変換
})
.then(response => response.json()) // レスポンスをJSONとして解析
.then(data => console.log(data)) // データをコンソールに出力
.catch(error => console.log('エラーが発生しました：', error)); // エラーが発生した場合にエラー情報をコンソールに出力まとめ
- ブラウザの標準APIとして提供されています。
- ただし、エラーハンドリングが少し面倒で、デフォルトではネットワークエラーが発生してもrejectされません。
Axios
Axiosは非同期通信のための外部ライブラリです。
Axiosでは以下のように記述します。
▼GET送信の場合
// Axiosをインストールする
npm install axios
// 読み込む
import axios from 'axios';
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log('エラーが発生しました：', error);
});▼POST送信の場合
// Axiosをインストールする
npm install axios
// 読み込む
import axios from 'axios';
axios.post('https://api.example.com/data', {
key1: 'value1',
key2: 'value2'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.log('エラーが発生しました：', error);
});
さきほどのFetch APIのPOST送信のコードと比較するとかなりすっきりしているかと思います。
Fetch APIの場合、POSTする際に、JSON.stringifyでJSONに変換し、データを受け取ったあとresponse.json()でJSONとして解析する必要があり、面倒であるのがデメリットでもあります。
が、Axiosはこのあたりを自動で変換してくれるため、コードが非常にすっきりします。
まとめ
- Axiosは非同期通信のための外部ライブラリです。
- Promiseベースで動作し、Fetch APIよりも柔軟なエラーハンドリングやリクエスト/レスポンスのインターセプト、タイムアウトの設定などの機能が提供されています。
- JSONデータの自動変換やブラウザとNode.jsの両方で動作するという利点もあります。
まとめ
いかがだったでしょうか。
Axiosはシンプルで強力なライブラリで、コードもスッキリとするためおすすめです。
もちろん、他の選択肢も検討する必要があるケースもあるかと思いますが、とくに制約がないのであればAxios一択でいいかと思います。
参考記事
この記事ではエラーハンドリング周りについては振れませんでしたが、そのあたりまで詳しく解説されています。👇
ぜひ、こちらも参考にしてみてください。
