AngularJS $ http i $ zasób

257

Mam usługi sieciowe, do których chcę zadzwonić. $resourcelub $httpktórego powinienem użyć?

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

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

Po przeczytaniu dwóch powyższych stron interfejsu API zgubiłem się.

Czy możesz mi wyjaśnić prostym językiem angielskim, jaka jest różnica iw jakiej sytuacji powinienem ich użyć? Jak uporządkować te wywołania i poprawnie odczytać wyniki w obiektach js?

Tomek
źródło
25
Zasób $ jest zbudowany na $ http i zapewnia dalszą abstrakcję z podstawowej komunikacji. Wymaga również punktu końcowego REST, który jest zgodny ze wzorcami zasobów $. Ponieważ pytasz, proponuję zacząć od $ http, zapoznać się, a następnie sprawdzić, czy możesz przejść na $ resource.
David Riccitelli,
4
Dziękuję za odpowiedź. Więc w jakiej sytuacji $ http jest zawsze preferowany nad $ zasobem oprócz tego, że mogę zapoznać się z interfejsem API?
Tom

Odpowiedzi:

168

$httpjest do ogólnego zastosowania AJAX. W większości przypadków będziesz tego używać. Z $httpidziesz do tworzenia GET, POST, DELETEtyp połączenia ręcznie i przetwarzania obiektów wrócą na własną rękę.

$resourceokłady $httpdo użytku w scenariuszach interfejsu API sieci Web RESTful.


Mówiąc bardzo ogólnie: serwis internetowy spokojny będzie serwis z jednego punktu końcowego dla typu danych, który robi różne rzeczy z tego typu danych w oparciu o metody HTTP podoba GET, POST, PUT, DELETE, itd. Tak więc z $resource, można nazwać to GET, aby uzyskać zasób jako obiekt JavaScript, a następnie zmień go i odeślij za pomocą POST, a nawet usuń za pomocą DELETE.

... Jeśli to ma sens.

Ben Lesh
źródło
1
Więc $ zasób obsługuje usługi Restful, co oznacza, że ​​można go również używać do wywoływania normalnych usług sieciowych? Ponieważ robi to POBIERZ POST USUŃ WSZYSTKO. Więc w jakiej sytuacji $ http jest zawsze preferowane nad $ resource?
Tom
7
Naprawdę za każdym razem, gdy nie masz do czynienia z naprawdę spokojnym punktem końcowym. Dodaje wiele funkcji, których nie potrzebujesz, na przykład, jeśli Twój punkt końcowy zezwala tylko na GET.
Ben Lesh,
@blesh, więc korzystanie z $resourceusługi będzie jedynie idiomatyczne / dobrze, jeśli podpory końcowych REST GET, POST, i DELETE ? Dokumenty ( docs.quarejs.org/api/ngResource.$resource ) pokazują, że otrzymujesz te 3 metody REST $resource.
Kevin Meredith,
9
@KevinMeredith: Lub dowolna liczba metod. Można dodać PUTlub cokolwiek innego chcesz, GET, POSTi DELETEsą tylko domyślne. Jeśli masz punkt końcowy, który zajmuje się tym samym zasobem (to ważne) dla więcej niż jednej metody HTTP, $resourceto dobry wybór.
Ben Lesh
Nawet dla punktu końcowego bez RESTful uznałem, że wygodnie jest używać zasobu $ do danych typu GET i QUERY. Biorąc pod uwagę sposób, w jaki .$promisedziała dobrze resolvedla routingu i wiązania.
Kevin
210

Wydaje mi się, że inne odpowiedzi, choć poprawne, nie wyjaśniają źródła pytania: RESTjest podzbiorem HTTP. Oznacza to, że wszystko, co można zrobić, RESTmożna zrobić, HTTPale nie wszystko, co można zrobić, HTTPmożna zrobić za pośrednictwem REST. Dlatego $resourceużywa $httpwewnętrznie.

