Angular cache http in local storage

Question

On Ionic 4 Angular 8 project, I try to get information in storage before call API.

Here is my code

public getData(id) {
    return this.storage.get(id).then(
        content => {
            if (content == null) {
                return this.getObject(id).subscribe(
                    result => {
                        return result;
                    }
                );
            } else {
                return content;
            }
        }
    );
}

How can I call the function 'getData ?

myService.getData(id).then

This return string or observable I should subscribe, how to handle both cases ?

Put your string in an Observable with the `of` operator from RxJS to standardize your method call. Moreover, you should put a return type on your method & use RxJS Observable not promise. — Geoffrey Migliacci, Jan 13 '20 at 14:55

wentjun · Accepted Answer · 2020-01-13T15:38:20.740

If you are using RxJS 6, I would recommend you to convert the promise into an observable (using the from operator), and then handle the subsequent operations using pipeable operators, such as tap, or switchMap, depending on the desired behaviour of your method. In this case, we can use switchMap, since we are returning an observable.

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

getData(id) {
  return from(this.storage.get(id))
    .pipe(
      switchMap(content => {
        if (content === null) {
          return this.getObject(id);
        } else {
          return of(content);
        }
      }),
    )
}

From there, you can subscribe to the getData and return the observables.

myService.getData(id).subscribe((res) => {
  // do the rest here
})

Emilien · Answer 2 · 2020-01-13T15:30:37.587

0

You're looking for something like this ?

public getData(id): Observable<any> {
  return this.storage.get(id)
    .then(content => {
      if (content === null) {
        return this.getObject(id);
      } else {
        return of(content);
      }
    }
}

Then you will be able to call it like :

myService.getData(id).subscribe(console.log);

UPDATE

Could you try with this ?

getData(id): Observable<any> {
  return Observable.fromPromise(this.storage.get(id)).switchMap(content => {
    if (content === null) {
      return this.getObject(id);
    } else {
      return of(content);
    }
  })
}

edited Jan 13 '20 at 15:30

answered Jan 13 '20 at 14:56

Emilien

2,701
4
15
25

thank you for your answer. I copied your code and got this error : "TS2740: Type 'Promise>' is missing the following properties from type 'Observable': _isScalar, source, operator, lift, and 6 more." – barden Jan 13 '20 at 15:23
I updated my code, replacing ternary if. Does it give you the same error ? – Emilien Jan 13 '20 at 15:27
I updated my post. Please check. I found this in [this post](https://stackoverflow.com/questions/41585514/how-to-return-observable-after-some-promise-get-resolved-in-ionic-2-angular-2) – Emilien Jan 13 '20 at 15:31
TS2339: Property 'fromPromise' does not exist on type 'typeof Observable'. But if I remove "Observable" on your previous code and chain .then and .subscribe it work as well – barden Jan 13 '20 at 15:40
Alright ! I'm not used to Promise (: If your problem is solved, feel free to edit my post, adding working code :) – Emilien Jan 13 '20 at 15:41

Angular cache http in local storage

2 Answers2