AngularJS $ http y $ resource

257

Tengo algunos servicios web a los que quiero llamar. $resourceo $http, ¿cuál debo usar?

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

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

Después de leer las dos páginas API anteriores, estoy perdido.

¿Podría explicarme en inglés sencillo cuál es la diferencia y en qué situación debo usarlos? ¿Cómo estructuro estas llamadas y leo los resultados en objetos js correctamente?

Tom
fuente
25
$ resource está construido sobre $ http, y proporciona una mayor abstracción de las comunicaciones subyacentes. También requiere un punto final REST que se ajuste a los patrones $ resource. Como está preguntando, mi sugerencia es comenzar con $ http, familiarizarse y luego ver si puede cambiar a $ resource.
David Riccitelli
44
Gracias por la respuesta. Entonces, ¿en qué situación se prefiere $ http sobre $ resource aparte de que puedo familiarizarme con la API?
Tom

Respuestas:

168

$httpes de uso general AJAX. En la mayoría de los casos, esto es lo que usará. Con $httpvas a estar haciendo GET, POST, DELETEtipo manual de llamadas y procesamiento de los objetos regresan por su cuenta.

$resourceenvolturas $httppara su uso en escenarios de API web RESTful.


Hablando muy en general: Un servicio web REST será un servicio con un punto final para un tipo de datos que hace cosas diferentes con ese tipo de datos basado en HTTP métodos como GET, POST, PUT, DELETE, etc Por lo tanto con una $resource, puede llamar a una GETpara conseguir el recurso como un objeto JavaScript, luego modifíquelo y envíelo de vuelta con un POST, o incluso elimínelo con DELETE.

... Si eso tiene sentido.

Ben Lesh
fuente
1
Entonces, $ resource maneja los servicios de Restful, ¿eso significa que también se puede usar para llamar a servicios web normales? Como lo hace, OBTENGA POST BORRAR PONGA todo eso. Entonces, ¿en qué situación se prefiere $ http sobre $ resource?
Tom
77
Realmente en cualquier momento no se trata de un punto final realmente tranquilo. Agrega mucha funcionalidad que no necesitaría si su punto final solo permitiera GET, por ejemplo.
Ben Lesh
@blesh, así que usar el $resourceservicio sólo sería idiomática / bueno si sus soportes RESTO de punto final GET, POST, y DELETE ? Los documentos ( docs.angularjs.org/api/ngResource.$resource ) muestran que obtienes estos 3 métodos REST $resource.
Kevin Meredith
9
@ KevinMeredith: O cualquier número de método. Puede agregar PUTo cualquier otra cosa que desee GET, POSTy DELETEson solo valores predeterminados. Si tiene un punto final que trata con el mismo recurso (eso es importante) para más de un método HTTP, entonces $resourcees una buena opción.
Ben Lesh
Incluso para un punto final sin RESTful, he encontrado conveniente utilizar $ resource para obtener datos de tipo GET y QUERY. Dada la forma en que .$promisefunciona bien resolvepara el enrutamiento y el enlace.
Kevin
210

Siento que otras respuestas, aunque correctas, no explican la raíz de la pregunta: RESTes un subconjunto de HTTP. Esto significa que todo lo que se puede hacer a través de RESTse puede hacer a través de HTTPpero no todo lo que se puede hacer a través de HTTPse puede hacer a través de REST. Es por eso que $resourceutiliza $httpinternamente.

Entonces, ¿cuándo usarnos?

Si todo lo que necesita es REST, es decir, si está intentando acceder a un servicio RESTfulweb, le $resourceserá muy fácil interactuar con ese servicio web.

Si, en cambio, está intentando acceder a CUALQUIER COSA que no sea un servicio RESTfulweb, tendrá que hacerlo $http. Tenga en cuenta que también puede acceder a un servicio RESTfulweb a través de $http, será mucho más engorroso que con $resource. Esta es la forma en que la mayoría de la gente lo ha estado haciendo fuera de AngularJS, utilizando jQuery.ajax(equivalente a Angular's $http).

bluehallu
fuente
21
buena respuesta, esto debería ser aceptado, no el de arriba
Andrzej Rehmann
2
¿Significa que tenemos tres formas de llamar a RESTful? Usando $ resource, $ http y jquery.ajax, ¿estoy en lo cierto?
Jake Huang
44
@JakeHuang Puedes llamarlo incluso sin ninguna biblioteca, hay infinitas formas de hacerlo. Acabo de exponer los 2 enfoques más populares en el mundo AngularJS y el enfoque más común fuera de él.
bluehallu
¿Puedo saber cuáles son los 2 enfoques más populares en AngularJS? : p
Jake Huang
41

$httprealiza una llamada AJAX de propósito general, en la que en general significa que puede incluir una API RESTful más una API no RESTful .

y $resourceestá especializado para esa parte RESTful .

La API de reposo prevaleció en los últimos años porque la URL está mejor organizada en lugar de una URL aleatoria compuesta por programadores.

Si uso una API RESTful para construir la url, sería algo así /api/cars/:carId.

$resource forma de obtener datos

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

    }]);

