AngularJS $ http 및 $ resource


257

전화를 걸고 싶은 웹 서비스가 있습니다. $resource또는 $http어떤 것을 사용해야합니까?

$resource: https://docs.angularjs.org/api/ngResource/service/$resource

$http: https://docs.angularjs.org/api/ng/service/$http

위의 두 API 페이지를 읽은 후에는 길을 잃었습니다.

차이점이 무엇이고 어떤 상황에서 사용해야하는지 일반 영어로 설명해 주시겠습니까? 이러한 호출을 구조화하고 결과를 js 객체로 올바르게 읽는 방법은 무엇입니까?


25
$ resource는 $ http를 기반으로하며 기본 통신에서 추가 추상화를 제공합니다. $ resource 패턴을 따르는 REST 엔드 포인트도 필요합니다. 당신이 요구하고 있기 때문에, 나의 제안은 $ http로 시작하고, 잘 알고, 나중에 $ resource로 옮길 수 있는지 알아 보는 것입니다.
David Riccitelli

4
답변 해주셔서 감사합니다. 그렇다면 어떤 상황에서 $ http가 API에 대해 잘 알고있는 것보다 $ resource보다 선호됩니까?
Tom

답변:


168

$http범용 AJAX입니다. 대부분의 경우 이것이 당신이 사용할 것입니다. 으로 $http당신이 만드는거야 GET, POST, DELETE유형은 수동으로 호출하고 처리들은 자신의 수익 객체.

$resource$httpRESTful 웹 API 시나리오에서 사용하기 위해 랩 합니다.


매우 일반적 : 편안한 웹 서비스는 방법이 좋아 HTTP를 기반으로 데이터 유형과 다른 일을하는 데이터 유형에 대한 하나의 엔드 포인트와 서비스가 될 것입니다 GET, POST, PUT, DELETE, 등 그래서이 함께 $resource, 당신이 호출 할 수 있습니다 GET리소스를 얻을 수 JavaScript 객체로 변경 한 다음을 사용하여 다시 보내 POST거나로 삭제하십시오 DELETE.

... 그렇다면 말이됩니다.


1
따라서 $ resource는 편안한 서비스를 처리합니다. 즉, 일반 웹 서비스를 호출하는 데 사용될 수 있습니까? POST DELETE PUT을 가져옵니다. 그렇다면 어떤 상황에서 $ http가 $ resource보다 선호됩니까?
Tom

7
진정으로 편안한 엔드 포인트를 다루지 않는 경우가 있습니다. 예를 들어 엔드 포인트가 GET 만 허용 한 경우 필요하지 않은 많은 기능을 추가합니다.
벤 레시

@blesh의 사용 때문에 $resource단지 관용적 / 좋은 경우 REST 엔드 포인트 지원 될 서비스를 GET, POST, DELETE ? docs ( docs.angularjs.org/api/ngResource.$resource )는이 3 개의 REST 메소드를 사용하여 표시 함을 보여줍니다 $resource.
케빈 메러디스

9
@ KevinMeredith : 또는 여러 가지 방법. 당신은 추가 할 수 있습니다 PUT또는 다른 어떤 당신이 좋아 것 GET, POST그리고 DELETE그냥 기본값입니다. 둘 이상의 HTTP 메소드에 대해 동일한 자원 (중요)을 처리하는 엔드 포인트 $resource가있는 경우 좋은 선택입니다.
벤 레시

비 RESTful 엔드 포인트에서도 GET 및 QUERY 유형 데이터에 $ resource를 사용하는 것이 편리하다는 것을 알았습니다. 라우팅 및 바인딩에 .$promise잘 작동 하는 방식이 주어 resolve집니다.
케빈

210

다른 답변은 정확하지만 질문의 근본을 설명하지 못한다고 생각합니다. REST 의 하위 집합입니다 HTTP. 를 통해 수행 할 수 있습니다이 방법의 모든 것을 REST통해 수행 할 수 있습니다 HTTP통해 할 수있는 모든 있지만 HTTP통해 수행 할 수 있습니다 REST. 이것이 내부적으로 $resource사용 되는 이유 $http입니다.

그래서 언제 서로를 사용해야합니까?

