it-swarm.com.de

Besserer Weg, um IE Cache in AngularJS?

Ich verwende derzeit service/$ resource, um Ajax-Aufrufe zu tätigen (in diesem Fall GET), und IE speichert die Aufrufe zwischen, damit keine neuen Daten vom Server abgerufen werden können. Ich habe eine Technik verwendet, die ich gefunden habe indem Sie googeln, um eine Zufallszahl zu erstellen und an die Anfrage anzuhängen, damit IE nicht zum Cache für die Daten geht.

Gibt es einen besseren Weg, als jeder Anfrage den cacheKill hinzuzufügen?

fabrikcode

.factory('UserDeviceService', function ($resource) {

        return $resource('/users/:dest', {}, {
            query: {method: 'GET', params: {dest: "getDevicesByUserID"}, isArray: true }
        });

Rufen Sie von der Steuerung aus an

$scope.getUserDevices = function () {
        UserDeviceService.query({cacheKill: new Date().getTime()},function (data) {
            //logic
        });
    }
60
binarygiant

Auf Wunsch von binarygiant poste ich meinen Kommentar als Antwort. Ich habe dieses Problem behoben, indem ich der Antwort auf der Serverseite No-Cache-Header hinzugefügt habe. Beachten Sie, dass Sie dies nur für GET-Anforderungen ausführen müssen. Andere Anforderungen funktionieren anscheinend einwandfrei.

wie das geht, hat binarygiant auf node/express gepostet. Sie können dies in ASP.NET MVC folgendermaßen tun:

[OutputCache(NoStore = true, Duration = 0, VaryByParam = "None")]
public ActionResult Get()
{
    // return your response
}
36

Wie in einem meiner anderen posts beschrieben, können Sie das Caching im $ httpProvider global deaktivieren:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }    

    // Answer edited to include suggestions from comments
    // because previous version of code introduced browser-related errors

    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);
50
cnmuc

Für diejenigen, die ASP.NET Web API 2 verwenden, ist die entsprechende Lösung die folgende (Web API verwendet nicht dieselbe Cache-Logik wie MVC):

public class NoCacheHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        if (actionExecutedContext.Response != null) // can be null when exception happens
        {
            actionExecutedContext.Response.Headers.CacheControl =
                new CacheControlHeaderValue { NoCache = true, NoStore = true, MustRevalidate = true };
            actionExecutedContext.Response.Headers.Pragma.Add(new NameValueHeaderValue("no-cache"));

            if (actionExecutedContext.Response.Content != null) // can be null (for example HTTP 400)
            {
                actionExecutedContext.Response.Content.Headers.Expires = DateTimeOffset.UtcNow;
            }
         }
    }
}

dann hängen Sie es in WebApiConfig.cs an:

public static void Register(HttpConfiguration config)
{
    ....
    config.Filters.Add(new NoCacheHeaderFilter());

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/{controller}/{id}",
        defaults: new { id = RouteParameter.Optional }
    );
}
33
UserControl

Das Aktivieren von noCache in der is-Instanz war der beste Weg, um dies zu erreichen:

In node/express funktioniert dies, um zu verhindern, dass IE diese Anforderungen zwischenspeichert:

app.use(function noCache(req, res, next) {
    res.header("Cache-Control", "no-cache, no-store, must-revalidate");
    res.header("Pragma", "no-cache");
    res.header("Expires", 0);
    next();
});
33
binarygiant

sie können einen Interceptor hinzufügen, um eine eindeutige Anforderungs-URL zu generieren. Außerdem können Sie console.log-Aufrufe entfernen

myModule.config(['$httpProvider', function($httpProvider) {
 $httpProvider.interceptors.Push('noCacheInterceptor');
}]).factory('noCacheInterceptor', function () {
            return {
                request: function (config) {
                    console.log(config.method);
                    console.log(config.url);
                    if(config.method=='GET'){
                        var separator = config.url.indexOf('?') === -1 ? '?' : '&';
                        config.url = config.url+separator+'noCache=' + new Date().getTime();
                    }
                    console.log(config.method);
                    console.log(config.url);
                    return config;
               }
           };
    });
12
dillip pattnaik

Ich bekomme es gelöst von:

$http.get("/your_url?rnd="+new Date().getTime()).success(function(data, status, headers, config) {
    console.log('your get response is new!!!');
});
4
khichar.anil

Koajs Äquivalent zur Antwort von binarygiant:

app.use(route.get('*', noCache));

function* noCache(path, next){
    this.set('cache-control', 'no-cache, no-store, must-revalidate');
    this.set('pragma',  'no-cache');
    this.set('expires', 0);
    yield next;
}
4
Felix

Während dieser Ansatz:

myModule.config(['$httpProvider', function($httpProvider) {
    //initialize get if not there
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};    
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}]);

Ist richtig, ist '0' kein gültiger Wert für den If-Modified-Since-Header. Es muss ein gültiges HTTP-Datum sein, zum Beispiel:

If-Modified-Since: Sat, 29 Oct 1994 19:43:31 GMT

Nach dem spec :

Ein Empfänger MUSS das If-Modified-Since-Headerfeld ignorieren, wenn das
empfangener Feldwert ist kein gültiges HTTP-Datum oder die Anfrage
Methode ist weder GET noch HEAD.

Gehen Sie also lieber auf Nummer sicher und verwenden Sie ein aktuelles Datum in der Vergangenheit.

Wenn Sie die Serverausgabe steuern können, sollten Sie stattdessen keine Caching-Header hinzufügen.

3
Brother Woodrow

Meine Lösung bestand darin, den Header Cache-Control: no-cache Auf dem Server hinzuzufügen und $templateCache.remove() hinzuzufügen, bevor der Status geändert wurde. Ich benutze Angular-UI/UI-Router. Ich hatte ein Problem mit dem IE11 und dem Edge-Browser.

$templateCache.remove('/partials/details.html');
$state.go('details');
2
Hexadecy