Angular에서의 약속 오브젝트 캐시JS 서비스

Angular에서의 약속 오브젝트 캐시JS 서비스

Angular에서 정적 리소스의 동적 로드를 구현하고 싶다.Promise를 사용하는 JS.문제:페이지에 몇 개의 컴포넌트가 있습니다.이 컴포넌트는 표시되는 컴포넌트에 따라 다르므로 서버로부터 스태틱리소스를 취득할 필요가 있습니다.로드된 후에는 전체 응용 프로그램 수명 동안 캐시할 수 있습니다.

저는 이 메커니즘을 구현했지만, Angular와 Promites는 처음이라서 이것이 올바른 솔루션인지 확인하고 싶습니다.

var data = null;
var deferredLoadData = null;

function loadDataPromise() {
  if (deferredLoadData !== null)
    return deferredLoadData.promise;

  deferredLoadData = $q.defer();

  $http.get("data.json").then(function (res) {
    data = res.data;
    return deferredLoadData.resolve();
  }, function (res) {
    return deferredLoadData.reject();
  });

  return deferredLoadData.promise;
}

따라서 요청은 1개뿐이고 loadDataPromise()에 대한 다음 모든 콜은 처음 작성된 약속을 반환합니다.진행 중이거나 이미 얼마 전에 끝난 것 중 하나를 요청하는 것이 효과가 있는 것 같습니다.

하지만 이 솔루션이 약속을 캐싱하는 데 적합한 솔루션일까요?

이것이 올바른 접근법입니까?

네. 반환되는 함수에 메모화를 사용하면 비동기(일반적으로 비용이 많이 드는) 태스크의 반복 실행을 피할 수 있는 일반적인 기술이 보장됩니다.이 약속은 진행 중인 작업과 완료된 작업을 구분할 필요가 없기 때문에 캐슁을 쉽게 만듭니다. 두 작업은 모두 결과 가치에 대한 (같은) 약속으로 표현됩니다.

이것이 올바른 해결책입니까?

그 거. 그 글로벌.data 및 ('')를 지정합니다.undefined대신그 결과로 하세요.data 또한 코딩이 훨씬 쉬워집니다.

var dataPromise = null;

function getData() {
    if (dataPromise == null)
        dataPromise = $http.get("data.json").then(function (res) {
           return res.data;
        });
    return dataPromise;
}

loadDataPromise().then(function() { /* use global */ data }) 말하면getData().then(function(data) { … }).

더 하기 숨기면 것 같아요.dataPromise범위 에서, 때해 주십시오.getData는 파라미터(url 등)를 취득합니다.

저는 이 작업을 위해 보일러 플레이트 코드를 모두 제거하는 defer-cache-service라는 서비스를 만들었습니다.Typescript에 입력되어 있지만 컴파일된 js 파일을 가져올 수 있습니다.Github 소스 코드

예:

function loadCached() {
   return deferCacheService.getDeferred('cacke.key1', function () {
      return $http.get("data.json");
   }); 
} 

소비하다

loadCached().then(function(data) {
//...
});

주의할 점은 두 개 이상의 부품이 동일한 loadDataPromise를 호출하고 동시에 이 체크를 추가해야 한다는 것입니다.

if (defer && defer.promise.$$state.status === 0) {
   return defer.promise;
}

그렇지 않으면 백엔드에 대한 콜이 중복됩니다.

이 설계 패턴은 처음 실행될 때 반환되는 모든 항목을 캐시하고 캐시된 항목을 다시 호출할 때마다 반환합니다.

const asyncTask = (cache => {
  return function(){
    // when called first time, put the promise in the "cache" variable
    if( !cache ){
        cache = new Promise(function(resolve, reject){
            setTimeout(() => {
                resolve('foo');
            }, 2000);
        });
    }
    return cache;
  }
})();

asyncTask().then(console.log);
asyncTask().then(console.log);

설명:

함수(원래의 비동기 함수)를 반환하는 다른 자기 호출 함수로 함수를 랩핑하는 것만으로, 래퍼 함수의 목적은 로컬 변수의 캡슐화 스코프를 제공하는 것입니다.cache따라서 로컬 변수는 래퍼 함수의 반환된 함수 내에서만 액세스할 수 있으며 매번 동일한 값을 가집니다.asyncTask(처음 이외)가 호출됩니다.

언급URL : https://stackoverflow.com/questions/18744830/caching-a-promise-object-in-angularjs-service