AngularJS $ http和$ resource


257

我有一些要调用的Web服务。 $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 2012年

4
感谢你的回答。那么,在什么情况下$ http比$ resource更可取,除了我可以熟悉api?
汤姆(Tom)

Answers:


168

$http用于通用AJAX。在大多数情况下,这就是您要使用的内容。随着$http你将要作出GETPOSTDELETE型手动调用和处理他们回到你自己的对象。

$resource包装$http以用于RESTful Web API场景。


概而言之:RESTful Web服务将与一个端点为基于HTTP的方法,如与数据类型进行不同的处理数据的服务类型GETPOSTPUTDELETE,等于是用一个$resource,你可以调用一个GET获取资源作为JavaScript对象,然后对其进行更改并使用,然后将其发送回POST,甚至使用删除它DELETE

...如果有道理。


1
那么$ resource处理Restful服务,这意味着它也可以用来调用普通的Web服务吗?由于它确实可以执行POST删除所有操作。那么,在什么情况下$ http比$ resource更可取?
汤姆(Tom)

7
几乎在任何时候您都没有处理一个真正的宁静端点。例如,它增加了很多您不需要的功能,例如您的端点仅允许GET。
Ben Lesh 2012年

@blesh,所以使用$resource的服务只会惯用/好,如果你的REST终端支持GETPOST DELETE?文档(docs.angularjs.org/api/ngResource.$resource)显示,您可以通过使用这3种REST方法$resource
凯文·梅雷迪斯

9
@KevinMeredith:或者它是许多方法。您可以添加PUT或其他任何你想,GETPOSTDELETE只是默认值。如果您的终结点使用多个HTTP方法来处理同一资源(这很重要),那么这$resource是一个不错的选择。
Ben Lesh 2014年

即使对于非RESTful端点,我也发现使用$ resource来获取GET和QUERY类型的数据很方便。给定的方式.$promise可以很好地resolve进行路由和绑定。
凯文

210

我认为其他答案虽然正确,但并不能完全解释问题的根源:REST是的子集HTTP。这意味着可以通过完成的所有操作REST都可以通过完成,HTTP但是不能通过完成的所有操作HTTP都可以通过完成REST。这就是为什么在内部$resource使用$http

那么,何时互相使用?

如果您只需要REST,也就是说,您正在尝试访问RESTfulWeb服务,$resource则将使其与该Web服务进行交互变得非常容易。

相反,如果您尝试访问不是RESTfulWeb 服务的任何内容,则必须使用$http。请记住,您还可以RESTful通过来访问Web服务$http,这将比使用麻烦得多$resource。这是大多数人通过使用jQuery.ajax(等效于Angular的$http)在AngularJS之外进行操作的方式。


21
好的答案,应该接受,而不是
放在首位

2
这意味着我们可以通过三种方式调用RESTful?使用$ resource,$ http和jquery.ajax,对吗?
黄杰克(Jake Huang)

4
@JakeHuang即使没有任何库,您也可以调用它,有无数种方法可以做到。我刚刚介绍了AngularJS世界中最流行的2种方法以及其中最常见的方法。
bluehallu 2015年

我可以知道AngularJS中两种最受欢迎​​的方法是什么吗?:p
Jake Huang

41

$http进行通用AJAX调用,这意味着通用可以包括RESTful api和Non-RESTful api。

并且$resource专门针对该RESTful部分。

近年来,Restful Api盛行是因为URL的组织性更好,而不是由程序员编写的随机URL。

如果我使用RESTful API来构建网址,则可能类似于/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');

    }]);

这会给你的资源对象,它是伴随着getsavequeryremovedelete自动的方法。

$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处理RESTFul API,例如restangular


如果API类似于/api/getcarsinfo。我们剩下的就是使用$http


4
这应该是答案。
罗伊·纳米尔

1
如果/api/getcarsinfo我想使用api,我们仍然可以使用$resource
kittu

1
这应该是答案。当您说“另外一个区别是$ http返回promise而$ resource返回对象” 1-表示我不需要将.then与$ resource一起使用吗?2-还作为前端人员,这听起来可能很愚蠢,我如何才能确定api是否宁静?谢谢
shireef khatab

1
@shireefkhatab 1.是的,$ resource只是用于RESTFul API的$ http的更高级别抽象。该文档举例说明了如何使用它。2.这完全取决于您的后端人员如何设计url。如果他想遵循RESTFul api范例,那么您就很好了
Qiang

30

我想答案更多地取决于谁,你是在你写代码的时间。如果您不熟悉Angular,请使用$http,直到您知道为什么需要$resource除非您对如何$http阻碍自己有具体的经验,并且了解$resource代码中使用的含义,否则请坚持使用$http