필요한 모든 것 REST, 즉 RESTful웹 서비스 에 액세스하려는 경우 $resource해당 웹 서비스와 상호 작용하기가 매우 쉬워집니다.

대신 RESTful웹 서비스 가 아닌 모든 것에 액세스하려고하면와 가야합니다 $http. RESTful를 통해 웹 서비스에 액세스 할 수도 있습니다.를 사용하는 $http것보다 훨씬 번거로울 것입니다 $resource. 이것은 대부분의 사람들이 jQuery.ajax(Angular와 동등한)을 사용하여 AngularJS 외부에서 수행 한 방식 $http입니다.


21
좋은 대답, 이것은 위에 하나가 아니라 받아 들여야합니다
Andrzej Rehmann

2
RESTful을 호출하는 세 가지 방법이 있다는 것을 의미합니까 ?? $ resource, $ http 및 jquery.ajax 사용하면 맞습니까?
Jake Huang

4
@JakeHuang 라이브러리 없이도 호출 할 수 있습니다. 무한한 방법이 있습니다. 방금 AngularJS 세계에서 가장 인기있는 2 가지 접근법과 그 밖의 가장 일반적인 접근법을 공개했습니다.
bluehallu

AngularJS에서 가장 인기있는 2 가지 접근법이 무엇인지 알 수 있습니까? : p
Jake Huang

41

$http범용 AJAX 호출을 작성합니다. 일반적으로 RESTful api plus Non-RESTful을 포함 할 수 있음을 의미합니다. api를 .

그리고 $resource그것을 위해 전문 의 RESTful 부분.

편안한 API프로그래머가 구성하는 임의의 URL 대신 URL이 더 잘 구성되어 있기 때문에 최근 몇 년 동안 가 널리 보급되었습니다.

RESTful API 를 사용 하여 URL을 구성하면 다음과 같습니다./api/cars/:carId .

$resource 데이터를 가져 오는 방법

angular.module('myApp', ['ngResource'])

    // Service
    .factory('FooService', ['$resource', function($resource) {
        return $resource('/api/cars/:carId')
    }]);

    // Controller
    .controller('MainController', ['FooService', function(FooService){
        var self = this;
        self.cars = FooService.query();
        self.myCar = FooService.get('123');

    }]);

이것은 당신에게 줄 것이다 자원 객체 와 동반, get, save, query, remove,delete 자동 방법을.

$http 데이터를 가져 오는 방법

