Javascript 如何从Angular服务中的API获取数据，并将其存储以供将来任何人使用

这更像是编写干净的代码/优化现有代码。 我正在编写Angular服务，以便像这样从后端获取数据

angular.module('myApp').service('Auth', ['$http', '$q', 'Config', function($http, $q, Config) {
    this.getUser = function() {
        return $http.get(Config.apiurl + '/auth/user')
            .then(function(response) {
                return response.data;
            }, function(error) {
                return $q.reject(error.data);
            });
    };
}]);

在这里，我从数据库调用getUser函数n次。 现在的问题是，<强>调用这个服务以获得N次冗余数据是否可以，或者我应该将它保存在根目录中，以便稍后访问？< /强>或存储在根目录中是不好的实践，我应该考虑其他选项还是根本没有什么？

---

我想在这里得到一些关于角社区的看法

而不是

rootScope

只需在服务中使用一个本地变量

user

，该变量可以从代码中的任何地方访问，因此您不必每次都调用api

angular.module('metaiotAdmin').service('Auth', ['$http', '$q', 'Config', function($http, $q, Config) {
    this.getUser = function() {
        if(this.user){
            return this.user;
        }
        else{
            return $http.get(Config.apiurl + '/auth/user')
              .then(function(response) {
                  this.user = response.data;
                  return response.data;
              }, function(error) {
                  return $q.reject(error.data);
              });
        }
    };
}]);

---

希望有帮助。

不要使用

rootScope

只需在服务中使用一个本地变量

user

，它可以从代码中的任何地方访问，因此您不必每次都调用api

angular.module('metaiotAdmin').service('Auth', ['$http', '$q', 'Config', function($http, $q, Config) {
    this.getUser = function() {
        if(this.user){
            return this.user;
        }
        else{
            return $http.get(Config.apiurl + '/auth/user')
              .then(function(response) {
                  this.user = response.data;
                  return response.data;
              }, function(error) {
                  return $q.reject(error.data);
              });
        }
    };
}]);

---

希望它能有所帮助。

如果在您将“缓存配置”选项设置为true的情况下应用了相同的请求，则您不必使用$http为您缓存请求

$http.get('/hello', { cache: true})
      .then(onResponse)

或者，您可以通过使用拦截器或重写$httpProvider中的http实例为每个请求设置它，以对每个http请求应用该效果

app.module('app.module')
    factory('MyHttpInterceptor', function() {
         return {
              request : function(config) {
                  config.cache = true;
                  return config;
              },
              // rest of implementation of the interceptor
         }

    }); 



app.module('app.module')
    .config(['$httpProvider', function($httpProvider) {
           $httpProvider.interceptors.push('MyHttpInterceptor');
           // ... rest of the configuration
      }]);

或：

见：

---

如果在将“缓存配置”选项设置为true的情况下应用了相同的请求，则不必使用$http为您缓存请求

$http.get('/hello', { cache: true})
      .then(onResponse)

或者，您可以通过使用拦截器或重写$httpProvider中的http实例为每个请求设置它，以对每个http请求应用该效果

app.module('app.module')
    factory('MyHttpInterceptor', function() {
         return {
              request : function(config) {
                  config.cache = true;
                  return config;
              },
              // rest of implementation of the interceptor
         }

    }); 



app.module('app.module')
    .config(['$httpProvider', function($httpProvider) {
           $httpProvider.interceptors.push('MyHttpInterceptor');
           // ... rest of the configuration
      }]);

或：

见：

以下是一个示例，介绍如何使用工厂在应用程序中共享数据

让我们创建一个工厂，它可以在整个应用程序中跨所有控制器使用，以存储和访问数据

factory的优点是，您可以在其中创建对象并在控制器中的任何位置初始化它们，或者我们可以通过在factory中初始化它们来设置defult值

工厂

app.factory('SharedData',['$http','$rootScope',function($http,$rootScope){

    var SharedData = {}; // create factory object...
    SharedData.appName ='My App';
    return SharedData;
}]);

服务

