Tips for delaying code execution in Angular until the service constructor has been called and completed

Question

Tips for delaying code execution in Angular until the service constructor has been called and completed

I have successfully stored the api_url in IndexedDB using NgxIndexedDBService. However, I am encountering an issue where I need to fetch the api_url before any service call is made. The problem arises when I attempt to call a service method from the constructor of a component, resulting in an exception because the api_url is still undefined while the subscribe method is fetching data from IndexedDB.

this.dbService.getByKey('CompanyInfo', 'test').subscribe((key: any) =>
{
    this.apiendpoint = key.API_URL;
});

Can anyone suggest an approach to delay the execution until the service constructor has completed? Alternatively, are there any other suggestions for handling this situation?

angular typescript

Answer 1

Answer №1

One way to ensure the apiendpoint is valid before using it is by wrapping it with a function that waits until the data is ready:

@Output() public apiendpointChanged: Subject<any> = new Subject();

this.dbService.getByKey('CompanyInfo', 'test').subscribe((key: any) =>
{
    this.apiendpoint = key.API_URL;
    this.apiendpointChanged.next(this.apiendpoint);
});

To create a function that checks if the data is already filled and returns it, or waits until the data is filled:

public getData(): Promise<any> {
    return new Promise((resolve, reject) => {
        try {
            if (this.apiendpoint) {
                resolve(this.apiendpoint)
            } else {
                const subs = this.apiendpointChanged.subscribe(data => {
                    resolve(this.apiendpoint)
                    subs.unsubscribe();
                })
            }
        } catch (error) {
            reject(error)
        }
    })
}

When you need the value of apiendpoint, simply add this call:

await getData();

Answer 2

One way to ensure the apiendpoint is valid before using it is by wrapping it with a function that waits until the data is ready:

@Output() public apiendpointChanged: Subject<any> = new Subject();

this.dbService.getByKey('CompanyInfo', 'test').subscribe((key: any) =>
{
    this.apiendpoint = key.API_URL;
    this.apiendpointChanged.next(this.apiendpoint);
});

To create a function that checks if the data is already filled and returns it, or waits until the data is filled:

public getData(): Promise<any> {
    return new Promise((resolve, reject) => {
        try {
            if (this.apiendpoint) {
                resolve(this.apiendpoint)
            } else {
                const subs = this.apiendpointChanged.subscribe(data => {
                    resolve(this.apiendpoint)
                    subs.unsubscribe();
                })
            }
        } catch (error) {
            reject(error)
        }
    })
}

When you need the value of apiendpoint, simply add this call:

await getData();

Tips for delaying code execution in Angular until the service constructor has been called and completed

Answer №1

Similar questions

Combining an array into another array using the same key in JavaScript

Whenever I update the values in my input using the ngModel attribute, all of my arrays stored in an object also get updated

Issue encountered during the creation of a new Angular application (npm ERROR! 404 Not Found: @angular/animations@~7.1.0.)

Encountering error codes TS1005 and TS1109 while trying to run an Angular 6 project

Steps for setting up Angular 5 on your system

Next.js routes handlers do not have defined methods parameters

Eliminate the loading screen in Ionic 2

Encountered an issue in React and Typescript where the argument type is not compatible with the parameter type 'EventListenerOrEventListenerObject'

Do I have to create all the classes returned when consuming a JSON web service in Angular/Typescript?

Exploring Objects within an Array in Ionic 2 and AngularJS 2

Troubleshooting npm installation issues with Angular 2 Quickstart guide (URL: https://angular.io/docs/js/latest/quickstart.html)

What is the method to retrieve a chat that has been ended with JavaScript SDK?

TypeScript modules located within the node_modules directory and then deployed within the wwwroot folder

Executing numerous $http calls in Ionic2

Leveraging async/await in Firebase functions along with the once() method

Building a custom menu component in AngularCli using primeNG - a step-by-step guide

Dispatch a websocket communication from a synchronous function and retrieve the information within the function itself

Tips for accessing data in Angular 2

Update the input for a component within the ngOnChanges method, and ensure that the OnPush change

Attempting to launch an Angular web application on Azure's Linux-based Web App service