Chaining RxJS Observables with interval

Question

my first question to the community out here! i'm working on an app which does communicates to the API in the following way

step1: create request options, add request payload --> Post request to API

API responds with a request ID

Step2: update request options, send request ID as payload --> post request to API

final response: response.json

Now the final response can take a bit of time, depending on the data requested. this can take from anywhere between 4 to 20 seconds on an average.

How do i chain these requests using observables, i've tried using switchmap and failed (as below) but not sure how do i add a interval? Is polling every 4 second and unsubscribing on response a viable solution? how's this done in the above context?

Edit1: End goal: i'm new to angular and learning observables, and i'm looking to understand what is the best way forward.. does chaining observable help in this context ? ie after the initial response have some sort of interval and use flatMap OR use polling with interval to check if report is ready.

Here's what i have so far

export class reportDataService { constructor(private _http: Http) { }

headers: Headers;
requestoptions: RequestOptions;
payload: any;
currentMethod: string;


theCommonBits() {
     //create the post request options 
    // headers, username, endpoint
    this.requestoptions = new RequestOptions({
        method: RequestMethod.Post,
        url: url,
        headers: newheaders,
        body: JSON.stringify(this.payload)
    })
    return this.requestoptions;
}
// report data service
reportService(payload: any, method: string): Observable<any> {
    this.payload = payload;
    this.currentMethod = method;
    this.theCommonBits();
    // fetch data 
    return this._http.request(new Request(this.requestoptions))
        .map(this.extractData)
        .catch(this.handleError);
}

private extractData(res: Response) {
    let body = res.json();
    return body || {};
}

private handleError(error: any) {
        let errMsg = (error.message) ? error.message :
        error.status ? `${error.status} - ${error.statusText}` : 'Server error';
    console.error(errMsg); // log to console instead
    return Observable.throw(errMsg);
}

in my component

  fetchData() {
    this._reportService.reportService(this.payload, this.Method)
           .switchMap(reportid => {
            return this._reportService.reportService(reportid, this.newMethod)
        }).subscribe(
        data => {
            this.finalData = data;
            console.info('observable', this.finalData)
        },
        error => {
            //console.error("Error fetcing data!");
            return Observable.throw(error);
        }
        );
}

Answer 1

What about using Promise in your service instead of Observable, and the .then() method in the component. You can link as much .then() as you want to link actions between them.