sourcecode

캐시 방법NET Web API 요청( & use with Angular)JS $http)

copyscript 2023. 3. 25. 11:44
반응형

캐시 방법NET Web API 요청( & use with Angular)JS $http)

ASP로 작성된 Web API가 있습니다.Angular를 통해 소비하는 NETJS$http.

Angular에서 캐시를 활성화했습니다.JS 팩토리는 다음과 같으나 모든 요청은 여전히 응답을 반환합니다.200,절대.200 (from cache)또는304(모든 요청은 같은 페이지에서 동일한 웹 API 요청을 여러 번 만들고, 웹 API 요청을 포함한 이미 방문한 페이지를 다시 방문하거나, 해당 페이지를 새로 고치는 것을 의미합니다.

angular.module('mapModule')
    .factory('GoogleMapService', ['$http', function ($http) {
         var googleMapService = {               
            getTags: function () {
                // $http returns a promise, which has a 'then' function, which also returns a promise
                return $http({ cache: true, dataType: 'json', url: '/api/map/GetTags', method: 'GET', data: '' })
                .then(function (response) {                     
                    return response.data;
                });
            };

        return googleMapService;
    }]);

앵귤러에서 뭔가 빠진 게 있나?JS쪽?아니면 웹 API 문제인가요?아니면 둘 다?

알고보니 웹 API 같은 거였어요응답 헤더에 캐싱이 비활성화되어 있는 것을 명확하게 기재하고 있는 것을 간과하고 있었습니다.

Google Chrome의 네트워크 탭에 표시된 응답:

여기에 이미지 설명 입력

(위의 이미지에 나타나듯이) 더 자세히 조사하면 Web API 컨트롤러에서는 캐싱이 비활성화됩니다.심지어[OutputCache]일반 MVC 컨트롤러에서 사용되는 속성은 지원되지 않습니다.

다행히 블로그를 찾았습니다.http://www.strathweb.com/2012/05/output-caching-in-asp-net-web-api/

그 결과, 다음의 2개의 솔루션을 얻을 수 있었습니다.

CacheOutput을 사용하면 다음과 같은 특성을 사용할 수 있기 때문에 선택하기로 했습니다.

[CacheOutputUntilToday]서버측과 클라이언트측의 캐시를 서포트합니다.

또는 클라이언트 캐싱만 사용하려면 다음과 같은 방법을 사용할 수 있습니다.

[CacheOutput(ClientTimeSpan = 100, ServerTimeSpan = 0)]

캐시 코우의 접근 방식보다 언뜻 보기엔 좀 쉬워 보였어요.그리고 필요하다면 나중에 다시 추출하는 것이 더 쉽다.

이제 추가 요청이 있으면200 (from cache):

여기에 이미지 설명 입력

리프레쉬를 통해304 Not Modified:

여기에 이미지 설명 입력

문제 해결!이게 다른 사람에게 도움이 되길 바라.

언급URL : https://stackoverflow.com/questions/17287144/how-to-cache-net-web-api-requests-use-w-angularjs-http

반응형