Kiedy więc się nawzajem używać?

Jeśli wszystko, czego potrzebujesz REST, to znaczy, że próbujesz uzyskać dostęp do RESTfulusługi sieci web, $resourceułatwi to interakcję z tą usługą.

Jeśli zamiast tego próbujesz uzyskać dostęp do WSZYSTKIEGO, co nie jest RESTfulusługą internetową, musisz iść z tym $http. Pamiętaj, że możesz również uzyskać dostęp do RESTfulusługi internetowej za pośrednictwem $http, będzie to o wiele bardziej kłopotliwe niż z $resource. W ten sposób większość ludzi robi to poza AngularJS, używając jQuery.ajax(odpowiednik Angulara $http).

bluehallu
źródło
21
fajna odpowiedź, należy to zaakceptować, nie tę na wierzchu
Andrzej Rehmann
2
Oznacza to, że mamy trzy sposoby na wywołanie RESTful? Korzystając z $ resource, $ http i jquery.ajax, mam rację?
Jake Huang
4
@JakeHuang Możesz to nazwać nawet bez biblioteki, istnieją nieskończone sposoby, aby to zrobić. Właśnie pokazałem 2 najpopularniejsze podejścia w świecie AngularJS i najbardziej popularne podejście poza nim.
bluehallu
Czy mogę wiedzieć, jakie są 2 najpopularniejsze podejścia w AngularJS? : p
Jake Huang
41

$httpsprawia ogólnego zastosowania AJAX rozmowę, w której ogólny środek może zawierać REST API plusa dla REST API.

i $resourcespecjalizuje się w tej części RESTful .

Restful Api zaczęło dominować w ostatnich latach, ponieważ adres URL jest lepiej zorganizowany zamiast losowego adresu utworzonego przez programistów.

Jeśli użyję interfejsu API RESTful do skonstruowania adresu URL, byłoby to coś w rodzaju /api/cars/:carId.

$resource sposób na pobranie danych

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');

    }]);

To daje obiekt zasobu , który towarzyszy get, save, query, remove, deleteautomatycznie metod.

$http sposób na pobranie danych

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...
        }

Zobacz, jak musimy zdefiniować każdą wspólną operację w interfejsie API RESTFul . Jedną z różnic jest to, że $httpzwraca, promisegdy $resourcezwraca obiekt. Istnieją również wtyczki innych firm, które pomagają Angularowi radzić sobie z RESTFul API, np. W wersji prostokątnej


Jeśli interfejs API jest podobny /api/getcarsinfo. Pozostało nam tylko skorzystać $http.

Qiang
źródło
4
To powinien być odpowiadający.
Royi Namir,
1
Jeśli api jest /api/getcarsinfo, myślę, że możemy nadal używać$resource
Kittu
1
To powinien być odpowiadający. kiedy powiedziałeś: „Jedną z różnic jest to, że $ http zwraca obietnicę, podczas gdy $ zasób zwraca obiekt” 1– Czy to oznacza, że ​​nie muszę używać. 2 - również jako osoba frontendowa, a to może zabrzmieć głupio, jak mogę się dowiedzieć, czy interfejs API jest spokojny, czy nie? dzięki
shireef khatab,
1
@shireefkhatab 1. tak, $ zasób jest po prostu wyższym poziomem abstrakcji $ http dla zbieżności RESTFul API. Na przykład doc pokazuje, jak z niego korzystać. 2. Zależy to całkowicie od tego, jak twój facet backend projektuje adres URL. Jeśli chce się dostosować do paradygmatu RESTFul api, to dobrze jest iść
Qiang
30

Myślę, że odpowiedź zależy bardziej od tego, kim jesteś w momencie pisania kodu. Użyj, $httpjeśli nie znasz Angulara, dopóki nie dowiesz się, dlaczego potrzebujesz $resource. Dopóki nie będziesz mieć konkretnego doświadczenia, jak $httpCię powstrzymuje i nie zrozumiesz implikacji używania $resourcew kodzie , trzymaj się $http.

