Angular Parse REST 工厂变量答案

【问题标题】：Angular Parse REST factory variablesAngular Parse REST 工厂变量
【发布时间】：2015-04-17 18:59:51
【问题描述】：

我正在使用 Angular 工厂在 Parse.com 上的课程上执行 CRUD。我总共有 4 个类，需要对所有 4 个类执行创建、获取、放置、删除。虽然每个类的 URL 都不同，但其他一切都保持不变。我可以将变量传递给工厂以更改 api URL 中的类名吗？

这是一个工厂的例子。

.factory('Programme',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
    return {
        getAll:function(){
            return $http.get('https://api.parse.com/1/classes/Programme',{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION
                }
            });
        },
        get:function(id){
            return $http.get('https://api.parse.com/1/classes/Programme/'+id,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION
                }
            });
        },
        create:function(data){
            return $http.post('https://api.parse.com/1/classes/Programme',data,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        },
        edit:function(id,data){
            return $http.put('https://api.parse.com/1/classes/Programme/'+id,data,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        },
        delete:function(id){
            return $http.delete('https://api.parse.com/1/classes/Programme/'+id,{
                headers:{
                    'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                    'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                    'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                    'Content-Type':'application/json'
                }
            });
        }
    }
}])

显然这个 x4 是一团糟。

所以我需要将 URL 从 /Programmes 更改为 /Users /Prescription

我像这样从我的控制器中调用它：

Programme.edit($localStorage.programme.id, {exerciseData:exercises}).success(function(data){
});

其次，我如何根据 Javascript SDK 将错误处理程序标记到此控制器函数上？

【问题讨论】：

老实说，当您开始进入权限领域时，您应该将其抽象到配置或运行块中。

标签： javascript angularjs parse-platform factory

【解决方案1】：

1) 使用拦截器清理您的 url 代码：将以下内容放入您的 app.js 中

$httpProvider.interceptors.push(function ($q) {
  return {
    request: function(config) {
      if (config.url.split('/')[0] === 'api'){
        config.url = 'http://yourserverurl:3000/' + config.url.replace('api/', '');
      }
      return config || $q.when(config);
    }
  };
});

2) 在您的 url 请求中，您现在可以通过对 api/class 的简单调用来修改它们，并且您可以提供类名作为参数以重用相同的功能。示例：

create:function(classname, data){
        return $http.post('api/' + classname, data, {
            headers:{
                'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                'Content-Type':'application/json'
            }
        });
    },

3) 对于 promise 的错误处理，只需使用 .error( errFunc ) 示例：

Programme.edit($localStorage.programme.id, { exerciseData:exercises }).success(function(data){
}).error(function(response){ ... };

p.s 对于 1 和 2，请确保将 $httpProvider 添加到 app.js 中的 .config

【讨论】：

【解决方案2】：

这是你的意思吗？

.factory('Programme',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
var baseUrl = 'https://api.parse.com/1/classes/';
return {
    provider:function(type) {
        return {
            getAll:function(){
                return $http.get(getUrl(type),getParams());
            },
            get:function(id){
                return $http.get(getUrl(type)+id,getParams());
            },
            create:function(data){
                return $http.post(getUrl(type),data,getParams());
            },
            edit:function(id,data){
                return $http.put(getUrl(type)+id,data,getParams());
            },
            delete:function(id){
                return $http.delete(getUrl(type)+id,getParams());
            }
        }
        function getUrl(type) {
            return baseUrl+type;
        }

        function getParams() {
            return {
                    headers:{
                        'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
                        'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
                        'X-Parse-Session-Token': PARSE_CREDENTIALS.PARSE_SESSION,
                        'Content-Type':'application/json'
                 }      
            }    
        }

    }
 }
}])

你可以这样称呼它：

Programme.provider('Prescription/').edit($localStorage.programme.id, {exerciseData:exercises}).success(function(data){
}).error(function(response){ ... };

【讨论】：

不，不完全...我需要更改网址，所以它类似于我编辑的问题。
这个帐户是否为'Content-Type':'application/json' 我非常喜欢这个答案。当我启动并运行时，我将实现它并将其标记为正确

【解决方案3】：

我认为这确实应该使用资源来完成，并为您的对象抽象出特定的服务，而不仅仅是将所有东西都集中在一个大工厂中，这是一种不好的习惯和形式。

为您的每个对象创建一个单独的服务...您还应该使用它会导致更好的代码的承诺。请记住，您阅读/复制的许多教程都是为了解释技术而不是构建生产应用程序。

使用ng-resource为特定对象定义服务

/**
 * this factory wraps the use of angular-resource for interacting with the Kinvey
 * models we have created.
 * The factory also introduces the use of promises to handle the asynchronous http
 * requests.
 *
 * @see doc - https://docs.angularjs.org/api/ngResource/service/$resource
 * @see doc - $q - promises in angular - https://docs.angularjs.org/api/ng/service/$q
 */
    .factory('MemberService', ['$resource', 'KINVEY', function ($resource, KINVEY) {

        /**
         */
        function genericErrorHandler(_error) {
            console.log(_error.data);
            $scope.response = _error.data;
        }

        var reqHeaders = {
            'Authorization': KINVEY.auth
        };

        var Member = $resource(KINVEY.baseUrl + "members/:_id", {},
            {
                // headers are passed in as javascript name/value pairs
                'query': {
                    headers: reqHeaders,
                    isArray: true
                },
                'save': {
                    method: 'POST',
                    headers: reqHeaders
                },
                'get': {
                    headers: reqHeaders
                },
                'update': {
                    method: 'PUT',
                    params: {_id: "@_id"},
                    headers: reqHeaders
                },
                'remove': {
                    method: 'DELETE',
                    headers: reqHeaders
                }
            });

        return Member;
    }]);

实际使用服务

/**
 *
 * @param $scope
 */
$scope.doList = function () {
    // specific helper classes for the HTTP VERBS
    MemberService.query()
        .$promise.then(function (_response) {
            $scope.response = _response;
        }).catch(genericErrorHandler);
};

查看完整示例https://github.com/aaronksaunders/angular-kinvey-dataservices-example

【讨论】：