How to do a method run before each service call?(Angular 7)

Question

I'm trying get a "payload" from localstorage before than execute services method. Actualy i'm trying to do it on constructor method, but sometimes the variable "this.payload" isn't setted when a call a method.

This is my code

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as Globals from '../../globals'; import { Observable, of } from 'rxjs'; import { LocalStorage } from '@ngx-pwa/local-storage'; @Injectable({ providedIn: 'root' }) export class RechargesService { public payload; constructor( private http: HttpClient, public localStorage: LocalStorage ) { this.localStorage.getItem("payload").subscribe((payload) => { this.payload = payload; }) } list(): Observable<any> { return this.http.post(Globals.url_api + "recharges/list", { // Sometimes this.payload isn't setted, i don't know why "payload": this.payload }); } }

What's the correct way to do it? I know that in controller, i shouldn't write anything on constructor method, but in service it's correct?

I would send that payload as a parameter for the list(): function like list(payload) — Prashant Pimpale
– Prashant Pimpale, Commented Apr 9, 2019 at 13:11
This works... But i would like don't write parameter everytime when i call a method... It will more simple if i can get payload from localstorage. — Leandro Castro
– Leandro Castro, Commented Apr 9, 2019 at 13:19

Harun Yilmaz · Accepted Answer · 2019-04-09 13:33:10Z

If you want to get payload before every list() call, you can do it like following:

First create a method returns an observable that gets value from local storage, then use switchMap to return an inner observable (which is HTTP get request)

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as Globals from '../../globals'; import { Observable, of} from 'rxjs'; import { tap, switchMap } from 'rxjs/operators'; import { LocalStorage } from '@ngx-pwa/local-storage'; @Injectable({ providedIn: 'root' }) export class RechargesService { public payload; constructor( private http: HttpClient, public localStorage: LocalStorage ) { } getPayload = () => { return this.localStorage.getItem("payload").pipe(tap(payload => this.payload = payload)); // <--- the tap() may be redundant here. you can simply get payload in list() method } list(): Observable<any> { return this.getPayload().pipe( switchMap(payload => { return this.http.post(Globals.url_api + "recharges/list", {"payload": this.payload}) // <--- You can use payload instead of this.payload since localStorage already returns payload }) ); } }

switchMap: https://www.learnrxjs.io/operators/transformation/switchmap.html

do/tap: https://www.learnrxjs.io/operators/utility/do.html

Thanks for answer, but it don't works... "A representation of any set of values over any amount of time. This is the most basic building block of RxJS." A Observable RxJS must to be the most basic structure on function...
If a function is "any" type, it should return a value... Something like this... I already did erase this code... Sorry.
I forgot to add return to list() method. Edited the question already
Since you use providedIn: 'root', it is a singleton service which means constructor will be called only once on application start up. @ngx-pwa/local-storage performs async operation (the library is made for this), so you need to make sure the async operations is completed before going on any further.
You can search for something like "call a service method on application startup"

Rahul Sharma · Accepted Answer · 2019-04-09 13:31:54Z

1

create a getPayload function tp get local-storage data and use switchMap in list function to pass getPayaload data to api.

getPayload(){ return this.localStorage.getItem("payload"); } list(payload): Observable<any> { return getPayload().pipe( switchMap( (payload) => { return this.http.post(Globals.url_api + "recharges/list", { payload }) }, ) ); }

answered Apr 9, 2019 at 13:31

Rahul Sharma

10.1k1 gold badge20 silver badges41 bronze badges

3 Comments

Leandro Castro Over a year ago

This works... Thanks... But, there is a way that don't need write "return getPayload().pipe( switchMap(..." on every function? Because this i was trying use on constructor method...

Harun Yilmaz Over a year ago

@Leandro How is this different than my answer?

Rahul Sharma Over a year ago

@LeandroCastro if data is not updating that use once.

Rafael Lucini · Accepted Answer · 2019-04-09 13:12:13Z

Use forkJoin Operator

https://www.learnrxjs.io/operators/combination/forkjoin.html

forkJoin( this._myService.makeRequest('Request One', 2000), this._myService.makeRequest('Request Two', 1000), this._myService.makeRequest('Request Three', 3000) ) .subscribe(([res1, res2, res3]) => { this.propOne = res1; this.propTwo = res2; this.propThree = res3; });

It's not i want... I would like call "constructor" before every method... but sometimes the method is running before than constructor...

Collectives™ on Stack Overflow

How to do a method run before each service call?(Angular 7)

3 Answers 3

7 Comments

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

3 Comments

1 Comment

Related