angular.module('myApp', [])

    // Service
    .factory('FooService', ['$http', function($http){
        return {
            query: function(){
                return $http.get('/api/cars');
            },

            get: function(){
                return $http.get('/api/cars/123');
            }
            // etc...
        }

RESTFul API 에서 각 공통 작업을 정의하는 방법을 참조하십시오 . 또 하나 개의 차이는 있습니다 $http반환 promise동안 $resource반환하는 객체입니다. Angular가 restangular 와 같은 RESTFul API를 처리하는 데 도움이되는 타사 플러그인도 있습니다


경우 API는 같은 것입니다 /api/getcarsinfo. 우리에게 남은 것은 모두 사용하는 것 $http입니다.


4
이것은 정답자입니다.
Royi Namir

1
만약 API라면, /api/getcarsinfo여전히 사용할 수있을 것 같습니다$resource
kittu

1
이것은 정답자입니다. "또한 $ http는 약속을 반환하지만 $ resource는 객체를 반환합니다"라는 한 가지 차이점이 있습니다. 1- $ resource와 함께 .then을 사용할 필요가 없음을 의미합니까? 2-또한 프론트 엔드 사람으로서 이것은 어리석은 소리가 들릴 수 있습니다 .API가 편안하지 않은지 어떻게 알 수 있습니까? 감사합니다
shireef khatab

1
@shireefkhatab 1. 예. $ resource는 RESTFul API connivence에 대한 $ http의 상위 레벨 추상화입니다. 문서의 예를 보여줍니다 방법을 사용합니다. 2. 백엔드 사용자가 URL을 디자인하는 방식에 전적으로 달려 있습니다. 만약 그가 RESTFul api 패러다임을 따르기를 원한다면, 당신은 가고 있습니다
Qiang

30

나는 대답이 더 사람에 따라 생각 코드를 작성하는 시점에 있습니다. 필요한 이유를 알 때까지 Angular를 처음 사용하는 $http경우 사용하십시오 $resource. 당신은 방법의 구체적인 경험이있을 때까지 $http당신을 들고있다, 당신은 사용의 의미 이해 $resource코드 로, 스틱 $http.

이것은 내 경험이었습니다. 첫 번째 Angular 프로젝트를 시작했고 RESTful 인터페이스에 HTTP 요청을해야했기 때문에 지금하는 것과 동일한 조사를 수행했습니다. 이와 같은 SO 질문에서 읽은 토론을 바탕으로와 함께 선택했습니다 $resource. 이것은 내가 취소 할 수있는 실수였습니다. 이유는 다음과 같습니다.

  1. $http예제는 풍부하고 도움이되며 일반적으로 필요한 것입니다. 명확한 $resource예는 드물며 (내 경험상) 거의 모든 것이 필요하지 않습니다. Angular 초보자에게는 문서에 대해 수수께끼를 풀고 도움이되는 유용한 $resource예를 찾을 수 없다는 화가 나올 때까지 선택의 의미를 알지 못합니다 .
  2. $http아마 당신이 찾고있는 일대일 정신지도입니다. 당신이 가진 것을 이해하기 위해 새로운 개념을 배울 필요가 없습니다 $http. $resource아직 정신지도가없는 많은 뉘앙스를 가져옵니다.
  3. 새로운 개념을 배울 필요가 없다고 말했습니까? 각도 초보자로서 당신은 약속에 대해 배울 수있다. $http약속을 반환하고 .then가능하므로 Angular와 약속에 대해 배우는 새로운 것들과 잘 맞습니다. $resource직접 약속을 반환하지 않는 앵귤러 기본에 대한 잠정적 인 이해가 복잡해집니다.
  4. $resourceRESTful CRUD 호출 코드와 입력 및 출력 변환을 압축하기 때문에 강력합니다. $http자신 의 결과를 처리하기 위해 반복적으로 코드를 작성하는 데 어려움이 있다면 좋습니다 . 다른 사람 $resource에게는 혼란스러운 구문과 매개 변수 전달의 암호화 계층을 추가합니다.

저는 3 개월 전에 저를 알고 있었으면 좋겠다고 강조했습니다. " $http아이와 함께하십시오 . 괜찮습니다."


1
나는 당신의 대답, 특히 마지막 줄을 좋아합니다. 나는 현재 $ resource 대 $ http를 사용하고 있습니다. 내가 추가 할 한 가지 사실은 $ resource가 실제로 매우 편리하고 또는 같은 API 명사를 사용할 때 실제로 도움이된다는 것 입니다. 일단 이동하면 동사 별로 $ resource URL 및 매개 변수를 수정해야 하며 그 시점에서 $ http를 사용할 수도 있습니다. /user/:userId/thing/users/roles/:roleId
coblr

3
내 자신의 답변에 대해 의견을 말하면 정신 분열증이라고 부르십시오. 그러나 나는 더 최근의 경험을 언급 할 것이라고 생각했습니다. 나는 장소에서 제거 $resource하고 전환하기 위해 리팩토링했습니다 $http. 내가 한번도 만나지 않았 으면하는 바램을 충분히 강조 할 수는 없습니다 $resource. 나는 아마도 $resource몇 달 동안 의 뉘앙스를 쫓는 데 일주일 이상을 낭비했을 것입니다 . $http너무 쉽고 간단하며 $resource, 학습 곡선에 의해 얻을 수있는 모든 이득 이 완전히 사라졌습니다.
Matthew Marichiba

24

$ resource는 객체 또는 배열이 원시 문자열이 아닌 서버의 응답으로 예상된다는 것을 강조하는 것이 중요하다고 생각합니다. 따라서 원시 문자열 (또는 객체 및 배열을 제외한 모든 것)을 응답으로 사용하는 경우 $ http를 사용해야합니다


그것은 $ http가 객체와 배열을 지원하지 않는다는 것을 의미합니까? 명확히하고 싶었습니다.
Shardul

나는 $ http가 객체, 배열 및 문자열을 지원한다고 생각합니다. 그래도 확인이 필요합니다
Katana24

@Shardul, 나는 $ http가 모든 종류의 응답을 다루지 만 $ resource는 객체와 배열 만 다루는 것으로 이해했습니다.
shireef khatab

사실이 아니라면, 여전히 문자열을 반환하기 위해 $ resource를 사용할 수 있습니다. 프론트 엔드 코드에서 'transformResponse'를 사용하여 리턴 된 문자열을 오브젝트로 랩핑하십시오.
Terry Deng

7

사이는 선택 올 때 $http또는 $resource이 본질적으로 더 정답이없는 모두 같은 행동을 할 것입니다 기술적으로 말하기.

의 목적은 $resource당신이 매개 변수의 값과 함께 템플릿 문자열 (자리 표시자를 포함 된 문자열을) 통과 할 수 있도록하는 것입니다. 템플릿 문자열 $resource자리 표시자를 개체로 전달되는 매개 변수 값으로 바꿉니다. URL을 정의하기 위해 유사한 원칙을 사용하므로 RESTFul 데이터 소스와 상호 작용할 때 주로 유용합니다.

어떤 $http일은 비동기 HTTP 요청을 수행하는 것입니다.


1
이것은 $ http가 $ resource의 요청에 영향을 미치고 본질적으로 동일한 일을한다는 점을 지적하기 때문에 좋은 대답입니다.
coblr

@Dalorzo 그래서 당신은 $resource비동기 적으로 수행 할 수 없다고 말하는가 ? 명확하게 설명하고
싶음

아니요, 제가 지적한 것은 결국 $http비동기 HTTP 요청을 수행하는 가장 간단한 방법이며 $resource본질적으로 동일하지만 다른 매개 변수를 사용하는 것입니다.
Dalorzo

2

자원 서비스는 REST APSI 작업에 유용한 서비스입니다. 그것을 사용할 때 CRUD 메소드를 작성하지 않습니다 (생성, 읽기, 업데이트 및 삭제)

내가 아는 한, 자원 서비스는 지름길입니다 .http 서비스로 무엇이든 할 수 있습니다.


$ 리소스를 바로 가기로 분류할지 잘 모르겠습니다. $ http의 래퍼이므로 $ http를 직접 사용하는 것이 "더 짧습니다". $ http를 사용할 때 잠재적으로 적은 코드를 갖도록 $ http를 구성하는 방법입니다. 하나의 경우$http.get('/path/to/thing', params)myResource.get(params)더하기에 대한 구성을 실제로 수행합니다 myResource. 더 많은 코드가 앞에 있으며 동일한 API 명사 로만 수영 할 수 있습니다. 그렇지 않으면 $ http를 사용하는 것처럼 코딩합니다.
coblr

2

$ http를 통해 $ resource를 사용할 때주의해야 할 점은 .net에서 Web API를 사용하는 경우입니다.

$ resource는 단일 목적을 실행하는 하나의 컨트롤러에 묶여 있습니다.

$ resource ( '/ user / : userId', {userId : '@ id'});

[HttpGet]
public bool Get(int id)
{
    return "value"
}

public void Post([FromBody]string value)
{
}

public void Put(int id, [FromBody]string value)
{
}

public void Delete(int id)
{
}

$ http는 무엇이든 될 수 있습니다. URL을 지정하십시오.

$ http.get- "api / authenticate"

[HttpGet]
public bool Authenticate(string email, string password)
{
    return _authenticationService.LogIn(email, password, false);
}

그냥 내 의견 일뿐입니다.


0

$ resource 서비스는 현재 약속을 지원하지 않으므로 $ http 서비스와는 다른 인터페이스를 가지고 있습니다.


1
$ resource 서비스는 약속을 지원하지만 $ http와 같이 $ promise를 직접 반환하지는 않습니다. 당신은 당신이하는 var myResource = $resource(...config...);다른 곳이나 다른 곳에서 return myResource.get(..params...)그렇게해야합니다.var save = myResource.save(); save.$promise.then(...fn...); return save;
coblr
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.