Angular 2 delay before send http request

Question

I'm executing some requests in loop for the same API. On server-side I need to check the previous result to make some changes. But I can't see the previous result if requests are more than one in loop.

in component:

this.service.createEmail(...).delay(5000).debounceTime(5000).timeout(5000).subscribe(...);

and in service:

createEmail(...): Observable<Json> {
    return this.http
            .post('url',
              JSON.stringify(model),
              { headers: this.headers })
            .delay(5000).debounceTime(5000).timeout(5000)
            .map((response: Response) => {
                return this.responseService.extractData(response);
            })
            .catch(error => {
                return this.errorService.handleError(error);
            });
        }

didn't help me. Needed imports exist. Just js setInterval helped me.

How can I do delay before http request in other ways?

have you tries setTimeout(() => { .. }, 5000) ? Maybe that might help — Shan-Desai
– Shan-Desai, Commented Dec 1, 2017 at 10:50
The problem is that you are making the requests in a loop. The loop doesn't wait for timeout and tries to fire all requests in nearly the same time. And debounce will make sure that only the last request is fired. Thats why you can't see more than 1 response. If you can drop the loop completely and use observable chaining with concatMap that will work. — Alex
– Alex, Commented Dec 1, 2017 at 12:19

mickaelw · Accepted Answer · 2017-12-01 12:47:05Z

1

You can use switchMap and timer:

createEmail(...): Observable<Json> {
   return Observable
            .timer(5000)
            .switchMap(() => 
                this.http.post(
                  'url', 
                  JSON.stringify(model),
                  {headers: this.headers}
                )
            )
            .map((response: Response) => {
                return this.responseService.extractData(response);
            })
            .catch(error => {
               return this.errorService.handleError(error);
            });
}

Before the switchMap you can add debounceTime and another rx operator.

I invite you to check the documentation of switchMap to have more information: https://www.learnrxjs.io/operators/transformation/switchmap.html

You can use .delay when you don't want delivered the result of the observable immediately. For example, I use it when I want simulate the delay of the response of the API.

edited Dec 1, 2017 at 12:47

answered Dec 1, 2017 at 12:08

mickaelw

1,5132 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

A. Gladkiy Over a year ago

No, simply requests doesn't go to the server

mickaelw Over a year ago

@A.Gladkiy Do you import specifically each rxjs operator? Like import "rxjs/add/operator/map"

A. Gladkiy Over a year ago

Yes, switchMap, map, timer, catch

mickaelw Over a year ago

@A.Gladkiy Observable too? And you have wait 5 sec :)

A. Gladkiy Over a year ago

Yes, Observable too, I think I would have errors in that case

|

Collectives™ on Stack Overflow

Angular 2 delay before send http request

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related