app.service('Auth', ['$http', '$q', 'SharedData', function($http, $q,SharedData) {
   this.getUser = function() {

            return $http.get('user.json')
              .then(function(response) {
                  this.user = response.data;
                  SharedData.userData = this.user; // inject in the service and create a object in factory ob ject to store user data..
                  return response.data;
              }, function(error) {
                  return $q.reject(error.data);
              });

    };

}]);

控制器

var app = angular.module("app", []);
app.controller("testController", ["$scope",'SharedData','Auth',
  function($scope,SharedData,Auth) {

    $scope.user ={};
   // do a service call via service and check the shared data which is factory object ...
   var user = Auth.getUser().then(function(res){
       console.log(SharedData);
       $scope.user = SharedData.userData;// assigning to scope.
   });


  }]);

在HTML中

<body ng-app='app'>
    <div class="media-list" ng-controller="testController">

       <pre> {{user | json}}</pre>

    </div>

</body>

{{user | json}}

以下是一个关于如何使用工厂在应用程序中共享数据的示例

让我们创建一个工厂，它可以在整个应用程序中跨所有控制器使用，以存储和访问数据

factory的优点是，您可以在其中创建对象并在控制器中的任何位置初始化它们，或者我们可以通过在factory中初始化它们来设置defult值

工厂

app.factory('SharedData',['$http','$rootScope',function($http,$rootScope){

    var SharedData = {}; // create factory object...
    SharedData.appName ='My App';
    return SharedData;
}]);

服务

app.service('Auth', ['$http', '$q', 'SharedData', function($http, $q,SharedData) {
   this.getUser = function() {

            return $http.get('user.json')
              .then(function(response) {
                  this.user = response.data;
                  SharedData.userData = this.user; // inject in the service and create a object in factory ob ject to store user data..
                  return response.data;
              }, function(error) {
                  return $q.reject(error.data);
              });

    };

}]);

控制器

var app = angular.module("app", []);
app.controller("testController", ["$scope",'SharedData','Auth',
  function($scope,SharedData,Auth) {

    $scope.user ={};
   // do a service call via service and check the shared data which is factory object ...
   var user = Auth.getUser().then(function(res){
       console.log(SharedData);
       $scope.user = SharedData.userData;// assigning to scope.
   });


  }]);

在HTML中

<body ng-app='app'>
    <div class="media-list" ng-controller="testController">

       <pre> {{user | json}}</pre>

    </div>

</body>

{{user | json}}

这看起来不错。

用户

变量的生存期将是此应用程序在右侧选项卡中打开的时间？是的，类似于

rootscope

，但推荐的方式如下：这看起来不错。

用户

变量的生存期将是此应用程序在右侧选项卡中打开的时间？是的，类似于

rootscope

，但推荐的方式如下：这看起来不错，但在极少数情况下，用户会更改其详细信息。即使数据发生更改，

{cache:true}

是否也会提供相同的输出？这将如何处理？很抱歉，延迟回复，这取决于您的需要，也许您应该向负责从服务器加载用户的服务添加一个参数。该参数应启用/禁用从缓存加载。比如说：UserService.getUser（true）。然后（…）其中布尔值是决定是否从缓存中删除的选项。这看起来不错，但在极少数情况下，用户会更改其详细信息。即使数据发生更改，

{cache:true}

是否也会提供相同的输出？这将如何处理？很抱歉，延迟回复，这取决于您的需要，也许您应该向负责从服务器加载用户的服务添加一个参数。该参数应启用/禁用从缓存加载。比如说：UserService.getUser（true）。然后（…）其中布尔值是决定是否从缓存中删除的选项。这看起来不错，但在极少数情况下，用户会更改其详细信息。我将如何更新数据？并确保即使数据发生更改，factory也会为我们提供相同的输出。这不是问题，您可以在更新用户详细信息后使用

SharedData.userData

对象来分配新值，或者只需调用

服务.getUser（）sharedData对象将得到更新。下面是plunker解释我在上面针对您的问题所说的内容。这看起来不错，但在那些罕见的情况下，用户会更改其详细信息。我将如何更新数据？并确保即使数据发生更改，factory也会为我们提供相同的输出。这不是问题，您可以在更新用户详细信息后使用
SharedData.userData
对象来分配新值，或者只需调用
服务.getUser（）sharedData对象将得到更新。下面是解释我在上面为你的问题所说的话的人