原文: Here are the most popular ways to make an HTTP request in JavaScript
JavaScript には HTTP リクエストを実行できる優れたモジュールやメソッドがあり、サーバー側のリソースにデータを送受信するために使えます。この記事では、JavaScript で HTTP リクエストを実行する方法のうち、よく使われるものをいくつか紹介します。
Ajax
Ajax は非同期の HTTP リクエストを行う古典的な方法です。データは HTTP POST メソッドを使って送信され、HTTP GET メソッドを使って受信されます。GET リクエストの実行方法を見てみましょう。ここでは、ランダムなデータを JSON 形式で返してくれる、開発者向け無料オンライン REST API「JSONPlaceholder」を使用します。
Ajax で HTTP リクエストを実行するには、まず XMLHttpRequest() で新しくオブジェクトを初期化して、次に URL エンドポイントと HTTP メソッド (この例では GET) を指定します。最後に、open() メソッドを使って HTTP メソッドと URL エンドポイントを結び付け、send() メソッドを呼び出してリクエストを実行します。
この例では XMLHTTPRequest.onreadystatechange プロパティを使用して、HTTP レスポンスをコンソールログに出力します。このプロパティには readystatechange イベントが発生した時に呼び出されるイベントハンドラーを含めます。
const Http = new XMLHttpRequest();
const url='https://jsonplaceholder.typicode.com/posts';
Http.open("GET", url);
Http.send();
Http.onreadystatechange = (e) => {
console.log(Http.responseText)
}
ブラウザーコンソールを確認すると、データの配列が JSON 形式で返されているのが分かります。では、リクエストが完了したかどうかを知るにはどうしたらいいのでしょうか？言い換えれば、Ajax でレスポンスを扱うにはどのようにしたらいいのでしょうか。
onreadystatechange プロパティには readyState と status という 2 つのメソッドがあります。これを使ってリクエストの状態が確認できます。
readyState が 4 の場合は、リクエストが完了したことを意味します。readyState プロパティには 5 種類のレスポンスがあります。詳しくはこちらを参照してください。
JavaScript で直接 Ajax を呼び出す以外にも、HTTP 呼び出しの実行に便利なメソッドには、jQuery メソッドの $.Ajax などがあります。次はそちらを紹介します。
jQuery メソッド
jQuery には HTTP リクエストの扱いを楽にする多くのメソッドがあります。このメソッドを使えるようにするには、プロジェクトに jQuery ライブラリを追加します。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$.ajax
jQuery Ajax は、HTTP 呼び出しを行う最もシンプルなメソッドの一つです。
$.ajax メソッドには多くのパラメーターが指定でき、必須の物もそうでない物もあります。その中には、受け取ったレスポンスを扱うための success と error という 2 種類のコールバックオプションがあります。
$.get メソッド
$.get メソッドは、GET リクエストを実行するために使われます。このメソッドは 2 つのパラメーターを受け付けます。エンドポイント (URL) と、コールバック関数です。
$.post
$.post メソッドはサーバーにデータを POST する方法です。これは 3 つのパラメーターを受け付けます。URL、POST したいデータ、そしてコールバック関数です。
$.getJSON
$.getJSON メソッドは、JSON 形式のデータのみを取得します。これは 2 つのパラメーターを受け付けます。URL とコールバック関数です。
jQuery にはこのように、リモートサーバーにデータを要求したり送信したりする各種メソッドが備わっています。しかし、これらのメソッドは実は $.ajax メソッドだけで実行できます。その例が下記です。
fetch
fetch は、非同期リクエストを実行できる新しい強力なウェブ API です。実のところ、HTTP リクエストの方法としてベストな、筆者のお気に入りでもある方法の 1 つが fetch です。fetch は、ES6 の特徴である「プロミス」を返します。ES6 に馴染みがないなら、こちらの記事 (英語) で詳しく解説していますので参考にしてください。プロミスを使うと、非同期リクエストをスマートに扱うことができます。では fetch がどのように動作するか見ていきましょう。
fetch 関数は、1 つ必須のパラメーターとしてエンドポイントの URL をとります。その他にも下記の例のように、オプションのパラメーターがあります。
fetch には多くの利点があります。詳しくはこちらを参照してください。また、fetch の他にもサーバーへのリクエスト送受信を可能にするモジュールやプラグインがあります。例えば Axios です。
Axios
Axios は、HTTP リクエストを実行するためのオープンソースのライブラリで、たくさんの便利な機能を備えています。使い方を見ていきましょう。
使用方法:
まず、Axios を追加します。プロジェクトに Axios を追加する方法は 2 種類あります。
1 つ目は、npm を使う方法です。
npm install axios --save
上記コマンドを実行後、Axios をインポートします。
import axios from 'axios'
2 つ目は、CDN を使って Axios を追加する方法です。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Axios でリクエストを実行する:
Axios でサーバーに対してデータの送受信を行うには GET と POST を使用します。
GET:
axios は 1 つの必須パラメーターと、オプションで 2 つ目のパラメーターを取ることができます。上の例ではシンプルなクエリーのデータを渡しています。
POST:
Axios は「プロミス」を返します。プロミスについて詳しい人は、プロミスを使うと複数のリクエストを実行できることをご存じかもしれません。Axios でも同じように、複数のリクエストを同時に実行できます。
Axios では他にも多くのメソッドやオプションがサポートされています。こちらを参照してください。
Angular HttpClient
Angular には、Angular アプリで動作する独自の HTTP モジュールがあります。非同期リクエストの処理には RxJS ライブラリが使用され、HTTP リクエストを実行するための多数のオプションが提供されています。
Angular HttpClient を使用してサーバーと通信する
Angular HttpClient を使用してリクエストを実行するには、Angular アプリ内でコードを実行する必要があります。そのためのサンプルアプリを作成しました (訳注: リンクは後述)。Angular に詳しくない方は、筆者の記事 Learn how to create your first Angular app in 20 minutes を参考にしてください。
まず、app.module.ts で HttpClientModule をインポートします。
次に、リクエストを扱うためのサービスを作成します。Angular CLI を使用すれば、簡単にサービスを生成できます。
ng g service FetchdataService
次に、fetchdataService.ts サービスで HttpClient をインポートし、コンストラクターで注入 (inject) します。
そして app.component.ts で fetchdataService をインポートします。
//import
import { FetchdataService } from './fetchdata.service';
最後に、サービスを呼び出して実行します。
app.component.ts:
サンプルアプリのデモは Stackblitz で確認できます。
まとめ
この記事では、JavaScript における HTTP リクエストの実行方法で最もよく使われる物を見てきました。
ここまでお読みいただきありがとうございました。この記事を気に入っていただけましたら筆者の Twitter までご連絡ください。