ionic状态改变时动态（强制）刷新页面

ゝ一世哀愁。 2022-08-18 13:17 232阅读 0赞

$state.go(stateName,params,config);使用这个方法调到某个状态后，有时需要强制刷新当前页面，使其向后台发起请求，获取最新数据。

1.这种需求的场景举例：

这是处于待办状态（没有被评价的工作记录处于待办状态）的工作记录。

注意：此时待办的工作记录数为45132条

![Image 1][]

当点击其中一条记录

![Image 1][]

然后点击评价工作记录对其进行评价

![Image 1][]

点击评价按钮，评价当前工作记录

![Image 1][]

评价完成之后，状态就需要跳转至初始页面，并且强制刷新页面，从后台获取数据。

注意：此时待办的工作记录数为45131条，说明刷新成功。

![Image 1][]

2.实现方式

2.1\{reload:true\}

强制刷新页面网上资料说使用$state.go("tab.backlog",\{\},\{reload:true\})，其中\{reload:true\}的配置可以实现强制刷新，但是经过我的实验之后发现没有起任何作用。

2.2cache:false

$statePrivider.state(\{\})这个方法中的参数是对象，其中有项属性配置是cache:true/false, ，默认为true。在此，将其配置为false,此时，这个状态就不会有缓存，也就可以实现每次处于该状态时刷新页面，也就相当于实现了强制刷新。(注意：需要继续向下看，很可能此时你任然看不到页面数据被刷新)

![Image 1][]

如果页面数据是通过$http从后台使用ajax获取的数据，那么页面数据任然得不到刷新。

findPendentRecordList:function(postParams){
        var url =Config.basePath+this.tableName+"/findPendentRecordList.do?callback=JSON_CALLBACK";
        return $http.jsonp(url,{
      params:postParams});
    },

原因在于：在ionic中，$http任何请求默认都是有缓存的，即下面的属性默认是这样配置的

$httpProvider.defaults.cache = true;

也就是说虽然把$state的cache设为了false,他会每次都从后台获取数据，但是$http的cache却为true,那个$http这个偷懒的家伙就会从自己的缓存中拿出数据，而并不会真正的从后台获取，故此，页面数据任然得不到真正的刷新。

看到这里，有人肯定已经想到了解决的办法：将$http的cache设为false，OK，  如愿以偿，万事大吉，效果实现了。

$httpProvider.defaults.cache = false;

但这种设置会把你其他的$http请求的cache一同全部设为false，不好之处在于数据没有缓存，每次需要从后台获取，速度，性能不高。所以，使用另一种方式将需要做强制刷新的$http的请求cache设为false即可，设置方法为：$http.get()或$http.post()或$http.jsonp()等等请求方法中第二个参数是一个对象，在其中添上cache:false的配置。

总结：

实现强制刷新页面的方式有：

1.\{reload:true\},目前我没有试验成功。

2.同时将$state和,$http的cache都设为false

看到这里，我相信你的页面已经可以强制刷新了。

2.3动态设置$http的cache

然而，虽然上述方法能达到效果，但不知你有没有发现，随之带来的问题就是每次当路由切换到该状态时，页面都会从后台获取数据。浪费流量、速度慢、用户体验差。

因此，我们需要改变方法。

$state的cache任然设置为false,而$http的cache需要按照需要（例如：上述功能在点击了评价按钮之后，跳转至tab.home状态时设为false，而其他情况下都设为true）动态设置为true OR false。

动态设置的方法：

首先，在state中添加params:\{isCache:true\},配置项，该项的含义是，这个状态可以接受一个isCache的参数。，默认状态下为true

//代办模块
    .state('tab.backlog',{
        url:'/backlog',
        views:{
            'tab-backlog':{
                templateUrl:'templates/backlog/tab-backlog.html',
                controller:'BacklogCtrl'
            }
        },
       cache:false,
        params:{
            isCache:true
        }
    })

然后，在使用$state.go()方法转到该状态时，在其第二个参数中加入如下的配置

$state.go("tab.backlog",{
      isCache:false});

接着，在需要刷新的那个页面controller中使用$stateParams.isCache获取到上面传递的值，并注意，把这个isCache:$stateParams.isCache加到请求参数中

$scope.queryConditions = {
       
         isCache:$stateParams.isCache
     };
    
    $dataService.findPendentRecordList($scope.queryConditions).success(successCallback);

最后，在$http请求参数中配置上cache属性，其值为刚才你传递过来的请求参数中的isCache的值,此时就能从后台获取数据。

不需要强制刷新时，就像下面这样切换状态，不配置参数即可。

$state.go("tab.backlog");

因为isCache默认为true

params:{
            isCache:true
        }

经过一番折腾，虽然路由的cache为false,每次都会从后台获取数据，但是由于$http此时cache咱们给他的默认值为true,所以，实际上$http是从缓存中获取的数据，而并没有真正意义上向后台发送请求。

[Image 1]: