AngularJS http 호출 (완료 구문)

Question

AngularJS 및 에 익숙하다. Ajax와 같은 jQuery를 Angular로 호출하고 전체 구문을 알고 싶다면 누군가가 나를 도와 줄 수 있는지 알고 싶다. 코드 구문.

나는 같은 것을 할 수있는 jQuery를 예를

-

- 지금 여기

$.ajax(
{ 
     url: 'someURL', 
     type: 'POST', 
     async: false, 
     data: 
     { 
      something: something, 
      somethingelse: somethingelse 
     }, 
     beforeSend: function() 
     { 
      $('#someID').addClass('spinner'); 
     }, 
     success: function(response) 
     { 
      $('#someID').removeClass('spinner'); 

      console.log(response);    
     }, 
     complete: function(response) 
     { 
      $('#someID').removeClass('spinner'); 

      console.log(response); 
     }, 
     error: function (errorResp) 
     {  
      console.log(errorResp); 
     } 
}); 

내가, 가능한 모든 옵션, 전체 구문을 구축하는 데 도움이 필요 각도에서 HTTP 호출을 만들기에 발견 무엇

var req = { 

     method: 'POST', 
     url: 'someURL', 
     headers: { 
      'Content-Type': undefined 
     }, 
     data: { 
      //goes in the Payload, if I'm not wrong 
      something: 'something' 
     }, 
     params:{ 
       //goes as Query Params 
       something: 'something', 
       somethingElse: 'somethingElse' 
     } 
} 

$http(req) 
.then(function() 
{ 
    //success function  
}, 
function() 
{ 
    //Error function  
}); 

이제 jQuery와 같은 BeforeSend 함수의 일부 ID에 회 전자를 연결하고 성공시 회 전자를 제거하려면 BeforeSend 또는 http ca를 좋아하는 각도의 방법은 무엇입니까? 비동기입니까?

Answer 1

는 질문을 돕기 위해 여기에 있습니다 eveyrthing된다 https://docs.angularjs.org/api/ng/service/$qhttp://chariotsolutions.com/blog/post/angularjs-corner-using-promises-q-handle-asynchronous-calls/

Answer 2

$ HTTP 기능을 기본적으로 비동기 있습니다.

beforesend 함수와 관련하여 함수에서 http 호출을 래핑하고 호출하기 바로 전에 회 전자를 추가하여 성공 호출에서 제거 할 수 있습니다. 이런 식으로 뭔가,

var makeHttpRequest = function(){ 
    $('#someID').addClass('spinner'); 
    $http(req).then(function(){ 
    $('#someID').removeClass('spinner'); 
    //rest processing for success callback 
    },function(){ 
    $('#someID').removeClass('spinner'); 
    //Error callback 
    }); 
} 

Answer 3

내 각 응용 프로그램에서 복잡한 GET 및 게시물을 구현하는 방법은 다음과 같습니다 :

는 아래와 같이 CRUDService 만들기 :

yourApp.service('CRUDService', function ($q, $http) { 
    this.post = function (value, uri) { 
     var request = $http({ 
      method: "post", 
      url: uri, 
      data: value 
     }); 
     return request; 
    } 

    this.get = function (uri) { 
     var request = $http({ 
      method: "get", 
      url: uri 
     }); 
     return request; 
    } 
}); 

을 당신이 볼 수 있듯이 서비스는 get/post 객체를 리턴한다.

Answer 4

http 호출이 비동기 인 나는이 도움이되기를 바랍니다 :)

$('#exampleButton').button("loading"); //set the element in loading/spinning state here 
var getObj = CRUDService.get("/api/get/something"); 
getObj.then(function(data){ 
    //do something 
    $('#exampleButton').button("reset"); //reset element here 
}, function(err){ 
    //handle error 
    $('#exampleButton').button("loading"); //reset element here 
}); 

$('#exampleButton').button("loading"); //set the element in loading/spinning state here 
var postObj = CRUDService.post(postData,"/api/get/something"); 
postObj.then(function(data){ 
    //do something 
    $('#exampleButton').button("reset"); //reset element here 
}, function(err){ 
    //handle error 
    $('#exampleButton').button("loading"); //reset element here 
}); 

- 당신이 다음 try() 및 catch() 방법으로 처리 할 수있는 promise 반환 어딘가에 내 컨트롤러에서 나는 다음과 같이이 서비스를 사용합니다. 당신은 단순히 통화 즉

function makeRequest() { 
    $scope.showSpinner = true; 
    $http 
    .get('http://www.example.com') 
    .then(function (response) { 
     $scope.showSpinner = false; 
    }) 
    .catch(function (err) { 
     $scope.showSpinner = false; 
    }); 
} 

