Angular2 Sequential POST Calls

Question

I have a set of POSTs that I am trying to send in sequence of one another, something like:

if (this.ifoForm.valid) {
    if (this.otherCheck && (!this.selectedLang || !this.selectedInterp)) {
        swal('Error!', 'Please choose Language and Interpreter!', 'error');
    } else {
        // create CallTracker entity
        this.createCallLog();
        // create CTClient entity
        this.createCTClient();
        // create CTTeln entity
        this.createCTTelns();
        // create CTClientOffence entities
         this.createCTClientOffences();
    }
}

The thing is that CTClient cannot be created w/o a CallTracker (call log) entity, same with CTTelns. As well CTClientOffences cannot be created until CallTracker and CTClient entities are present.

I have in my container component entity objects that are instantiated when the POSTs return:

private callLog: CallTracker;
private logClient: CTClient;
private logTelns: CTTeln[];
private logCharges: CTClientOffence[];

For example:

public onLogNotify(callLog): void {
    // add new CallTracker entity to database
    this._callTrackerService.addLog(callLog)
        .subscribe(
            res => this.callLog = res,
            err => console.log(err)
        );
}

My question is: can I use these objects to restrict the call to the subsequent POSTS until the appropriate objects are instantiated? i.e. what can I use instead of .timeout():

public onClientNotify(client): void {
    // add new CTClient entity to database
    this._ctClientService.addCTClient(client)
        .timeout(2000) // wait for CallTracker entity to be made
        .subscribe(
            res => this.logClient = res,
            err => console.log(err)
        );
}

@martin Thank you, this seems applicable but I am still very new to rxjs and am having trouble conceptualizing a solution; could you provide an example with my code? I currently have each entity under it's own service. — Milo, Jul 19 '17 at 13:54

Milo · Accepted Answer · 2017-07-19T18:35:43.370

I figured it out using this pattern: Angular2 - Multiple dependent sequential http api calls.

Presentation component:

if (this.ifoForm.valid) {
    if (this.otherCheck && (!this.selectedLang || !this.selectedInterp)) {
        swal('Error!', 'Please choose Language and Interpreter!', 'error');
    } else {
        // perform POSTs
        this.doPostCalls();
    }
}

 @Output() dataNotify: EventEmitter<any> = new EventEmitter<any>();
// CREATE (POST) DATABASE ENTITIES
private doPostCalls(): void {
    // execute functions
    this.createCallLog();
    this.createCTClient();
    this.createCTTelns();
    this.createCTClientOffences();
    // send data to parent component for http calls
    this.dataNotify.emit({
        callLog: this.newCallLog,
        client: this.newLogClient,
        telns: this.telnData,
        charges: this.chargesData
    });
}

Container component:

public onDataNotify(data): void {
    this.callLog = data.callLog;
    this.logClient = data.client;
    this.logTelns = data.telns;
    this.logCharges = data.charges;
    if (this.callLog != undefined) {
        this.createCallTrackerEntity();
    }
}

public createCallTrackerEntity(): void {
    console.log("In: onLogNotify(data)");
    // add new CallTracker entity to database
    this._callTrackerService.addLog(this.callLog)
        .subscribe(
        res => console.log("CallTracker Data Added."),
        err => console.log(err),
        () => this.createCTClientEntity()
        );
}

public createCTClientEntity(): void {
    console.log("In: onClientNotify(client)");
    // add new CTClient entity to database
    this._ctClientService.addCTClient(this.logClient)
        .subscribe(
        res => console.log("CTClient Data Added."),
        err => console.log(err),
        () => this.createCTTelnEntities()
        );
}

public createCTTelnEntities(): void {
    console.log("In: onTelnNoify(telns)");
    // add new CTTeln entity to database
    this._ctTelnService.addCTTeln(this.logNumber, this.logTelns)
        .subscribe(
        res => console.log("CTTeln Data Added."),
        err => console.log(err),
        () => this.createCTClientOffenceEntities()
        ); 
}

public createCTClientOffenceEntities(): void {
    console.log("In: onOffenceNotify(offences)");
    // add mew CTClientOffence entity to database
    this._ctClientOffenceService.addCTClientOffence(this.logNumber, this.maxClientId, this.logCharges)
        .subscribe(
        res => console.log("CTClientOffence Data Added."),
        err => console.log(err)
        );

}

Angular2 Sequential POST Calls

1 Answers1