这就是我的经验:我开始了我的第一个Angular项目,我需要向RESTful接口发出HTTP请求,因此我做了与现在相同的研究。根据我在此类问题中阅读的讨论,我选择继续$resource我希望我可以撤销这个错误。原因如下:

  1. $http示例很多,很有帮助,并且通常只是您需要的。$resource缺少清晰的示例,而且(以我的经验)几乎不需要您所需的一切。对于Angular新手,直到后来陷入困惑的文档并为找不到$resource帮助您的有用示例而感到恼火之时,您才意识到选择的含义。
  2. $http可能是您要寻找的一对一思维导图。您无需学习新概念即可了解所获得的东西$http$resource带来了很多细微差别,您还没有心智图。
  3. 糟糕,我是否说您不必学习新概念?作为一个新手角度,你必须学习的承诺。$http返回一个诺言并.then能够实现,因此它正适合您正在学习的有关Angular和诺言的新知识。$resource不会直接返回承诺,这会使您对Angular基础知识的初步了解变得复杂。
  4. $resource之所以功能强大,是因为它压缩了RESTful CRUD调用的代码以及输入和输出的转换。如果您厌倦了反复编写代码来处理结果的话,那就太好了$http自己那就。对于其他任何人,$resource添加一个令人困惑的语法和参数传递的神秘层。

我希望我三个月前认识我,然后我会很强力地对自己说:“和$http孩子们呆在一起。很好。”


1
我喜欢你的回答,尤其是最后一行。我目前正在使用$ resource和$ http进行转换。我还要补充的一件事是,$ resource确实真的很方便,并且在您使用相同的API 名词(例如/user/:userId或)时确实会有所帮助/thing。移至该位置/users/roles/:roleId后,您必须根据每个动词修改$ resource url和params ,此时最好使用$ http。
coblr

3
称我精神分裂症患者对我自己的答案发表评论,但我想我要提到最近的经历。我一直在进行重构以消除$resource并切换到$http某些地方。我不能强调我从未见过的希望$resource。我可能已经浪费了一个多星期来追逐$resource过去几个月的细微差别。$http如此简单明了,$resource学习曲线彻底抹去了任何收获。
马修·马里奇巴

24

我认为重要的是要强调$ resource期望对象或数组是服务器的响应,而不是原始字符串。因此,如果您有原始字符串(或对象和数组以外的任何字符串)作为响应,则必须使用$ http


这是否意味着$ http不支持对象和数组?只是想澄清一下。
Shardul

我相信$ http支持对象,数组和字符串-尽管我需要确认
Katana24 2015年

@Shardul,我知道$ http处理任何类型的响应,但是$ resource仅处理对象和数组。
shireef khatab

并非如此,您仍然可以使用$ resource返回字符串。在前端代码中使用'transformResponse'将返回的String封装在一个对象中。
Terry Deng

7

在选择$http$resource技术上来讲,实质上没有对或错的答案,两者都会做同样的事情。

的目的$resource是允许您传递模板字符串(包含占位符的字符串)以及参数值。$resource将替换占位符模板字符串中为作为对象传递的参数值。与RESTFul数据源进行交互时,这非常有用,因为它们使用类似的原理来定义URL。

什么$http是执行异步HTTP请求。


1
这是一个很好的答案,因为它指出$ http是驱动$ resource请求的动力,并且两者执行的基本相同。
coblr

@Dalorzo所以你的意思是说$resource不能异步执行?只是想澄清
一下

不,我指出的是,最后$http是执行异步HTTP请求的最简单方法,并且$resource本质上是相同的,但具有不同的参数
Dalorzo

2

资源服务只是使用REST APSI的有用服务。使用它时,您无需编写CRUD方法(创建,读取,更新和删除)

据我所知,资源服务只是一个捷径,您可以使用http服务执行任何操作。


我不确定我会将$ resource分类为快捷方式。它是$ http的包装,因此直接使用$ http会“更短”。这是配置$ http的一种方法,这样,在使用$ http时,您的代码可能会更少。在一种情况下$http.get('/path/to/thing', params)myResource.get(params)加上加实际为进行配置myResource。前面有更多代码,只有在使用相同 API名词的情况下才能真正发挥作用。否则,您的编码与使用$ http一样。
coblr '16

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可以是任何东西。只需指定网址即可。

$ http.get-“ api / authenticate”

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

这只是我的意见。


0

$ resource服务当前不支持诺言,因此与$ http服务具有明显不同的接口。


1
$ resource服务确实支持promise,但不会像$ http那样直接返回$ promise。您必须像var myResource = $resource(...config...);在服务中的其他地方一样做到这一点,return myResource.get(..params...)或者可以做到var save = myResource.save(); save.$promise.then(...fn...); return save;
coblr 2016年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.