Esto le dará un objeto de recursos , que se acompaña con get, save, query, remove, deletemétodos automáticamente.

$http forma de obtener datos

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

Vea cómo necesitamos definir cada operación común en la API RESTFul . También una diferencia es que $httpdevuelve promisemientras $resourcedevuelve un objeto. También hay complementos de terceros para ayudar a Angular a lidiar con RESTFul API como restangular


Si la API es algo así /api/getcarsinfo. Todo lo que nos queda es usar $http.

Qiang
fuente
44
Este debería ser el respondedor.
Royi Namir
1
Si la api es /api/getcarsinfo, supongo que todavía podemos usar$resource
kittu
1
Este debería ser el respondedor. cuando dijiste "También una diferencia es que $ http devuelve la promesa, mientras que $ resource devuelve un objeto" 1- ¿eso significa que no necesito usar .then con $ resource? 2- también como una persona frontend y esto puede sonar tonto, ¿cómo puedo saber si la API está tranquila o no? gracias
shireef khatab
1
@shireefkhatab 1. sí, $ resource es solo una abstracción de nivel más alto de $ http para RESTFul API connivence. El ejemplo del documento muestra cómo usarlo. 2. Depende totalmente de cómo diseña la URL tu chico de backend. Si quiere cumplir con el paradigma RESTFi API, entonces estás listo para ir
Qiang
30

Creo que la respuesta depende más de quién eres en el momento en que escribes el código. Úselo $httpsi es nuevo en Angular, hasta que sepa por qué lo necesita $resource. Hasta que tenga una experiencia concreta de cómo lo $httpestá frenando, y comprenda las implicaciones de usar $resourceen su código , quédese con $http.

Esta fue mi experiencia: comencé mi primer proyecto angular, necesitaba hacer solicitudes HTTP a una interfaz RESTful, así que hice la misma investigación que estás haciendo ahora. Basado en la discusión que leí en SO preguntas como esta, decidí seguir $resource. Esto fue un error que desearía poder deshacer. Este es el por qué:

  1. $httpLos ejemplos son abundantes, útiles y, en general, justo lo que necesita. Los $resourceejemplos claros son escasos y (en mi experiencia) rara vez todo lo que necesita. Para el novato Angular, no se dará cuenta de las implicaciones de su elección hasta más tarde, cuando esté atrapado en la documentación y enojado porque no puede encontrar $resourceejemplos útiles para ayudarlo.
  2. $httpes probablemente un mapa mental 1 a 1 de lo que estás buscando. No tiene que aprender un nuevo concepto para comprender con qué se encuentra $http. $resourcetrae muchos matices para los que aún no tienes un mapa mental.
  3. Vaya, ¿te dije que no tienes que aprender un nuevo concepto? Como un novato angular que no tiene que aprender acerca de las promesas. $httpdevuelve una promesa y es .thencapaz, por lo que encaja perfectamente con las cosas nuevas que está aprendiendo sobre Angular y las promesas. $resource, que no devuelve una promesa directamente, complica su comprensión tentativa de los fundamentos angulares.
  4. $resourcees potente porque condensa el código para llamadas RESTful CRUD y las transformaciones para entrada y salida. Eso es genial si estás cansado de escribir código repetidamente para procesar los resultados de $httpti mismo. Para cualquier otra persona, $resourceagrega una capa críptica de sintaxis y paso de parámetros que es confusa.

Ojalá me conociera hace 3 meses, y me estaría diciendo enfáticamente: "Quédate con un $httpniño. Está bien".

