각도 API 캐시

두 번째 부분은 곧 발표될 것이다
본고는 HTTP 클라이언트 요청을 효율적으로 처리하고 이를 서로 다른 브라우저 저장소에 캐시하는 방법을 소개할 것이다.
내가 이야기하고자 하는 내용을 명확히 하기 위해서 전체 항목Github을 조회할 수 있다.
따라서 캐시는 나중에 데이터를 신속하게 접근할 수 있도록 메모리에 데이터를 저장하는 방법이다.
일반적으로 캐시에는 많은 장점이 있기 때문에 나는 단지 앞부분에 흥미가 있는 것만 지적하고 싶다

요청 감소

즉각적인 검색 응답

을 통한 대응 능력 향상

사용 시기

자주 변경되지 않는 응답

자주 어플리케이션 주소 지정 요청

오프라인 환경을 위한 인터넷 연결 없이 일부 데이터 표시

또 많은 다른 용례가 있는데, 이것은 모두 너의 상업 사례에 달려 있다.

구현

우선, 당신은 실행해야 합니다. npm install @ezzabuzaid/document-storage 우리는 이 라이브러리를 사용하여 서로 다른 저장소에 접근하고 통일할 것입니다. 물론, 당신은 당신이 적절하다고 생각하는 모든 것을 사용할 수 있습니다.
캐시 항목을 표시하는 항목 종류를 설명합니다.

/**
 * class Represent the entry within the cache
 */
export class HttpCacheEntry {
    constructor(
        /**
         * Request URL
         *
         * will be used as a key to associate it with the response
         */
        public url: string,
        /**
         * the incoming response
         *
         * the value will be saved as a string and before fetching the data we will map it out to HttpResponse again
         */
        public value: HttpResponse<any>,
        /**
         * Maximum time for the entry to stay in the cache
         */
        public ttl: number
    ) { }
}

의존 주입을 처리하기 위해 주입 영패를 만듭니다.
루트 디렉터리에 제공할 수 있도록 프로그램 범위 내에서 등록해야 합니다.
나는 이곳에서 IndexedDB를 사용하지만, 이것은 너의 선택이다.

export const INDEXED_DATABASE = new InjectionToken<AsyncDatabase>(
    'INDEXED_DB_CACHE_DATABASE',
    {
        providedIn: 'root',
        factory: () => new AsyncDatabase(new IndexedDB('cache'))
    }
);

다음은 사용 가능한 저장소의 목록입니다

로컬 스토리지

세션 스토리지

IndexedDB

메모리

WebSql

캐시 API

과자

저장을 설정한 후, 우리는 저장과 검색 기능을 실현해야 한다

@Injectable({
    providedIn: 'root'
})
export class HttpCacheHelper {
    private collection: AsyncCollection<HttpCacheEntry> = null;

    constructor(
        @Inject(INDEXED_DATABASE) indexedDatabase: AsyncDatabase,
    ) {
        // collection is a method the came from `document-storage` library to originze /
        // the data in different namespaces, so here we defined 'CACHE' namespace to
        // save all cache related things to it
        // collection provide different method to store are retrive data
        this.collection = indexedDatabase.collection('CACHE');
    }

    /**
     *
     * @param url: request URL including the path params
     * @param value: the request-response
     * @param ttl: the maximum time for the entry to stay in the cache before invalidating it
     *
     * Save the response in the cache for a specified time
     *
     */
    public set(url: string, value: HttpResponse<any>, ttl: number) {
        return this.collection.set(new HttpCacheEntry(url, value, ttl));
    }

    /**
     *
     * @param url: request URL including the path params
     *
     * Retrieve the response from the cache database and map it to HttpResponse again.
     *
     * if TTL end, the response will be deleted and null will return
     */
    public get(url: string) {
        return from(this.collection.get((entry) => entry.url === url))
            .pipe(
                switchMap((entry) => {
                    if (entry && this.dateElapsed(entry.ttl ?? 0)) {
                        return this.invalidateCache(entry);
                    }
                    return of(entry);
                }),
                map(response => response && new HttpResponse(response.value)),
            );
    }

    /**
     * Clear out the entire cache database
     */
    public clear() {
        return this.collection.clear();
    }

    private invalidateCache(entry: Entity<HttpCacheEntry>) {
        return this.collection.delete(entry.id).then(_ => null);
    }

    private dateElapsed(date: number) {
        return date < Date.now();
    }
}