Takie było moje doświadczenie: zacząłem swój pierwszy projekt Angular, musiałem wysyłać żądania HTTP do interfejsu RESTful, więc zrobiłem te same badania, co teraz. W oparciu o dyskusję, którą przeczytałem w SO pytaniach takich jak to, zdecydowałem się przejść $resource. To był błąd, który chciałbym cofnąć. Dlatego:

  1. $httpprzykłady są obfite, pomocne i zasadniczo tylko to, czego potrzebujesz. Jasne $resourceprzykłady są rzadkie i (z mojego doświadczenia) rzadko wszystko, czego potrzebujesz. Dla początkującego Angulara nie zdasz sobie sprawy z konsekwencji swojego wyboru, dopóki nie utkniesz w dokumentacji i zła, że ​​nie możesz znaleźć pomocnych $resourceprzykładów , które mogłyby ci pomóc.
  2. $httpto prawdopodobnie mapa mentalna 1 do 1, której szukasz. Nie musisz uczyć się nowej koncepcji, aby zrozumieć, co otrzymujesz $http. $resourceprzynosi wiele niuansów, na które jeszcze nie masz mapy myśli.
  3. Ups, czy powiedziałem, że nie musisz uczyć się nowej koncepcji? Jak kątowym początkujących ty nie musiał dowiedzieć się o obietnicach. $httpzwraca obietnicę i jest w .thenstanie, więc pasuje do nowych rzeczy, których uczysz się o Angularu i obietnicach. $resource, co nie zwraca obietnicy bezpośrednio, komplikuje twoje niepewne zrozumienie podstaw Angular.
  4. $resourcejest potężny, ponieważ zagęszcza kod dla wywołań RESTful CRUD i przekształceń dla danych wejściowych i wyjściowych. To świetnie, jeśli masz dość ciągłego pisania kodu w celu przetworzenia własnych wyników $http. Każdemu innemu $resourcedodaje zagadkową warstwę składni i przekazywania parametrów, która jest myląca.

Chciałbym poznać mnie 3 miesiące temu i zdecydowanie powiedziałbym sobie: „Trzymaj się $httpdzieciaka. W porządku”.

Matthew Marichiba
źródło
1
Podoba mi się twoja odpowiedź, szczególnie ostatnia linia. Obecnie przechodzę zmianę w używaniu $ resource vs $ http. Dodam też, że $ zasób jest naprawdę przydatny i pomaga, kiedy używasz tego samego rzeczownika API , takiego jak /user/:userIdlub /thing. Po przejściu do /users/roles/:roleIdtego musisz zmodyfikować adres URL zasobu $ i parametry na podstawie czasownika i równie dobrze możesz użyć $ http w tym momencie.
coblr
3
Nazywaj mnie schizofrenikiem, że skomentowałem moją własną odpowiedź, ale pomyślałem, że wspomnę o nowszych doświadczeniach. Dokonałem refaktoryzacji w celu wyeliminowania $resourcei zmiany $httpmiejsc. Nie mogę wystarczająco podkreślić, jak bardzo chciałbym żałować , że nigdy nie spotkałem $resource. Prawdopodobnie zmarnowałem ponad tydzień, ścigając niuanse z ostatnich $resourcemiesięcy. $httpjest tak łatwe i jednoznaczne, że wszelkie zyski, które można uzyskać, $resourcezostały całkowicie usunięte przez krzywą uczenia się.
Matthew Marichiba
24

Myślę, że należy podkreślić, że $ zasób oczekuje obiektu lub tablicy jako odpowiedzi od serwera, a nie nieprzetworzonego ciągu. Więc jeśli masz nieprzetworzony ciąg znaków (lub cokolwiek innego niż obiekt i tablica) w odpowiedzi, musisz użyć $ http

