How to handle long time request in Angular 4?

Question

I am having thouble with a request, in Angular 4, that takes really long. The backend is in .Net Core 2.0 that connects to an Oracle DB. It should wait for a long query to run in the database to get the data and send it to the client. However, it seems that the client is unable to wait until the end of the process (the return of all records), what I get is the error:

Failed to load resource: the server responded with a status of 502 (Bad Gateway)

This error occurs when a CGI application does not return a valid set of HTTP headers, or when a proxy or gateway was unable to send the request to a parent gateway. You may need to get a network trace or contact the proxy server administrator, if it is not a CGI problem.

It is not a Timeout error, as I thought it'd be. Here is the code of my request:

exportExcel(dadosConsulta: DadosConsultaModel) : Promise<any>{
      let url ="/api/Relatorios/exportToExcel";      
      return this.http
      .post(url, JSON.stringify(dadosConsulta),{ headers: this.headers })
      .timeout(500000)
      .toPromise()
      .then(data => data.json())
      .catch(this.handleError);
  }

How can I prevent this from happening?

score 1 · Answer 1 · answered Oct 13 '17 at 14:50

I worked with oracle, long time request querys, and observables and didn't have that problem.

Something like this

login(account: string, password: string, user: string): Observable <any> {

let body = new URLSearchParams();

body.set('account', account);
body.set('password', password);
body.set('user', user);

    return this.http.post(this.globalVars.apiUrl + 'login', body)
        .map((res: any) => {
            let result = res.json().data.result;
            let data = res.json().data;
            this.client.auth = {
                authCode: result.authCode,
                token: result.token,
            };
            this.firstLogin = data.firstLogin;
            return this.client;
        })
        .catch((error: any) => {
            console.log('error', error._body);                                
            return Observable.throw(error._body);                
        })
        .timeoutWith(25000, Observable.throw(new Error('Connection Error')))
}}

score 1 · Accepted Answer · answered Oct 17 '17 at 14:43

The problem was actually coming from IIS, and to solve this I had to add a web.config to my project (which is not created by default) and modify the 'aspNetCore' tag like this:

<aspNetCore **requestTimeout="00:20:00"**  processPath="%LAUNCHER_PATH%" arguments="%LAUNCHER_ARGS%" stdoutLogEnabled="false" stdoutLogFile=".\logs\stdout" forwardWindowsAuthToken="false"/>

Got it from this post: Timeouts with long running ASP.NET MVC Core Controller HTTPPost Method

How to handle long time request in Angular 4?

2 Answers2