현재 주입HttpCacheHelper과 set 함수만 사용하면 됩니다
잠시 후, 우리는 코드를 최대한 명확하게 하기 위해 차단기에서 set과 get 함수를 다른 층으로 사용할 것입니다.

캐시 실패

만약 데이터가 메모리에 저장된다면 모든 것이 정상적이지만 서버 데이터베이스가 업데이트되었습니다. 최종적으로 브라우저 메모리의 데이터를 업데이트하여 서버의 데이터와 일치하도록 합니다.
이 점을 실현할 수 있는 방법은 WebSocket/sSE 연결을 켜서 브라우저에 업데이트를 알리거나 데이터의 만료 시간(TTL)을 설정하거나 캐시에 대한 버전 제어를 통해 버전을 변경할 때 오래된 데이터가 무효가 되도록 하는 것과 같다.

TTL

《살아있는 시간》은 기록을 위해 유한한 수명을 설정하는 방법이다. 이렇게 하면 우리는 그것이 언제 정체가 될지 한층 더 알 수 있다.
위의 예에서 TTL이 만료되었는지 확인합니다.

버전 키

버전 키로 TTL을 바꿀 수 있습니다. 그러면 날짜가 지났는지 확인하지 않고 버전이 바뀌었는지 확인할 수 있습니다
저는 두 가지 방법을 볼 수 있어요.

포장에 규정된 버전을 사용합니다.json

API

에서 버전 읽어들이기
e, g: 현재 버전은 캐시 항목과 함께 저장됩니다. 데이터를 다시 가져올 때마다 캐시 항목의 버전이 응용 프로그램 버전과 같은지 확인한 다음에 이 항목을 되돌리거나 삭제할 수 있습니다.
패키지 json 버전을 어떻게 처리하는지에 대한 더 많은 설명은 본문article을 읽는 것을 권장합니다.

WebSocket/SSE

주문형

사용자로 하여금 서버에서 최신 데이터를 가져오는 것을 책임지게 하다

원 요청
예를 들어 헤드 요청

을 사용할 수 있습니다.

사용법

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { HttpCacheHelper, HttpCacheEntry } from './cache/cache.helper';
import { switchMap, tap } from 'rxjs/operators';
import { of } from 'rxjs';

@Injectable()
export class ExampleService {

    constructor(
        private httpClient: HttpClient,
        private httpCacheHelper: HttpCacheHelper
    ) { }

    getData() {
        const url = '/endpoint-url';
        // Check if there's data in the cache
        this.httpCacheHelper.get(url)
            .pipe(switchMap(response => {
                // return the cached data if available
                if (response) {
                    return of(response);
                }
                // fetch data from the server
                return this.httpClient.get<HttpResponse<any>>(url, { observe: 'response' })
                    .pipe(tap((response) => {
                        // save the response in order to use it in subsequent requests
                        this.httpCacheHelper.set(url, response, 60);
                    }))
            }));
    }

}

우선, 우리는 데이터가 캐시에 있는지 확인하고, 사용할 수 있으면 되돌아오고, 사용할 수 없으면 백엔드를 호출하여 데이터를 얻은 다음, 후속 호출에서 사용할 수 있도록 캐시에 저장합니다

캐시 정책

우리가 실현한 '캐시 우선' 정책과 같이 클라이언트 캐시나 서버에서 데이터를 얻는 방법과 시기를 결정하는 방법은 다르다.

캐시 우선 순위

캐시에서 데이터를 가져오는 우선 순위가 높다는 것을 의미합니다

네트워킹 우선
반대로 네트워크에서 데이터를 얻습니다. 오류가 발생하거나 인터넷 연결이 없으면 캐시를 사용하십시오.

위의 정책은 읽기 요청에 적용됩니다.*
이 밖에 읽기 요청을 캐시할 수 있는 방법도 있다
e, g: 사용자의 이동을 추적하는 계기판이 있습니다. 모든 이동을 제출할 필요가 없기 때문에 모든 이동을 캐시에 저장하고 일정 시간 후에 제출할 수 있습니다

나는 서면 요청의 캐시를 설명할 생각은 없고, 단지 이것이 가능하다는 것만 알 뿐이다.
요약

상점마다 자신만의 특색이 있다.

캐시가 효력을 잃는 것은 필수적입니다. 최신 데이터를 항상 확보해야 합니다.

데이터베이스는 단지 화려한 이름일 뿐이다.
영어를 못해서 미안해요.