웹 프론트엔드 JS 튜토리얼 AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명

AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명

May 21, 2018 pm 01:53 PM
angularjs javascript 사용방법

이번에는 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中文网其它相关文章!

推荐阅读:

php生成随机数字、字母或数字字母混合的字符串

nginx内php动态裁剪图片步骤详解

위 내용은 AngularJS에서 $http 서비스를 사용하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DirectX 복구 도구를 사용하는 방법은 무엇입니까? DirectX 복구 도구의 자세한 사용법 DirectX 복구 도구를 사용하는 방법은 무엇입니까? DirectX 복구 도구의 자세한 사용법 Mar 15, 2024 am 08:31 AM

DirectX 복구 도구는 현재 시스템의 DirectX 상태를 감지하는 전문 시스템 도구로, 이상이 발견되면 직접 복구할 수 있습니다. DirectX 복구 도구를 사용하는 방법을 모르는 사용자가 많을 수 있습니다. 아래의 자세한 튜토리얼을 살펴보겠습니다. 1. 수리 도구 소프트웨어를 사용하여 수리 감지를 수행합니다. 2. 복구가 완료된 후 C++ 구성 요소에 비정상적인 문제가 있다는 메시지가 나타나면 취소 버튼을 클릭한 후 도구 메뉴 표시줄을 클릭하세요. 3. 옵션 버튼을 클릭하고 확장을 선택한 후 확장 시작 버튼을 클릭합니다. 4. 확장이 완료된 후 다시 감지하여 수리합니다. 5. 복구 도구 작업을 완료한 후에도 문제가 여전히 해결되지 않으면 오류를 보고한 프로그램을 제거하고 다시 설치해 볼 수 있습니다.

HTTP 525 상태 코드 소개: 정의 및 적용 살펴보기 HTTP 525 상태 코드 소개: 정의 및 적용 살펴보기 Feb 18, 2024 pm 10:12 PM

HTTP 525 상태 코드 소개: 정의 및 사용법 이해 HTTP(HypertextTransferProtocol) 525 상태 코드는 SSL 핸드셰이크 프로세스 중에 서버에 오류가 발생하여 보안 연결을 설정할 수 없음을 의미합니다. TLS(전송 계층 보안) 핸드셰이크 중에 오류가 발생하면 서버는 이 상태 코드를 반환합니다. 이 상태 코드는 서버 오류 범주에 속하며 일반적으로 서버 구성 또는 설정 문제를 나타냅니다. 클라이언트가 HTTPS를 통해 서버에 연결을 시도하면 서버에는 아무 것도 없습니다.

바이두 넷디스크 사용법-바이두 넷디스크 사용법 바이두 넷디스크 사용법-바이두 넷디스크 사용법 Mar 04, 2024 pm 09:28 PM

아직도 Baidu Netdisk 사용법을 모르는 친구들이 많으므로 아래에서 편집자가 Baidu Netdisk 사용법을 설명해 드리겠습니다. 필요하신 분들은 서둘러서 살펴보시면 도움이 될 것입니다. 1단계: Baidu Netdisk를 설치한 후 직접 로그인합니다(그림 참조). 2단계: 그런 다음 페이지 프롬프트에 따라 "내 공유" 및 "전송 목록"을 선택합니다(그림 참조). 친구 공유"를 사용하면 사진과 파일을 친구들과 직접 공유할 수 있습니다(그림 참조). 4단계: 그런 다음 "공유"를 선택한 다음 컴퓨터 파일이나 네트워크 디스크 파일을 선택합니다(그림 참조). 다섯 번째 1단계: 그런 다음 친구를 찾을 수 있습니다(그림 참조). 6단계: "기능 보물 상자"(그림 참조)에서 필요한 기능을 찾을 수도 있습니다. 위 내용은 편집자의 의견입니다.

빠르게 복사하여 붙여넣는 방법 알아보기 빠르게 복사하여 붙여넣는 방법 알아보기 Feb 18, 2024 pm 03:25 PM

복사-붙여넣기 단축키 사용 방법 복사-붙여넣기는 매일 컴퓨터를 사용할 때 자주 접하게 되는 작업입니다. 업무 효율을 높이기 위해서는 복사, 붙여넣기 단축키를 익히는 것이 매우 중요합니다. 이 기사에서는 독자가 복사 및 붙여넣기 작업을 보다 편리하게 수행할 수 있도록 일반적으로 사용되는 복사 및 붙여넣기 바로 가기 키를 소개합니다. 복사 단축키: Ctrl+CCtrl+C는 복사 단축키입니다. Ctrl 키를 누른 상태에서 C 키를 누르면 선택한 텍스트, 파일, 그림 등을 클립보드에 복사할 수 있습니다. 이 단축키를 사용하려면

