How to disable cache on $http.get?

ionic-v1
1

Hi All,

I’m trying to make an $http.get to retrieve a json, but it is always cached (except for the first call of course).
I’ve read several post about $ionicHistory.clearCache() and all the option in the ion-nav-view caching:
http://ionicframework.com/docs/api/directive/ionNavView,
but I’m not able to find a solution.

Thank you.

2

Where do you put this “get”?

According to my experience, if you put in the view lifecycle events of entering and leaving, it will trigger everytime and renew regardless of the cache.

First check if the method you are putting in is something that is only called once but you think it is called many times. For example, $scope.$on("$ionicView.loaded"), a method most of the time called once throughout the app lifecycle.

Second check the angular http service and you will find $http basic level method has a param to enable/disable the cache . Angular HTTP Service

3

Hi,

I have the same problem in the moment.
I tried to set $http.defaults.cache to false or put it withing the http config like

$http.get('api/path',{
    cache: false
}

But I will always get the same response. I checked with a browser and there I will get the updated content.
Maybe someone can help with the problem.
I only tested on Android.

Cheers,
Martin

4

Hi,

I´m newbie in ionic and I get an error when I deploy the app to a device with android gingerbread. The problem doesn’t occur in the development environment (I mean using “ionic serve”).

After to add several log traces, I have seen that $http.get(url,config).success... is correctly invoked each time. However the request only is sent to the server the first time (I have debugged the server and it has confirmed my suspects). In this way the data is well refreshed only the first time.

I have tried to:

I guess the device navigator is doing something really bad but I´m not sure. The “dirty” workaround is to add a dummy parameter in the url:

var tempUrl = url + '?hash_id=' + Math.random();

The requests are not being cached because are different. Although it works fine, it is not too elegant :smiley:

I don’t want to use Crosswalk in order to force the navigator. I don’t know what’s the next step. Any suggestion?

Thanks!

1 Like
5

try like this

$state(’ ‘app.name’, {
url: ‘/name’,
cache: false,
controller:‘MainCtrl’,
templateUrl:‘templates/name.html’
})

6

I also tried it with that configuration (it’s still set in my app.js) but it didn’t work.

I thought that $state.cache was for caching views. Anyway thanks!

7

I am having the same issue.
My first call brings the data from server but the same call gets response from cache every time i make the call after the first.
I.e. on pull to refresh
I’ve tried putting {cache:false} but it is not working.
Any clues on this?

8

@ahsanayaz @TRuben After spending whole day i found to get this work here is the solution add these lines

app.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $httpProvider) {
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}

$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';

$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';

$ionicConfigProvider.views.maxCache(0);
1 Like
9

I couldn’t find the solution so I wrote my own (I know it’s not the best solution and might need improvements)
Implemented an interceptor that appends the time-stamp on calls which are not for assets (html/css files etc.)

myApp.factory('httpInterceptor', ['$q',function($q) {
var regex = new RegExp('\.(html|js|css)$','i');
var isAsset = function(url){
    return regex.test(url);
};
return {
    // optional method
    'request': function(config) {
        // do something on success
        if(!isAsset(config.url)){            //if the call is not for an asset file
            config.url+= "?ts=" +  Date.now();     //append the timestamp
        }
        return config;
    },

    // optional method
    'requestError': function(rejection) {
        // do something on error
        return $q.reject(rejection);
    },



    // optional method
    'response': function(response) {
        // do something on success
        return response;
    },

    // optional method
    'responseError': function(rejection) {
        return $q.reject(rejection);
    }
};
}]);

//appended the interceptor in the config block using $httpProvider
// $httpProvider.interceptors.push('httpInterceptor');
10

I am having this issue as well and it is causing very serious consequences for me. If anyone has a solution please let me know, your help is greatly anticipated and appreciated.

11

ahsanayaz posted a method above. Basically add a query string parameter that is never the same to the url, like the epoch time in ms.

12

Thank you, I did finally get that working for me, although I had to modify the regex so that it only applied to xml files. It was breaking image assets for me.

Still, this seems like a workaround. Why isn’t the $http call getting the updates naturally? Especially if explicitly disabling cache… Is this a bug that just hasn’t been fixed or am I misunderstanding the intended functionality?

Thanks for your quick response!

13

Although not the best solution, as mentioned by you, it worked perfectly to “break” the cache $ http.get and update in real time the information in my App. Thank you.

14

In my own case, I used console.log and discovered that the results of the $http.get were not actually being cached but it was the page where I was using the data returned from the $http.get that was being cached.

so, basically, on the pages that were being cached, I had to add this inside the tag cache-view=“false”. Like so : and voila my problem is solved!

1 Like
15

This is the solution! Thanks!

16

This workaround worked like a charm, thank you!

17

where are you add the tag cache-view=“false” ?
(html, css, ts ??)