AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-05-21 13:53:382363검색
이번에는 AngularJS에서 $http 서비스를 사용하는 방법에 대해 자세히 설명하겠습니다. AngularJS의 $http 서비스 Notes는 무엇입니까?
내장된 $http 서비스를 사용하여 외부 세계와 직접 통신할 수 있습니다. $http 서비스는 단순히 브라우저의 기본 XMLHttpRequest 객체를 캡슐화합니다.
1. 체인 호출
$http 서비스는 하나의 매개변수만 허용하는 함수입니다. 이 매개변수는 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'
});
설정 개체에는 다음과 같은 기본 키가 포함될 수 있습니다.
1method
다음과 같을 수 있습니다: GET/DELETE/HEAD/JSONP/POST/PUT
2url: 절대 또는 상대 요청 대상
3params(문자 문자열 맵 또는 객체)
이 키의 값은 문자열 맵 또는 객체이며, 이는 쿼리 문자열로 변환되어 URL에 추가됩니다. 값이 문자열이 아닌 경우 JSON 직렬화됩니다.
예:
//参数会转为？name=ari的形式
$http({
params:{'name':'ari'}
});
4data(문자열 또는 개체)
이 개체에는 메시지 본문으로 서버에 전송될 데이터가 포함되어 있습니다. 일반적으로 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() 메서드에 전달한 응답 개체에는 네 가지 속성이 포함되어 있습니다.
◇data: 이 데이터는 변환된 응답 본문을 나타냅니다(변환이 정의된 경우)
◇status: 응답의 HTTP 상태 코드
◇headers: 이 함수는 헤더 정보의 getter 함수이며 허용될 수 있습니다. 해당 이름 값을 얻는 데 사용되는 하나의 매개변수
예를 들어 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。
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!