2020/03/10
XMLHttpRequest(Ajax)とFetch APIの使い方を比較してみる
最近、JavaScriptを深く理解できるように、jQueryを使わずにコードを書くことにハマっています。
jQueryの便利な機能として大きなものに、Ajaxがあります。
jQeuryでAjaxを手軽に使えるようになったことで、画期的なJavaScriptの機能を抵抗感なく使えるようになりました。
このAjaxの機能は、JavaScriptのXMLHttpRequest APIを利用したものです。XMLHttpRequest APIは利用方法が直感的ではなく、単体で利用するためには、冗長で見づらいコードを書く必要が出てきます。
JavaScript標準でjQueryのAjax APIのようにわかりやすいコードで直感的に非同期通信を利用できるように策定されたのが Fetch API です。Fetch API にはjQueryのAjax APIの影響が随所に見られ、利用法はとても似ていて、尚且、非同期通信を便利に利用するための機能が強化されています。
便利なFetch APIの登場で、Ajaxの利用の必要はなくなりそうですが、IE11で対応していないため、IE11が公式にフェードアウトする2025年までは、PC向けにAjaxを利用する機会が残ります。Polyfillを使って間を継ぐ方法もありますが、IEのためだけにPolifyll入れるのもちょっと抵抗があるかもしれません。
Fetch APIは触ってみたことがあったのですが、XMLHttpRequest APIは直接触ったことがなかったので、今回はその基本的な使い方について比べてみました。
XMLHttpRequest API
流れ
- APIの呼び出し
- 通信が成功したときと失敗したときのコールバック関数の設定
- 通信の設定
- 通信の開始
実際のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // APIの呼び出し var xhr = new XMLHttpRequest(); // 通信が成功したとき xhr.addEventListener('load', function () { var data = JSON.parse(xhr.response); console.log(data); }); // 通信が失敗したとき xhr.addEventListener('error', function () { console.error(xhr.response); }); // 通信の設定 xhr.open('POST', 'api.json'); // リクエストの初期化 xhr.setRequestHeader('Content-Type', 'application/json charset=utf-8'); // 通信オプション（例としてheaderのContent-Type）の設定 // 通信の開始 xhr.send(JSON.stringify({"hoge": "fuga"})); |
XMLHttpRequest APIを使った非同期通信の場合、記述が分散してコードが見づらくなりがちです。オプションの設定もメソッドが別れていたりして煩雑です。
Fetch API
流れ
- APIの実行
- 通信が成功したときと失敗したときのコールバック関数の設定
実際のコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | // Fetch APIの実行 fetch('api.json', { headers: { 'Content-Type': 'pplication/json; charset=utf-8' }, body: JSON.stringify({"hoge": "fuga"}) }) // 通信が成功したとき .then(function(response) { return response.json(); }) .then(function(json) { console.log(json); }) // 通信が失敗したとき .catch(function(error) { console.error('Error:', error); }); |
Fetch APIを使った非同期通信の場合、記述がまとまっており、コードが見やすいです。オプションの設定も整理されていてわかりやすいです。
感想
XMLHttpRequest APIを初めて直接触ってみた感触としては、思ったほど煩雑でないにしても、記述が分散したり、実際の流れと記述の順序が一致しない場合があるので全体として見づらいという感じでした。
一方のFetch APIはオブジェクトでひとくくりになったオプション指定やPromiseオブジェクトによる一連した通信後の記述により、シンプルで見やすいコードで非同期通信を記述できます。
IE11を配慮しないで良い範囲ではできるだけFetch APIを使いたいと思いました。
Author Profile
SHARE
