rxjs：使用 rxjs 自定义运算符更改 HttpRequest

Question

I want to create a custom operator ( caching ) to add new params to `HttpRequest.

const caching = (opt: {maxCacheAge: number} = {maxCacheAge: 30}) => (source: Observable<any>) =>
  new Observable(observer => {

    /*
     * I found the HttpRequest at this level!!!
     */
    const httpRequest = source.source.source.source.value as HttpRequest<any>;     
    const req = httpRequest.clone({
      setParams: {
        maxCacheAge: opt.maxCacheAge.toString()
      }
    });    

    source.source.source.source.value = req;
    /*
     * Here the HttpRequest is changed correctly, 
     * but into HttpInterceptor there is the original request.
     *
     * Moreover, `source` is an internal implementation so is deprecated
     */
    console.log('obs:', source);

    return source.subscribe({
      next(res) { observer.next(res); },
      error(err) { observer.error(err); },
      complete() { observer.complete(); }
    });
  });



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private rest: Rest) {
    this.getCapital('rome').subscribe(res => {
      console.log('res', res);
    });
  }

  getCapital(name: string): Observable<any> {
    return this.rest.get(`https://restcountries.eu/rest/v2/capital/${name}`).pipe(
      caching()
    );
  }

}

Is it possibile change the request using rxjs?

I'm Using Angular 7.2 and rxjs 6.3

Answer 1

Personally I think you're over engineering this, why not make a service that gets data from localStorage or sets data if it's not there now

getCache<T = any>(key:string>:T{
  let cachedValue = this.transferState.get(stateKey, null);
  //check local storage and create state value from there
  if(cachedValue === null){
    cachedValue = localStorage.getItem(key) 
    this.transferState.set(stateKey, cachedValue);
  }
  return cachedValue;
}

then call it with

data = this.serviceName.getCache("keyName")

You may need to build in your get request if there isn't data in your cache to start with though it's null