내장된 $http 서비스를 사용하여 외부 세계와 직접 통신할 수 있습니다. $http 서비스는 단순히 브라우저의 기본 XMLHttpRequest 객체를 캡슐화합니다. 다음으로 이 글에서는Angularjs의 http 서비스 사용법에 대해 간략하게 소개하겠습니다. 좋아하는 친구들은
을 참고하면 됩니다. 내장된 $http 서비스를 사용하여 외부 세계와 직접 통신할 수 있습니다. $http 서비스는 단순히 브라우저의 기본 XMLHttpRequest 객체를 캡슐화합니다.
1. 체인 호출
$http 서비스는 하나의 매개변수만 허용하는 함수입니다. 이 매개변수는 To를 포함한 객체입니다. HTTP 요청의 구성 콘텐츠를 생성합니다. 이 함수는 성공과 오류라는 두 가지 메서드가 있는 Promise 개체를 반환합니다.
$http({ url:'data.json', method:'GET' }).success(function(data,header,config,status){ //响应成功 }).error(function(data,header,config,status){ //处理响应失败 });
2. Promise 객체 반환
var promise=$http({ method:'GET', url:"data.json" });
$http 메소드는 promise 객체를 반환하므로 응답이 반환될 때 then 메소드를 사용하여 콜백을 처리할 수 있습니다. then 메소드를 사용하면 해당 객체의 성공 또는 실패 정보를 나타내는 특수 매개변수를 얻을 수 있으며 두 개의 선택적 함수를 매개변수로 사용할 수도 있습니다. 또는 대신 성공 및 오류 콜백을 사용할 수 있습니다.
promise.then(function(resp){ //resp是一个响应对象 },function(resp){ //带有错误信息的resp });
또는 다음과 같습니다:
promise.success(function(data,status,config,headers){ //处理成功的响应 }); promise.error(function(data,status,hedaers,config){ //处理失败后的响应 });
then() 메소드와 다른 두 가지 방법 차이점은 완전한 응답 객체를 수신하는 반면, Success() 및 error()는 응답 객체를 파괴한다는 것입니다.
3. 빠른 요청
①$http.get('/api/users.json');
get() 메소드는 HttpPromise 객체를 반환합니다.
예를 들어 delete/head/jsonp/post/put을 보낼 수도 있습니다. 함수에서 허용되는 매개변수에 대한 자세한 내용은 148페이지
②를 참조하세요. jsonp 요청 보내기: JSONP 요청을 보내려면 URL에 JSON_CALLBACK이라는 단어가 포함되어야 합니다.
jsonp(url,config) 여기서 config는 선택 사항입니다
var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");
4. $http를 함수로 사용할 수도 있습니다. 이 경우 XHR 개체 구성 방법을 설명하기 위해 설정 개체를 전달해야 합니다.
$http({ method:'GET', url:'/api/users.json', params:{ 'username':'tan' });
설정 개체에는 다음과 같은 기본 키가 포함될 수 있습니다.
①방법
은 다음과 같습니다. GET/DELETE/HEAD/JSONP/POST/PUT
②url: 절대 또는 상대 요청 대상
③params(문자열 맵 또는 객체)
이 키의 값은 문자열 맵이거나 객체는 쿼리 문자열로 변환되어 URL에 추가됩니다. 값이 문자열이 아닌 경우 JSON 직렬화됩니다.
예:
//参数会转为?name=ari的形式 $http({ params:{'name':'ari'} });
④data(문자열 또는 개체)
이 개체에는 메시지 본문 데이터로 전송될 정보가 포함되어 있습니다. 서버. 일반적으로 POST 요청을 보낼 때 사용됩니다.
AngularJS 1.3부터는 POST 요청으로 바이너리 데이터를 보낼 수도 있습니다. Blob 개체를 보내려면 data 매개변수를 사용하여 간단히 전달하면 됩니다.
예:
var blob=new Blob(['Hello world'],{type:'text/plain'}); $http({ method:'POST', url:'/', data:blob });
4. 응답 개체
AngularJS가 전달됩니다. then( ) 메서드의 응답 개체에는 네 가지 속성이 포함되어 있습니다.
데이터
이 데이터는 변환된 응답 본문을 나타냅니다(변환이 정의된 경우)
상태
응답 HTTP 상태 코드
headers
이 함수는 헤더 정보의 getter 함수이며 하나의 매개변수를 받아 해당 이름을 얻을 수 있습니다. value
예를 들어 X-Auth-ID 값을 얻으려면 다음 코드를 사용합니다.
$http({ method: 'GET', url: '/api/users.json' }).then (resp) { // 读取X-Auth-ID resp.headers('X-Auth-ID'); });
config
이 개체는 원래 요청을 생성하는 데 사용되는 완전한 설정 개체입니다.
statusText(문자열)
이 문자열은 응답의 HTTP 상태 텍스트입니다.
5. HTTP 요청 캐싱
기본적으로 $http 서비스는 요청을 로컬로 캐시하지 않습니다. 개별 요청을 할 때 부울 값이나 캐시 인스턴스를 $http 요청에 전달하여 캐싱을 활성화할 수 있습니다.
$http.get('/api/users.json',{ cache: true }) .success(function(data) {}) .error(function(data) {});
요청이 처음 전송되면 $http 서비스는 /api/users.json에 GET 요청을 보냅니다. 동일한 GET 요청이 두 번째로 전송되면 $http 서비스는 실제로 HTTP GET 요청을 전송하지 않고 캐시에서 요청 결과를 검색합니다.
이 예에서는 캐싱이 활성화되어 있으므로 AngularJS는 기본적으로 $cacheFactory를 사용합니다. 이 서비스는 시작 시 AngularJS에 의해 자동으로 생성됩니다.
AngularJS에서 사용하는 캐시에 대해 더 많은 사용자 지정 제어를 원하는 경우 true 대신 사용자 지정 캐시 인스턴스를 요청에 전달할 수 있습니다.
AngularJS $http 지식에 대해 알려드리겠습니다.
AngularJS $http는 웹 서버의 데이터를 읽는 서비스입니다.
$http.get(url)은 서버 데이터를 읽는 데 사용되는 함수입니다.
AngularJS 예
<p ng-app="myApp" ng-controller="customersCtrl"> <ul> <li ng-repeat="x in names"> {{ x.Name + ', ' + x.Country }} </li> </ul> </p> <script> var app = angular.module('myApp', []); app.controller('customersCtrl', function($scope, $http) { $http.get("http://www.runoob.com/try/angularjs/data/Customers_JSON.php") .success(function(response) {$scope.names = response.records;}); }); </script>
더 많은 관련 튜토리얼을 보려면 JavaScript 기본 튜토리얼