Angular Cli : How do I stop the server from sending a continuous request?

Question

How can i stop The second request before announcing the previous results ? in Angular Cli

For example Quotes

This is my quotes.component.ts :

import { Component, OnInit } from '@angular/core';
import { Response } from '@angular/http';
import {Quote} from "../quote.interface";
import {QuoteService} from "../quote.service";

@Component({
    selector: 'app-quotes',
    templateUrl: './quotes.component.html',
    styleUrls: ['./quotes.component.css']
})
export class QuotesComponent implements OnInit {
    quotes:Quote[];
    loading = false;
    busy = false;


    constructor(private quoteService:QuoteService) {
    }

    ngOnInit() {
    }

    onGetQuotes() {
        if (this.busy == false) {
            this.loading = true;
            this.busy = true;
            this.quoteService.getQuotes()
                .subscribe(
                    (quotes:Quote[]) => this.quotes = quotes,
                    (error:Response) =>console.log(error),
                    this.loading = false,
                    this.busy = false
                );
        }else{
            alert('continuous request')
        }
    }


}

As you see i set "busy = false;" and set an "if" to

run the code if busy == false But when I send another request, twice or more ... the server accepts all requests

How can i stop The second request before announcing the previous results ?

When is this even called, and where is the "second" request you are talking about? Also, your boolean flags are set before response has been received since this is asynchronous. — AT82, Apr 19 '18 at 17:16
the second request is just happen when you click at submit btn — Ben_Rmb, Apr 19 '18 at 17:37
This is asynchronous, so you are setting the boolean flags immediately as `false` while the request is happening, not when it has finished :) — AT82, Apr 19 '18 at 17:40
This link can help to understand asynchronicity: https://stackoverflow.com/questions/43055706/how-do-i-return-the-response-from-an-observable-http-async-call-in-angular2 — AT82, Apr 19 '18 at 17:40

score 0 · Answer 1 · answered Apr 19 '18 at 17:23

Assuming QuoteService.getQuotes() returns an rxjs/Observable, the subscribe method has the following signature: Observable.subscribe([successCallback, errorCallback, completeCallback]). The lines this.loading = false; this.busy = false; are part of neither successCallback nor errorCallback; they are executed immediately, and you're actually passing four parameters to subscribe.

Either expand the code in both callbacks to include the two lines as follows:

this.quoteService.getQuotes().subscribe(
    (quotes:Quote[]) => {
        this.quotes = quotes;
        this.loading = false;
        this.busy = false;
    }, 

    (error: Response) => {
        console.log(error);
        this.loading = false;
        this.busy = false;
    });

Or, better still, use finally:

this.quoteService.getQuotes()
.finally(() => {
    this.loading = false;
    this.busy = false;
})
.subscribe(
    (quotes:Quote[]) => this.quotes = quotes, 
    (error: Response) => console.log(error)
);

Angular Cli : How do I stop the server from sending a continuous request?

1 Answers1