如何在angularjs中实现控制器的后台进程？答案

【问题标题】：How implement background process for controller in angularjs?如何在angularjs中实现控制器的后台进程？
【发布时间】：2018-07-02 14:11:12
【问题描述】：

假设有一个大小为数的链接。每个链接点击都由控制器处理。考虑情况：

用户访问了某个页面。假设是/search，用户输入关键字并按下搜索按钮。
后台进程已启动（在我们的例子中等待搜索响应）
用户转到另一个链接
一段时间后，用户返回第一页 (/search)

在4 angulajs 加载页面时，用户第一次访问它。如何让 angulajs 记住不是状态而是过程？例如。如果流程未完成，则显示进度条，但如果完成，则从流程结果中提供数据并呈现新页面。如何实现？

备注

我找到了this，但这只是没有进程保存的状态。
我找到了that，但这是关于在后台运行某些进程而不管理结果或进程状态（正在运行或已完成）

【问题讨论】：

你只想记住当用户返回上一个屏幕时有一个 api 调用正在进行？
只存储从 $http 返回的原始承诺就足够了 - 不确定可以在这里添加什么。

标签： javascript angularjs background-process

【解决方案1】：

您可以使用 angularjs 服务来记住这个进行 api 调用并从中获取数据的“过程”。这是一个简单的实现。

这里的整个想法是创建一个将进行 api 调用的角度服务，存储数据以及数据的状态，以便可以从 angularjs 的其他模块访问。请注意，由于 angularjs 服务是单例的，这意味着它们的所有状态都将被保留。

app.service('searchService', function() {
    this.searchState={
     loading: false,
     data: null,
     error: null
    }
    this.fetchSearchResults = function(key){
    // call api methods to get response
    // can be via callbacks or promise. 

     this.searchState.loading=true;

     someMethodThatCallsApi(key)
      .then(function(success){
        this.searchState.loading=false;
        this.searchState.data=success;
        this.searchState.error=null
       })
      .catch(function(error){
       this.searchState.loading=false;
       this.searchState.data=null;
       this.searchState.error=error
      });

    }
    this.getState = function(){
      return this.searchState
    }
});

// 在你的控制器中

app.controller('searchController',function(searchService){
   // in your initialization function call the service method.
   var searchState = searchService.getState();
   // search state has your loading variables. you can easily check 
   // and procede with the logic.
   searchState.loading // will have loading state
   searchState.data // will have data
   searchState.error // will have error if occured.
});

即使您从页面导航。角度服务将保留状态，您可以从应用程序的任何位置获取相同的数据。您只需注入服务并调用 getter 方法。

【讨论】：

【解决方案2】：

基于这个问题，（多一点上下文或代码将有助于答案更有针对性），在考虑 angularJS 中的异步操作时，始终建议在服务中使用 getter 和 setter 以避免多次 REST 调用。

请注意 - 服务是单例，控制器不是。

例如：

angular.module('app', [])
   .controller('ctrlname', ['$scope', 'myService',  function($scope, myService){

    myService.updateVisitCount();
    $scope.valueFromRestCall = myService.myGetterFunctionAssociated(param1, param2);

    //Use $scope.valueFromRestCall to your convinience.

   }]

   .service('myService', ['$http', function($http){

        var self = this;
        self.numberOfVisits = 0;
        self.cachedResponse = null;

        self.updateVisitCount = function(){
            self.numberOfVisits+=1;
        }

        self.myGetterFunctionAssociated = function(param1, param2){
            if self.cachedResponse === null || self.numberOfVisits === 0 {
                return $http.get(url).then(function(response){
                    self.cachedResponse = response;
                    return response;
                });
            }
            else {
                      return self.cachedResponse;
                 }
        }

        return {
            updateVisitCount: function(){
                 self.udpateVisitCount();
            },
            myGetterFunctionAssociated : function(param1, param2){
                 return self.myGetterFunctionAssociated(param1, param2);
            }
        }

   }]

【讨论】：