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

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

デモとコードサンプルはこちら
 

(1)$httpサービスの使用方法


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

angular.module('MyApp', [])
.controller('MainCtrl', function($scope,$http) {
  var svrURL = "../../wp-content/themes/wp/friends.json";
  var config = {};
  $http.get(svrURL, config)
    .success(function (data, status, headers, config) {
    :
    })
    .error(function (data, status, headers, config) {
    :
    });
});

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サービスのプロミスオブジェクトで定義されているメソッド
 
success(fn)、error(fn)、then(fn,fn)のメソッドが定義されていて引数に応答後に実行するハンドラー関数を指定します。
 
応答結果が成功(レスポンスコードが200)の場合は、successメソッド、応答結果が失敗(レスポンスコードが200以外)の場合は、errorメソッドが実行されます。thenメソッドは、成功と失敗の二つのハンドラー関数を指定できます。
 
②success(fn)、error(fn)、then(fn,fn)メソッドのハンドラー関数に渡される属性
 
・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) {
//

 

(2)サンプルコード


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

関連記事の目次

コメントを残す

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