캐싱은 모든 프레임워크에서 배워야 할 가장 중요한 것 중 하나입니다.

오늘은 Rxjs를 사용하여 원하는 위치(로컬 스토리지, 메모리, 쿠키 등)에 API 응답을 캐싱하는 가장 쉽고 쉬운 방법을 설명하겠습니다.

이 방법은 React, Vue, Angular 또는 기타 프레임워크에서 작동합니다.

1- API 서비스 생성

API 서비스는 모든 API 호출을 포함할 수 있는 좋은 방법입니다(Angular를 사용하는 경우 이미 갖고 있는 것 같습니다).

Angular에서는

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks');
  }


}

다른 프레임워크의 경우
아직 설치하지 않은 경우 다음 라이브러리를 설치해야 합니다.

$ npm install axios rxjs axios-observable

이와 같이 API 서비스를 만듭니다.

참고: 이해가 되지 않으면 chech할 수 있습니다.

import Axios, { AxiosObservable } from "axios-observable";

class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks');
        }

}

export const _TaskService=TaskService.Instance;

2- 캐싱 수행

캐싱을 위해 선택할 수 있는 옵션이 많이 있습니다. 처음에는 Localstorage를 선택한 다음 memory에 저장하는 방법을 보여 드리겠습니다.

1-다음 연산자 가져오기 filter , startWith , taprxjs/operators에서 .

2-pipe()를 사용하여 API 호출에 추가합니다.
각도의 경우

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { filter, startWith, tap } from "rxjs/operators";

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks')
    .pipe(
                tap(res => localStorage['chash_key'] = JSON.stringify(res)),
                startWith(JSON.parse(localStorage['chash_key'] || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );
  }


}

다른 프레임워크의 경우

import Axios, { AxiosObservable } from "axios-observable";
import { filter, startWith, tap } from "rxjs/operators";


class TaskService {

    private static _instance: TaskService;

    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks')
 .pipe(
                tap(res => localStorage['chash_key'] = JSON.stringify(res)),
                startWith(JSON.parse(localStorage['chash_key'] || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );

        }

}

export const _TaskService=TaskService.Instance;

축하합니다. 그게 다야🥳🥳🥳...

설명

여기서는 세 가지 연산자를 사용합니다.

탭
로깅과 같은 조치나 부작용을 투명하게 수행하고자 할 때 사용합니다.

시작
소스에서 방출하기 전에 값을 방출하려는 경우에 사용됩니다.

필터
소스에서 방출을 필터링하려는 경우에 사용됩니다.

왜 우리는 그것들을 사용합니까?

tap를 사용하여 성공적인 API 응답을 Localstorage에 저장합니다.

방출이 소스에서 도착하기 전에 캐시된 값을 방출하기 위해 startWith를 사용하고 캐시 저장소가 비어 있는 경우 빈 개체를 방출하기 위해 localStorage['chash_key'] || '{}'를 추가합니다.
filter를 사용하여 최종 방출을 필터링하므로 캐시 저장소가 비어 있고 startWith 연산자가 빈 개체를 반환하는 경우 filter가 이를 차단합니다.
filter를 추가하지 않으면 프런트 엔드에 버그가 생길 수 있습니다.

참고: 그런데 [] 와 같은 API에서 원시 배열을 가져오는 경우 startWith(JSON.parse(localStorage['chash_key'] || '[]'))를 수행하고 filter 연산자를 삭제할 수 있습니다.

원한다면 여기서 멈출 수 있습니다. 이제 메모리에 캐시하는 방법을 설명하겠습니다.

메모리에 캐시하려면 몇 가지만 변경하면 됩니다.

1- 클래스에서 개인 var 유형any 선언
2-tap 연산자를 사용하여 해당 var에 API res를 저장합니다.

귀하의 코드는

각도의 경우

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { filter, startWith, tap } from "rxjs/operators";

@Injectable({
  providedIn: 'root',
})
export class TaskService {
  constructor(private http: HttpClient) {}

  private TasksCache: any;


all_tasks():Observable<any>
  {
    return this.http.get<any>('example.com/api/tasks')
    .pipe(
                tap(res => this.TasksCache = JSON.stringify(res)),
                startWith(JSON.parse(this.TasksCache || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );
  }


}

다른 프레임워크의 경우

import Axios, { AxiosObservable } from "axios-observable";
import { filter, startWith, tap } from "rxjs/operators";


class TaskService {

    private static _instance: TaskService;
    private TasksCache: any;


    public static get Instance() {
        return this._instance || (this._instance = new this());
    }

   all_tasks(): AxiosObservable<any> {
            return Axios.get<any>('example.com/api/tasks')
 .pipe(
                tap(res => this.TasksCache = JSON.stringify(res)),
                startWith(JSON.parse(this.TasksCache || '{}')),
                filter(res=>Object.keys(res).length !== 0), 
            );

        }

}

export const _TaskService=TaskService.Instance;

끝...

이제 처음으로 데이터를 가져오려고 하면 성공적인 응답이 캐시되어 다음 가져오기에 사용됩니다.

유용한 링크 🔗

https://rxjs.dev/api/operators/tap

https://rxjs.dev/api/operators/filter

https://rxjs.dev/api/operators/startWith

자오시양 / 축 관찰 가능

rxjs 방식으로 축을 사용합니다. Promise 대신 Observable 사용

축 관찰 가능

브라우저 및 node.js용 Observable(Promise와 반대) 기반 HTTP 클라이언트
rxjs(observable) 방식으로 axios를 사용하고 싶습니까? 우리는 거기에 갈!
axios-observable의 이 API는 axios의 API와 거의 동일하여 원활한 전환을 제공합니다. 따라서 문서는 axios 중 하나를 반영합니다(몇 가지 예외는 지적될 것입니다).

특징

브라우저에서 XMLHttpRequests 만들기

node.js에서 요청http을 수행합니다

.

Observable API를 지원합니다

.

가로채기 요청 및 응답

변환 요청 및 응답 데이터

(v1.1.0의 새로운 기능) 구독 취소를 통해 요청 취소

JSON 데이터에 대한 자동 변환

보호를 위한 클라이언트 측 지원XSRF

설치 중

npm 사용
참고: axios 및 rxjs는 피어 종속성입니다.

$ npm install axios rxjs axios-observable

예시

GET 요청 수행

import Axios from  'axios-observable';
// or const Axios = require('axios-observable').Axios;
// Make a request for a user with a given ID
Axios.get('/user?ID=12345')
  .

…


View on GitHub

.