Tips on how to properly handle Promises in a constructor function

Question

Tips on how to properly handle Promises in a constructor function

My Angular Service is currently making http requests, but I am looking to retrieve headers for these requests from a Promise. The current setup involves converting the promise to an Observable:

export class SomeService {
  constructor(private http: HttpClient, private auth: AuthenticationService) {}

  getInfo(id: string): Observable<any> {
    return this.auth.getToken().pipe(mergeMap((token: any) => { 
      let httpOptions = {
        headers: new HttpHeaders({
          'Content-Type':  'application/json',
          'Authorization': 'Bearer ' + token
         })
        }
        return this.http.get(`${this.serverURL}/info`, httpOptions);
    }))
  }
}



getToken() {
   return from(this.storage.get(TOKEN_KEY));
}

However, making multiple requests for 20-50 requests is not ideal. I aim to fetch the auth token once and use it for all requests. Additionally, there is another header coming from a Promise that needs to be used in the requests. Therefore, I am exploring ways to retrieve async headers only once, preferably in the constructor. How can I accomplish this in this scenario?

javascript angular typescript

Answer 1

Answer №1

Before diving into code optimization, consider whether it is truly necessary. Optimal performance is typically crucial for frequently executed code segments. If you're only making 20 to 50 requests, it may not be a critical area for optimization (other parts of your application may require more CPU resources).

However, if you are determined to enhance this aspect, fetching the token in the constructor could be a viable solution.

export class SomeService {
    // Storing the observable for future use
    private getTokenObservable: Observable<string>;

    constructor(private http: HttpClient, private auth: AuthenticationService) {
        // Retrieve and store the token observable
        this.getTokenObservable = getToken();
    }

    getInfo(id: string): Observable<any> {
        // Combining the two observables
        return zip(
            // Reusing the stored observable
            this.getTokenObservable,
            // Requesting the last login information
            this.auth.getLastLogin()
        ).pipe(mergeMap((result) => {
            const token = result[0];
            const lastLogin = result[1];

            let httpOptions = {
                headers: new HttpHeaders({
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token
                })
            }
            return this.http.get(`${this.serverURL}/info`, httpOptions);
        }))
    }
}

getToken() {
    return from(this.storage.get(TOKEN_KEY));
}

This approach allows multiple subscriptions to the same observable. Therefore, the token observable is fetched and stored only once, and then reused for subsequent requests.

Furthermore, observe the usage of the zip operator from rxjs. This operator merges two observables, enabling the handling of results from both observables within a single function.

Answer 2

Before diving into code optimization, consider whether it is truly necessary. Optimal performance is typically crucial for frequently executed code segments. If you're only making 20 to 50 requests, it may not be a critical area for optimization (other parts of your application may require more CPU resources).

However, if you are determined to enhance this aspect, fetching the token in the constructor could be a viable solution.

export class SomeService {
    // Storing the observable for future use
    private getTokenObservable: Observable<string>;

    constructor(private http: HttpClient, private auth: AuthenticationService) {
        // Retrieve and store the token observable
        this.getTokenObservable = getToken();
    }

    getInfo(id: string): Observable<any> {
        // Combining the two observables
        return zip(
            // Reusing the stored observable
            this.getTokenObservable,
            // Requesting the last login information
            this.auth.getLastLogin()
        ).pipe(mergeMap((result) => {
            const token = result[0];
            const lastLogin = result[1];

            let httpOptions = {
                headers: new HttpHeaders({
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer ' + token
                })
            }
            return this.http.get(`${this.serverURL}/info`, httpOptions);
        }))
    }
}

getToken() {
    return from(this.storage.get(TOKEN_KEY));
}

This approach allows multiple subscriptions to the same observable. Therefore, the token observable is fetched and stored only once, and then reused for subsequent requests.

Furthermore, observe the usage of the zip operator from rxjs. This operator merges two observables, enabling the handling of results from both observables within a single function.

Answer 3

Answer №2

To optimize token retrieval, consider creating a dedicated service solely for getting the token. By storing the token value in a service variable, subsequent requests for the token can bypass unnecessary HTTP calls and quickly provide the token to the requester.

Answer 4

To optimize token retrieval, consider creating a dedicated service solely for getting the token. By storing the token value in a service variable, subsequent requests for the token can bypass unnecessary HTTP calls and quickly provide the token to the requester.

Answer 5

Answer №3

protected _tokenStream = new BehaviorSubject<string>(null);
constructor(...) {
    this.auth.getToken().subscribe(token => this._tokenStream.next(token))
}

fetchData(...) {
this._tokenStream.pipe(
    switchMap(token => // rest remains the same
)

Alternatively, you can create a getter method like below

get tokenStream() {
    return this._tokenStream.pipe(filter(value => !!value))
}

In this scenario, only non-null values will be returned, but if a token is not provided, the process will get stuck.

Answer 6

protected _tokenStream = new BehaviorSubject<string>(null);
constructor(...) {
    this.auth.getToken().subscribe(token => this._tokenStream.next(token))
}

fetchData(...) {
this._tokenStream.pipe(
    switchMap(token => // rest remains the same
)

Alternatively, you can create a getter method like below

get tokenStream() {
    return this._tokenStream.pipe(filter(value => !!value))
}

In this scenario, only non-null values will be returned, but if a token is not provided, the process will get stuck.

Answer 7

Answer №4

To simplify matters, you have the option to develop a utility function in a separate file that can be imported into various parts of your code where this token is needed. Alternatively, if the token is retrieved from a server call, you could create a service to handle it and then inject it wherever necessary.

Another approach is to store this token in a constants file and import it whenever it is needed.

Answer 8

To simplify matters, you have the option to develop a utility function in a separate file that can be imported into various parts of your code where this token is needed. Alternatively, if the token is retrieved from a server call, you could create a service to handle it and then inject it wherever necessary.

Another approach is to store this token in a constants file and import it whenever it is needed.

Tips on how to properly handle Promises in a constructor function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Is there a way to trigger a JavaScript function once AJAX finishes loading content?

Generating modal pages on the fly

NodeJS - The function app.listen is not defined in this context

Error message: React Native encountered a prop type failure when an invalid prop of type array was passed to the Overlay component

Using the Backbone.js library to make secure requests over https

Using caret range and package-lock.json to acquire the most recent non-disruptive versions

A guide on utilizing the javascript function to toggle the checkbox in each row of a gridview

Is there a way to resolve the execution order dependency of JS-CF using a server-side callback function?

A 403 error is thrown by the Microsoft Graph API when attempting to delete the authentication method known as "Microsoft Authenticator"

Authenticate through Twitter when using PhoneGap Cordova

Jquery Timer that can be toggled on and off with a single button

Show an error message in a popup window, following a validation error in Laravel

Passing values from a Laravel controller to a Vue component as a prop

Issue with running the Jquery each function within a textbox inside an ASP.NET gridview

Creating an overloaded callable interface using TypeScript

What is the proper way to utilize RxJS to append a new property to every object within an array that is returned as an Observable?

Refreshing Angular 2 + Firebase app causes user to be logged out

Evaluating the parser for oauth2 implicit grant access_token using javascript

Angular4: The dragstart event is being triggered as a result of the mousedown event

Is it possible to make the mat-menu-item the same size as the mat-menu button in Angular Material v.12?