Can't have a timeout of over 2 minutes with this.http.get?

Question

My angular 4.3.2 code is calling my back-end service that takes 2-4 minutes to return. Using just the default this.http.get code, I see that the default timeout kicks in after 2 minutes. However when I try to put in a timeout of anything OVER 2 minutes, it fails in that it will never let the timeout be over 2 minutes.

I've tried with 100, 100000 (1.7m) and 114000(1.9m) and those work in that it gets timed out right at those values. But when I try 126000 (2.1m), 180000 (3m) and 1800000 (30m), again I see it times out after 2 minutes.

this.http.get('myUrl')
.timeout(126000)
.map((res: Response) => this.convertResponse(res));

I've also tried it with .timeoutWith(126000, Observable.throw(new Error("Timed out"))) to no avail.

Answer 1

You can not change the web browser's network timeout setting for HTTP requests. The timeout() operator throws a JavaScript error when the timer is reached, but this has nothing to do with the network timeout for communications.

For example; I can use the timeout() operator on any observable.

of("hello").pipe(delay(5000), timeout(1000));

The above will timeout after 1 second.

My angular 4.3.2 code is calling my back-end service that takes 2-4 minutes to return

The server must transmit a HTTP header and a partial body during the duration of 2-4 minutes. This is required to continue the HTTP connection, and there is nothing the client can do to keep the connection alive.

It is a bad practice for a HTTP request to not complete quickly.

You can either ask the server to start a task, and then poll on an interval to see if the task is complete, or you can use websockets to communicate with the server and remain connected until it is complete.

Both approaches are broad topics and I can't go into more details than that.

Answer 2

I don't think it's a problem with the browser's network timeout, since I can make a much longer request using jQuery.ajax(), without even transmitting an HTTP header or a partial body from the backend, and the request is kept alive.

I didn't get a reply from you in the comments, but I was having this exact issue on my dev machine. I was using the proxy config, and the proxy's default timeout is 120 seconds (2 minutes). If that's your case, you just need to define a higher value in the configuration.

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "timeout": 360000
  }
}

But I agree with @Reactgular that in most cases, you'll want HTTP requests that return quickly.