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 요청은 모든 웹 응용 프로그램에서 반복적으로 많이 사용되므로 각 공통 요청에 대한 메서드를 작성한 다음 응용 프로그램의 여러 위치에서 사용하는 것이 좋습니다.

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...
        }
    }
})

위의 서비스는 서비스 내부에서 요청을 수행합니다. 이것은 서비스가 주입 된 모든 컨트롤러에서 사용할 수 있습니다.

샘플 사용법

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과 newVal.length 확인해야합니다. $scope.names 를 변경하면 watch 함수가 실행됩니다.