【问题标题】:Angular2 Sequential POST CallsAngular2 顺序 POST 调用
【发布时间】:2017-07-19 13:41:42
【问题描述】:

我有一组 POST 尝试按顺序发送,例如:

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();
    }
}

问题是CTClient 不能在没有CallTracker(通话记录)实体的情况下创建,与CTTelns 相同。同样,在存在 CallTrackerCTClient 实体之前,无法创建 CTClientOffences

我的容器组件实体对象在 POST 返回时被实例化:

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

例如:

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

我的问题是:我可以使用这些对象来限制对后续 POSTS 的调用,直到实例化适当的对象?即我可以用什么代替.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 谢谢,这似乎适用,但我对 rxjs 还是很陌生,在构思解决方案时遇到了麻烦;你能用我的代码提供一个例子吗?我目前拥有自己的服务下的每个实体。

标签: angular http post rxjs client-side


【解决方案1】:

我用这个模式想通了:Angular2 - Multiple dependent sequential http api calls

演示组件:

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
    });
}

容器组件:

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)
        );

}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2016-12-27
    • 2017-07-10
    • 1970-01-01
    • 1970-01-01
    • 2018-11-07
    • 1970-01-01
    • 2017-10-10
    • 1970-01-01
    相关资源
    最近更新 更多