AngularJS
$ httpリクエスト

コントローラの中で$ httpを使う

$httpサービスは、HTTPリクエストを生成して約束を返す関数です。

一般的な使用法

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

コントローラー内での使用

appName.controller('controllerName',
    ['$http', function($http){

    // Simple GET request example:
    $http({
        method: 'GET',
        url: '/someUrl'
    }).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
    });
}])

ショートカットメソッド

$httpサービスにもショートカット方法があります。 ここでhttpメソッドについて読む

構文

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

ショートカットメソッド

• $ http.get
• $ http.head
• $ http.post
• $ http.put
• $ http.delete
• $ http.jsonp
• $ http.patch

サービスで$ httpリクエストを使用する

HTTPリクエストは、すべてのWebアプリで繰り返し使用されるため、共通のリクエストごとにメソッドを作成し、アプリ全体の複数の場所で使用することをお勧めします。

httpRequestsService.js作成する

httpRequestsService.js

appName.service('httpRequestsService', function($q, $http){

    return {
        // function that performs a basic get request
        getName: function(){
            // make sure $http is injected
            return $http.get("/someAPI/names")
                .then(function(response) {
                    // return the result as a promise
                    return response;
                }, function(response) {
                    // defer the promise
                    return $q.reject(response.data);
                });
        },

        // add functions for other requests made by your app
        addName: function(){
            // some code...
        }
    }
})

上記のサービスは、サービス内のget要求を実行します。これは、サービスが注入されているすべてのコントローラで利用できます。

使用例

appName.controller('controllerName',
    ['httpRequestsService', function(httpRequestsService){

        // we injected httpRequestsService service on this controller
        // that made the getName() function available to use.
        httpRequestsService.getName()
            .then(function(response){
                // success
            }, function(error){
                // do something with the error
            })
    }])

このアプローチを使用して、いつでもhttpRequestsService.jsを任意のコントローラで使用できます。

$ httpリクエストのタイミング

$ http要求にはサーバーによって異なる時間が必要ですが、いくつかは数ミリ秒かかりますが、いくつかは数秒かかる場合もあります。多くの場合、要求からデータを取得するのに必要な時間が重要です。レスポンス値が名前の配列であると仮定して、次の例を考えてみましょう：

間違った

$scope.names = [];

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

alert("The first name is: " + $scope.names[0]);

$ http要求のすぐ下にある$scope.names[0]アクセスすると、しばしばエラーが発生します。このコード行は、サーバーから応答を受け取る前に実行されます。

正しい

$scope.names = [];

$scope.$watch('names', function(newVal, oldVal) {
    if(!(newVal.length == 0)) {
        alert("The first name is: " + $scope.names[0]);
    }
});

$http({
    method: 'GET',
    url: '/someURL'
}).then(function successCallback(response) {
            $scope.names = response.data;
        },
        function errorCallback(response) {
            alert(response.status);
        });

$ watchサービスを使用すると、応答を受け取ったときにのみ$scope.names配列にアクセスします。初期化中は$scope.namesが初期化されていても関数が呼び出されるため、 newVal.lengthが0以外の値であるかどうかを確認する必要があります。注意してください。 $scope.names加えられた変更は、watch関数を起動します。