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.