당신은 당신이 사용자 정의 인터셉터를 밀어 수 jQuery에 가깝다 익숙한 구문을 사용하지만 좋아하면 포장 할 수 있습니다. 이렇게하면 요청과 응답을 차단하고 원하는대로 수행 할 수 있습니다. 아래 예제에서 함수가 정의되어 있으면 함수를 호출합니다.

angular 
 
    .module('app', []) 
 
    .config(appConfig) 
 
    .factory('HttpInterceptors', httpInterceptors) 
 
    .controller('MyController', myController); 
 

 
// app config 
 
appConfig.$inject = ['$httpProvider']; 
 

 
function appConfig($httpProvider) { 
 
    // add out interceptors to the http provider 
 
    $httpProvider.interceptors.push('HttpInterceptors'); 
 
} 
 

 
// http interceptor definition 
 
function httpInterceptors() { 
 
    return { 
 
    request: function(request) { 
 
     if (angular.isFunction(request.beforeSend)) { 
 
     request.beforeSend(); 
 
     } 
 
     return request; 
 
    }, 
 
    response: function(response) { 
 
     if (angular.isFunction(response.config.onComplete)) { 
 
     response.config.onComplete(); 
 
     } 
 
     return response; 
 
    } 
 
    } 
 
} 
 

 
// controlller 
 
myController.$inject = ['$scope', '$http', '$timeout']; 
 

 
function myController($scope, $http, $timeout) { 
 

 
    $scope.showSpinner = false; 
 
    
 
    $http({ 
 
    method: 'GET', 
 
    url: 'https://raw.githubusercontent.com/dart-lang/test/master/LICENSE', 
 
    beforeSend: function() { 
 
     $scope.showSpinner = true; 
 
    }, 
 
    onComplete: function() { 
 
     $timeout(function() { 
 
     console.log('done'); 
 
     $scope.showSpinner = false; 
 
     }, 1000); 
 
    }}) 
 
    .then(function(response) { 
 
     console.log('success'); 
 
    }) 
 
    .catch(function(err) { 
 
     console.error('fail'); 
 
    }); 
 
}

.spinner { 
 
background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
 

 
<div ng-app='app' ng-controller='MyController'> 
 
    <div ng-class='{spinner: showSpinner}'> 
 
    Hello World! 
 
    </div> 
 
</div>

Answer 5

각도도 : 당신이 더 나은 제어 할 수 있습니다. 두 가지 방법을 선택할 수 있습니다.

1.포장 $ HTTP

당신은 당신이 그런 때마다이 함수를 호출 할 수 있습니다 요청

app.factory('httpService',function($http){ 
    function beginRequest() {}; 
    function afterRequest() {}; 
    return { 
     makeRequest: function(requestConfig){ 
      beginRequest(); 
      return $http(requestConfig).then(function(result){ 
       afterRequest(result); 
      }); 
     } 
    }  
}) 

만든 전후 몇 가지 방법을 추가 할 $ HTTP의 래퍼를 사용 하여 각 요청에 대해 쓸 수 있습니다 요청하십시오. 이것은 새로운 것이 아닙니다. 인터셉터

각도가 모든 요청을 처리하는 더 나은 방법이 사용

2. 그것은 이라는 새로운 개념의 'interceptor'을 사용합니다. 인터셉터를 일반적인 서비스로 작성하고 하나 이상의 인터셉터를 $ http 서비스에 넣고 인터셉터의 유형에 의존하면 요청이 발생할 때마다 호출됩니다. 인터셉터에 대해 생각이 사진을 봐 :

수 있습니다 요격을위한 몇 가지 일반적인 작업 : 요청을 확인, 같은 토큰 키로의 HTTP 설정에 좀 더 장식을 추가, 로딩 아이콘을 제거/추가 데이터를 응답의 유효성을 검사,

: 여기

이

app.service('APIInterceptor', function($rootScope, UserService) { 
    var service = this; 

    service.request = function(config) { 
     var currentUser = UserService.getCurrentUser(), 
      access_token = currentUser ? currentUser.access_token : null; 

     if (access_token) { 
      config.headers.authorization = access_token; 
     } 
     return config; 
    }; 

    service.responseError = function(response) { 
     return response; 
    }; 
}) 

은 그런 다음 $의 HTTP에 인터셉터를 추가 요청의 헤더에 토큰 키를 추가 인터셉터의 예입니다 ... 어떤 요청을 복구

이제 모든 요청에 ​​헤더에 토큰 키가 추가됩니다. 괜찮아?

자세한 내용은 here를 참조하십시오