Angular ' s $ http 서비스를 사용하여 API 호출

이 기사에서는 AngularJS를 사용하여 HTTP 요청을 원격 API에 요청하고 JSON 응답으로보기를 업데이트하는 방법을 보여줍니다. Angular의 서비스 및 데이터 바인딩을 활용합니다 주요 개념 : $http

: 쿼리 문자열을 포함하여 API에 요청을 보내는 데 사용되었습니다. 응답은 모델에 저장됩니다 (이 예에서는

및

).
• with : $http.get>이 경우 모델 업데이트 (이 경우 800ms)를 지연시켜 과도한 API 호출을 방지합니다. 서비스 : details 변경 사항에 대한 related 모델을 모니터링하여 데이터 가져 오기를 유발합니다.
:
• 의 약속 /. error () 메소드 대신 약속을 사용하여 현대 오류 처리 프로젝트 구조 및 코드 하이라이트 : ngModelOptions 이 프로젝트는 모듈 식 구조 (CSS, JS, PARTIALS, Index.html)를 사용합니다. 는 검색 입력 ( 및 가있는 debounce 모델에 바인딩)과 부분 뷰 ( 및 )를로드하기위한 지시문을 포함합니다. 핵심 논리는
, 특히
• 에 있습니다. 라인은 분해 기간 후 검색 입력이 변경 될 때마다 함수가 호출되도록합니다. $watch는 를 사용하여 OMDB API로 두 개의 API 호출 (메인 영화 세부 사항, 관련 영화 용)을 작성합니다. 그런 다음 응답은 search 및
에 할당됩니다. 기능은 관련 영화 제목을 클릭하여 모델을 업데이트합니다. 부분 뷰 ( 및
• )는 Angular의 데이터 바인딩을 사용하여 영화 정보를 표시합니다. 에는 로딩 상태 및 누락 된 포스터 이미지를 처리하기위한 조건부 논리 ()가 포함됩니다. 는 를 사용하여 관련 영화를 통해 반복하고 클릭하면 를 호출합니다. 개선 및 업데이트 : 이 기사는 다음을 포함하여 2016-01-17에서 작성된 업데이트를 참고합니다 .then() 를 .success() debounce로 대체하고 .
약속 처리를 위해

를 사용하도록 업데이트 깨진 포스터 이미지 수정.

예제 코드 스 니펫 :

• 및 ng-model in ng-model-options : index.html

<code class="language-html"><input type="text" ng-model="search" ng-model-options="{ debounce: 800 }" placeholder="Enter full movie name"></code>

• 함수 : fetch() app.js

<code class="language-javascript">function fetch() {
  $http.get("http://www.omdbapi.com/?t=" + $scope.search + "&tomatoes=true&plot=full")
    .then(function(response) { $scope.details = response.data; });

  $http.get("http://www.omdbapi.com/?s=" + $scope.search)
    .then(function(response) { $scope.related = response.data; });
}</code>

조건부 이미지 로딩

:
• 이 기사는 AngularJS HTTP 서비스 및 API 통화, 오류 처리, 요청 취소, 데이터 전송, 헤더 설정, JSONP, 요청/응답 변환, 캐싱, 동기 요청 및 전역 오류 처리에 관한 자주 묻는 질문에 대한 섹션으로 마무리됩니다. . 코드 펜 데모도 링크됩니다. main-info.html

위 내용은 Angular ' s $ http 서비스를 사용하여 API 호출의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!