Matthew Marichiba
fuente
1
Me gusta tu respuesta, especialmente la última línea. Actualmente estoy pasando por un cambio en el uso de $ resource vs $ http. Lo único que también agregaría es que $ resource realmente solo es muy útil y realmente ayuda cuando está utilizando el mismo nombre API , como /user/:userIdo /thing. Una vez que se muda a, /users/roles/:roleIdentonces tiene que modificar la url y los parámetros de $ resource por verbo y podría estar usando $ http en ese momento.
coblr
3
Llámame esquizofrénico por comentar mi propia respuesta, pero pensé en mencionar una experiencia más reciente. He estado refactorizando para eliminar $resourcey cambiar a $httplugares. No puedo enfatizar lo suficiente cuánto desearía desear, desear nunca haber conocido $resource. Probablemente he perdido más de una semana persiguiendo los matices de los $resourceúltimos meses. $httpes tan fácil y directo, que cualquier ganancia que se pueda obtener $resourcefue completamente eliminada por la curva de aprendizaje.
Matthew Marichiba
24

Creo que es importante enfatizar que $ resource espera un objeto o matriz como respuesta del servidor, no una cadena sin formato. Entonces, si tiene una cadena sin formato (o cualquier cosa, excepto el objeto y la matriz) como respuesta, debe usar $ http

Sparrkli
fuente
¿Eso significa que $ http no es compatible con objeto y matriz? Solo quería aclarar.
Shardul
Creo que $ http admite objetos, matrices y cadenas. Sin embargo
Katana24
@Shardul, entendí que $ http trata con cualquier tipo de respuesta, pero $ resource trata solo con objetos y matrices.
shireef khatab
No es cierto, aún puede usar $ resource para devolver una cadena. Use 'transformResponse' en su código de interfaz para envolver la cadena devuelta en un objeto.
Terry Deng
7

Cuando se trata de elegir entre $httpo $resourcetécnicamente hablando, no hay una respuesta correcta o incorrecta en esencia, ambos harán lo mismo.

El propósito de $resourcees permitirle pasar una cadena de plantilla (una cadena que contiene marcadores de posición) junto con los valores de los parámetros. $resourcereemplazará los marcadores de posición de la cadena de plantilla con los valores de los parámetros que se pasan como un objeto. Esto es principalmente útil cuando interactúa con la fuente de datos RESTFul, ya que utilizan principios similares para definir las URL.

Lo que $httphace es realizar las solicitudes HTTP asincrónicas.

Dalorzo
fuente
1
Esta es una buena respuesta porque señala que $ http es lo que alimenta las solicitudes de $ resource, y que o bien hacen esencialmente lo mismo.
coblr
@Dalorzo ¿Quiere decir que $resourceno se puede realizar de forma asincrónica? Solo quería aclarar
kittu
No, lo que señalé es que al final $httpes la forma más simple de realizar solicitudes HTTP asincrónicas y lo que $resourceesencialmente hace lo mismo pero con diferentes parámetros
Dalorzo
2

El servicio de recursos es simplemente un servicio útil para trabajar con APSI REST. cuando lo usas no escribes tus métodos CRUD (crear, leer, actualizar y eliminar)

Por lo que veo, el servicio de recursos es solo un acceso directo, puede hacer cualquier cosa con el servicio http.

John Smith
fuente
No estoy seguro de que clasifique $ resource como un acceso directo. Es un contenedor para $ http, por lo que usar $ http directamente sería "más corto". Es una forma de configurar $ http para que tenga potencialmente menos código al utilizar $ http. En un caso $http.get('/path/to/thing', params)versus myResource.get(params)más, realmente haciendo la configuración para myResource. Más código por adelantado y solo funciona a la perfección con el mismo nombre API. De lo contrario, está codificando tanto como si usara $ http.
coblr
2

Una cosa que noté al usar $ resource sobre $ http es si está utilizando API web en .net

$ resource está vinculado a un controlador que ejecuta un solo propósito.

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

Mientras que $ http podría ser de cualquier cosa. solo especifica la url.

$ http.get - "api / authenticate"

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

Es solo mi opinión.

jayson.centeno
fuente
0

El servicio $ resource actualmente no admite promesas y, por lo tanto, tiene una interfaz claramente diferente al servicio $ http.

Firdous
fuente
1
El servicio $ resource admite promesas, pero no devuelve una promesa $ directamente como lo hace $ http. Tienes que hacerlo como var myResource = $resource(...config...);en otro lugar del servicio que haces return myResource.get(..params...)o puedes hacervar save = myResource.save(); save.$promise.then(...fn...); return save;
coblr