The response from the Http GET request in the Angular web service app was delayed

Question

The response from the Http GET request in the Angular web service app was delayed

I am currently working with Angular CLI version 8.3.2 and Node version 10.16.3 on win32 x64. My project involves integrating an Angular frontend with a .NET backend. The frontend communicates with the backend API to retrieve a list of messages using an HTTP GET request, and then displays these messages in the browser.

Here is the implementation of the getMessage function in the WebService service component:

public async getMessage() {
    await this.http.get<Message[]>(this.BASE_URL + '/Messages').subscribe(
        result => {
            if (result) {
                this.updateCollection(result);
            }
        },
        error => console.error(error)
    );
}

Additionally, here is the MessagesComponent that invokes the webService to retrieve the messages:

export class MessagesComponent {
    constructor(private webService: WebService) { 
        console.log("messages has " + webService.messages.length + " entries");
        webService.getMessage();
        console.log("messages has " + webService.messages.length + " entries");
    }
}

Although both functions execute without any errors, the issue lies in the delayed execution of the getMessages function. Despite being called within the constructor of the MessagesComponent, it appears to fetch the data only after the constructor, resulting in an empty message list upon rendering the page. I have attempted invoking getMessage without using async/await, however, the behavior persists. How can I ensure the messages are retrieved promptly without latency?

angular typescript http-get

Answer 1

Answer №1

Retrieve data as an observable from a service function.

public fetchData() {
    return this.http.get<Data[]>(this.BASE_URL + '/Data')
        .pipe(
            tap(val => this.updateCollection(result)),
        );
}

Instead of calling the function in the constructor, it is recommended to call it in the ngOnInit method.

export class DataComponent implements OnInit {
    constructor(private dataService: DataService) {}

    ngOnInit(){
        this.dataService.fetchData()
            .subscribe(
            result => {
               // perform actions
            },
            error => console.error(error)
        );
    }
}

Answer 2

Retrieve data as an observable from a service function.

public fetchData() {
    return this.http.get<Data[]>(this.BASE_URL + '/Data')
        .pipe(
            tap(val => this.updateCollection(result)),
        );
}

Instead of calling the function in the constructor, it is recommended to call it in the ngOnInit method.

export class DataComponent implements OnInit {
    constructor(private dataService: DataService) {}

    ngOnInit(){
        this.dataService.fetchData()
            .subscribe(
            result => {
               // perform actions
            },
            error => console.error(error)
        );
    }
}

Answer 3

Answer №2

My usual approach is to have the service handle the observable return. Here's an example:

export class MessagesComponent {
    messages: Message[];
    constructor(private webService: WebService) { 
        webService.getMessage().subscribe(messages => {
            this.messages = messages;
        });
    }
}

However, it's recommended to move this logic into the ngOnInit method in the end.

Answer 4

My usual approach is to have the service handle the observable return. Here's an example:

export class MessagesComponent {
    messages: Message[];
    constructor(private webService: WebService) { 
        webService.getMessage().subscribe(messages => {
            this.messages = messages;
        });
    }
}

However, it's recommended to move this logic into the ngOnInit method in the end.

The response from the Http GET request in the Angular web service app was delayed

Answer №1

Answer №2

Similar questions

Guide on setting the number of records to display on each page using ngx pagination in Angular 4

Setting up personalized colors for logging in Angular 2 with ng2-logger

Differences between Typescript Import and JavaScript import

Make sure that the input for a function is a valid key within a specific interface, and that the corresponding value in the interface is

Guide on maintaining Spring Security authentication across Angular front-end

Angular and Bootstrap do not support margin styles

Visibility in classes can shift once a new file is imported

Why does my export function get executed every time the TextInput changes?

Leveraging the expand function for pagination through recursive invocations

Load components dynamically and place them in a flexible position based on the context

changing the dropdown options and button label when a value is inputted into the input field

What is the best approach to perform type checking on a function that yields varying types depending on the values of its

What is the step-by-step guide for implementing an access limiter on an interface

Display Angular elements within dynamically injected HTML

Typescript Array does not adhere to correct data type

Struggling to implement the proper authentication method with API in Ionic

What is the evaluation process for conditions like someItem?.someField==somevalue in Angular?

Changing JSON names to display on a webpage

Issue with typing in subscription encountered in Typescript RXjs version 6.6.0

Is there a way to pass a token variable from the main page to an iframe without relying on a post message?