sparrkli
źródło
Czy to oznacza, że ​​$ http nie obsługuje obiektów i tablic? Chciałem tylko wyjaśnić.
Shardul,
Uważam, że $ http obsługuje obiekty, tablice i łańcuchy - Potrzebuję jednak potwierdzenia
Katana24,
@ Shardul, zrozumiałem, że $ http zajmuje się każdą odpowiedzią, ale $ zasób dotyczy tylko obiektów i tablic.
shireef khatab
Nieprawda, nadal możesz użyć $ zasób do zwrócenia ciągu. Użyj „transformResponse” w kodzie interfejsu, aby owinąć zwrócony ciąg w obiekcie.
Terry Deng
7

Jeśli chodzi o wybór między, $httpalbo $resourcetechnicznie rzecz biorąc, nie ma właściwej lub złej odpowiedzi w istocie, obie postąpią tak samo.

Celem $resourcejest umożliwienie przekazania ciągu szablonu (ciągu zawierającego symbole zastępcze) wraz z wartościami parametrów. $resourcezastąpi symbole zastępcze z ciągu szablonu wartościami parametrów przekazywanymi jako obiekt. Jest to szczególnie przydatne podczas interakcji ze źródłem danych RESTFul, ponieważ używają podobnych zasad do definiowania adresów URL.

Co $httppolega na wykonywaniu asynchronicznych żądań HTTP.

Dalorzo
źródło
1
To dobra odpowiedź, ponieważ wskazuje, że $ http jest tym, co zasila żądania z zasobu $, i że albo zasadniczo robią to samo.
coblr
@Dalorzo Chcesz powiedzieć, że $resourcenie można wykonać asynchronicznie? Chciałem tylko wyjaśnić
Kittu
Nie, wskazałem, że na koniec $httpjest najprostszym sposobem na wykonanie asynchronicznych żądań HTTP i co $resourcezasadniczo robi to samo, ale z różnymi parametrami
Dalorzo
2

usługa zasobów jest po prostu użyteczną usługą do pracy z REST APSI. kiedy go używasz, nie piszesz metod CRUD (twórz, czytaj, aktualizuj i usuwaj)

O ile mi wiadomo, usługa zasobów to tylko skrót, z usługą http można zrobić wszystko.

John Smith
źródło
Nie jestem pewien, czy sklasyfikowałbym $ zasób jako skrót. Jest to opakowanie dla $ http, więc bezpośrednie użycie $ http byłoby „krótsze”. Jest to sposób na skonfigurowanie $ http, aby mieć potencjalnie mniej kodu podczas korzystania z $ http. W jednym przypadku w $http.get('/path/to/thing', params)porównaniu do myResource.get(params)plus faktycznej konfiguracji dla myResource. Więcej kodu z przodu i naprawdę działa płynnie tylko z tym samym rzeczownikiem API. W przeciwnym razie kodujesz tak samo, jakbyś użył $ http.
coblr
2

Jedną z rzeczy, które zauważyłem podczas używania $ $ w stosunku do $ http, jest to, że używasz Web API w .net

Zasób $ jest powiązany w jeden kontroler, który wykonuje jeden cel.

$ 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)
{
}

Podczas gdy $ http może być czymkolwiek. wystarczy podać adres URL.

$ http.get - „api / autentify”

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

to tylko moja opinia.

jayson.centeno
źródło
0

Usługa $ $ obecnie nie obsługuje obietnic i dlatego ma wyraźnie inny interfejs niż usługa $ http.

jodłowy
źródło
1
Usługa $ $ obsługuje obietnice, ale nie zwraca obietnicy $ tak jak $ http. Musisz to zrobić tak, jak var myResource = $resource(...config...);w innym miejscu w serwisie, który wykonujesz return myResource.get(..params...)lub możesz to zrobićvar save = myResource.save(); save.$promise.then(...fn...); return save;
coblr