AngularJS拦截器-将响应数据修改为缓存的数据

时间:2018-07-19 11:00:43

标签: angularjs caching angular-http-interceptors etags

我想使用带有角度拦截器的etags创建一个缓存解决方案。 一切工作正常,但我无法返回缓存的数据。 我想用缓存的数据覆盖304 Not Modified响应。

      'responseError': function(rejection) {

          if(rejection.status === 304){
              var response = {};

              var url = rejection.config.url;
              var params = rejection.config.params || {};
              var etagKey = url+'.'+JSON.stringify(params);
              var storedValue = $localStorage['ETag-Cache'+etagKey] || '{}';
              var cachedObj = JSON.parse(storedValue);

              console.log('CACHED ETag-Cache'+etagKey,cachedObj.response);

              //I'd like to return with the cached data here but this doesn't work
              return cachedObj.response;

          }

          return $q.reject(rejection);
      }

下面的示例请求

      $http.get('/api/bigdata', {


    }).then(function(resp){
       //I'd like to get the cached data in the resp variable
    });

1 个答案:

答案 0 :(得分:0)

我没有找到解决方案,但是有解决方法。 由于304错误状态存在问题,因此我将返回状态代码200而不是自定义标头:Not-Modified = 1和空响应,然后在拦截器中进行处理。

Laravel ETag MiddleWare中的伪代码

        if ($requestEtag && $requestEtag[0] == $etag) {
            $response->setStatusCode(200);
            $response->header('Not-Modified', true);
            $response->setContent('{"status":"Not-Modified"}');
        }

AngularJS拦截器响应处理程序:

        //Etag Handler
        var url = res.config.url;
        var params = res.config.params || {};
        var etag = res.headers().etag;
        var etagKey = url+'.'+JSON.stringify(params);
        var EtagVal = JSON.stringify(
            {
                'etag':etag,
                'url':url,
                'params':params,
                'response':res.data
            });


        //If Not-Modified header is true
        if(res.headers()['not-modified'] == "1"){
            var storedValue = $localStorage['ETag-Cache'+etagKey] || '{}';
            var cachedObj = JSON.parse(storedValue);

            console.log('CACHED ETag-Cache'+etagKey,cachedObj.response);
            res.data = cachedObj.response;
            return res || $q.when(res);
        }

这样,我可以在$http.then(response)中获取缓存的值,而不用从服务器下载整个数据。