AngularJSの$httpサービスの概要、サーバーからJSONデータ取得

AngularJSの$httpサービスの概要をまとめ、サーバーからGetリクエストでJSONファイルのデータを取得するサンプルを作成しました。

※目次をクリックすると目次の下部にコンテンツが表示されます。

$httpサービスの使用方法
実際の使用例を基に$httpサービスの使用方法を示します。

angular.module('MyApp', [])
.controller('MainCtrl', function($scope,$http) {
  var svrURL = "../../wp-content/themes/wp/friends.json";
  var config = {};
  $http.get(svrURL, config)
    .then(function onSuccess(response) {
    :
    }, function onError(response) {
    :
    });
});

 
1)引数に依存するサービスを指定
 
コントローラのファクトリ関数の引数に$httpを指定します。
 
2)$httpサービスの構文
 
①簡易的な構文
 
データを送信するPOST、PUT、PATCHのHTTPメソッドは、urlとconfig、送信データを引数に指定し、それ以外のHTTPメソッドは、urlとconfigのみ引数に指定します。
 
post(url, data, [config]);
put(url, data, [config]);
patch(url, data, [config]);
get(url, [config]);
delete(url, [config]);
head(url, [config]);
jsonp(url, [config]);
 
②完全版の構文
 
configオブジェクトのみ引数に指定します。メソッド名と簡易版で指定した引数url、dataはconfigオブジェクト内に指定します。
 
$http(config)
 
③configオブジェクトのメンバ
 
○method
 
○url
 
○params
・URLクエリパラメータ。キーと値のペアのJavaScriptオブジェクト。
・paramsで{key1: ‘value1’, key2: ‘value2’}下記のように指定すると”?key1=value1&key2=value2″のようにURLクエリパラメータとしてURLに追加されてリクエストされる。
キーと値のペアの値が文字列ではなくオブジェクトを指定した場合はJSON形式に変換される。
 
○data
・POSTメソッドなどで送信されるデータ。文字列またはオブジェクト。
 
○headers
・{‘Content-Type’: ‘text/csv’}のようにHTTPヘッダーをオブジェクトを使って指定。
 
○xsrfHeaderName
・XSRF攻撃を防ぐための設定をしているサーバー用にXSRFヘッダーをセット。
 
○xsrfCookieName
・XSRF対策用のクッキーの名前
 
○transformRequest、transformResponse
・送受信するデータとHTTPヘッダーを引数とする関数を定義し、送受信データを変換する事が出来る。
 
○cache
・アプリケーションレベルでキャッシュを行うか指定。真偽値またはキャッシュオブジェクトを指定。
・trueを指定した場合は、デフォルトのキャッシュが使用される。
・$cacheFactoryを使ってカスタムのキャッシュオブジェクトを使用する事が出来る。
 
○timeout
・リクエストが処理されるまでの待機時間(ミリ秒)を指定、またはpromiseオブジェクトを指定して、サーバーリクエストの取消しを制御できる。
 
3)$httpサービスのリターン
 
$httpサービスはプロミスオブジェクトをリターンし、サーバーから応答がリターンされると応答結果に応じて実行するハンドラー関数を定義する事が出来る。
 
※プロミスオブジェクトについてはこちらも参照。
 
・プロミスオブジェクトを使用する事によってノンブロッキングでイベントドリブンにでき、サーバーからのレスポンスを待っている間もブラウザの操作が出来る。
 
①$httpサービスのプロミスオブジェクトで定義されているメソッド
 
・then(fn1,fn2)のメソッドが定義されていて、引数に応答後に実行するハンドラー関数を指定する。
 
・応答結果が成功(レスポンスコードが200)の場合は、fn1メソッド、応答結果が失敗(レスポンスコードが200以外)の場合は、fn1メソッドが実行される。
 
②then(fn1,fn2)メソッドのハンドラー関数に渡される属性
 
○headers
・レスポンスのHTTPヘッダー
 
○status
・レスポンスのステータスコード
 
○config
・リクエスト時に指定したconfigオブジェクト
 
○data
・サーバーからのレスポンスのボディ
 
③プロミスオブジェクトについて
 
・thenメソッドはプロミスオブジェクトをリターンし、複数の呼出しをチェーンできる。
 
・それぞれのハンドラー関数は値をリターンする事が出来、プロミスチェーンの次の関数に渡す事が出来る。
 
・ハンドラー関数がプロミスをリターンするとそのリクエストが終了後にその次のハンドラーが呼び出される。
 
・プロミスをチェーンする例

$http.get('/api/config').then(function(config) {
  return $http.get('/api/' + config.data.USER);
}).then(function(userResponse) {
  return $http.get('/api/' + userResponse.data.id + '/items');
}).then(function(itemResponse) {
//
}, function(error) {
//

サンプルコード
・サーバー内にJSON形式のデータを記述したファイルを用意し、$httpサービスのGetメソッドを使ってデータを取得し、テーブルとしてデータを表示。
 
・$httpサービスの使用法を確認するために、リクエスト時に指定したconfigオブジェクトの内容(このサンプルでは明示的に設定していないのでデフォルト値が表示)とレスポンスのステータス、HTTPヘッダーも表示しています。
 
デモとコードサンプルはこちら

関連記事の目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です