KMS 활성화 도구란 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구란 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? KMS 활성화 도구를 사용하는 방법은 무엇입니까? Mar 18, 2024 am 11:07 AM

KMS 정품 인증 도구는 Microsoft Windows 및 Office 제품을 정품 인증하는 데 사용되는 소프트웨어 도구입니다. KMS는 KeyManagementService의 약자로 키 관리 서비스입니다. KMS 정품 인증 도구는 컴퓨터가 가상 KMS 서버에 연결하여 Windows 및 Office 제품을 정품 인증할 수 있도록 KMS 서버의 기능을 시뮬레이션합니다. KMS 활성화 도구는 크기가 작고 기능이 강력합니다. 한 번의 클릭으로 영구적으로 활성화할 수 있으며, 인터넷에 연결하지 않고도 모든 버전의 Windows 시스템과 Office 소프트웨어를 활성화할 수 있습니다. 그리고 자주 업데이트되는 Windows 정품 인증 도구를 소개하겠습니다. KMS 정품 인증 작업을 소개하겠습니다.

Xiaoma win7 활성화 도구 사용 방법 - Xiaoma win7 활성화 도구 사용 방법 Xiaoma win7 활성화 도구 사용 방법 - Xiaoma win7 활성화 도구 사용 방법 Mar 04, 2024 pm 06:16 PM

많은 사용자들이 Xiaoma win7 활성화 도구를 사용하고 있다고 생각합니다. 그런데 Xiaoma win7 활성화 도구를 사용하는 방법을 알고 계시나요? 그렇다면, 이에 관심이 있는 분들을 위해 편집자가 Xiaoma win7 활성화 도구 사용 방법을 알려드릴 것입니다. 다음 기사를 보러 오세요. 첫 번째 단계는 시스템을 재설치한 후 "내 컴퓨터"로 이동하여 상단 메뉴의 "시스템 속성"을 클릭하고 Windows 정품 인증 상태를 확인하는 것입니다. 두 번째 단계에서는 클릭하여 온라인으로 win7 활성화 도구를 다운로드하고 클릭하여 엽니다(어디서나 많은 리소스를 사용할 수 있음). 세 번째 단계는 Xiaoma 활성화 도구를 열고 "Windows 영구 활성화"를 클릭하는 것입니다. 네 번째 단계는 활성화 프로세스가 활성화를 완료할 때까지 기다리는 것입니다. 5단계: Windows 정품 인증 상태를 다시 확인하여 시스템이 정품 인증되었는지 확인합니다.

PyCharm이란 무엇입니까? 기능 소개 및 자세한 사용법 설명 PyCharm이란 무엇입니까? 기능 소개 및 자세한 사용법 설명 Feb 20, 2024 am 09:21 AM

PyCharm은 JetBrains에서 개발한 전문적인 Python 통합 개발 환경(IDE)입니다. Python 개발자에게 강력한 기능과 도구를 제공하여 Python 코드를 보다 효율적이고 편리하게 작성할 수 있습니다. PyCharm은 Windows, macOS, Linux를 포함한 여러 운영 체제를 지원하고 여러 Python 버전도 지원하며 개발자가 자신의 필요에 따라 IDE 환경을 사용자 정의할 수 있도록 다양한 플러그인과 확장 기능을 제공합니다. 피

단축키를 사용하여 셀을 병합하는 방법 단축키를 사용하여 셀을 병합하는 방법 Feb 26, 2024 am 10:27 AM

셀 병합에 단축키를 사용하는 방법 일상 업무에서 테이블을 편집하고 서식을 지정해야 하는 경우가 많습니다. 셀 병합은 인접한 여러 셀을 하나의 셀로 병합하여 테이블의 아름다움과 정보 표시 효과를 향상시킬 수 있는 일반적인 작업입니다. Microsoft Excel 및 Google Sheets와 같은 주류 스프레드시트 소프트웨어에서 셀 병합 작업은 매우 간단하며 단축키를 통해 수행할 수 있습니다. 다음은 이 두 소프트웨어에서 셀을 병합하는 단축키 사용법을 소개합니다. 존재하다

See all articles