Question

我有以下阻止代码。

if (response.messageCode === MESSAGE_CODE.SUCCESSS_AND_GENERATE_PDF) {
                                    // Open review pdf
                                    debugger;
                                    this.isOpenReviewPDF = true;
                                    setTimeout(() => {
                                        if (this.orderReviewPdfComponent.isViewInit) {
                                            setTimeout(() => {
                                                this.exportOrderReviewPDFAsync(this.orderEntry.customerOrderRequest.customerOrderId)
                                                    .then(() => {
                                                        this.successDialog(Message.TITLE_SAVE_BALANCE_SHEET_SUCCESSFULLY, Message.BODY_SAVE_BALANCE_SHEET_SUCCESSFULLY(this.orderEntry.customerOrderRequest.customerOrderId));
                                                        setTimeout(() => {
                                                            this.loading = false;
                                                        }, 300);
                                                    })
                                                    .catch(() => {
                                                        this.errorDialog(Message.TITLE_EXPORT_PDF_ORDER_ENTRY_FAILURE, Message.BODY_EXPORT_PDF_ORDER_ENTRY_FAILURE(this.orderEntry.customerOrderRequest.customerOrderId));
                                                        setTimeout(() => {
                                                            this.loading = false;
                                                        }, 300);
                                                    });
                                            });
                                        } else {
                                            this.successDialog(Message.TITLE_SAVE_BALANCE_SHEET_SUCCESSFULLY, Message.BODY_SAVE_BALANCE_SHEET_SUCCESSFULLY(this.orderEntry.customerOrderRequest.customerOrderId));
                                            this.loading = false;
                                        }
                                    });
                                }

如何通过结果异步使代码更清晰？我刚刚更新了代码

Answer 1

我更喜欢使用Observable。使用它有很多优点。

1）易于使用。

2）您可以subscribe进行回复。

3）您可以取消回复。

4）移入下一步就在您手中。如您在我的答案中所见，我使用了 next（）和 complete（）。当您随后调用此代码时，代码将继续前进。

因此，当您要使用同步流时。这是最合适的选择。

5）您可以延迟该过程。无需使用setTimeout()...。

6）您可以创建您自己的Observable ，并且还应该手动subscribe()和unsubscribe() ... :)

尝试这种方式

if (this.orderReviewPdfComponent.isViewInit) {
    return new Observable<any>(observer => {
        this.exportOrderReviewPDFAsync(this.customerOrderId)
            .then(() => {
                this.successDialog('success');
                    this.loading = false;
                    observer.delay(3000);
                    observer.next();
                    observer.complete();
            })
            .catch(() => {
                this.errorDialog('error');
                    this.loading = false;
                    observer.delay(3000);
                    observer.next();
                    observer.complete();
            });     
      })                    
} else {
    this.successDialog('success');
    this.loading = false;
    observer.next();
    observer.complete();
}

Answer 2

您可以尝试以下方法：

if (this.exportOrderReviewPDFAsync(this.customerOrderId) {
    return async () => {
        try {
            await this.exportOrderReviewPDFAsync(this.customerOrderId)
        } catch (error) {
            this.errorDialog('error')
            setTimeout(() => {
                this.loading = false
            }, 300)
        }
        this.successDialog('success')
        setTimeout(() => {
            this.loading = false
        }, 300)
    }
}

Answer 3

完全同意@Dan注释，因为Angular将使用Zone.js触发异步代码的更改检测，因此不需要setTimeout代码块。

if (this.exportOrderReviewPDFAsync(this.customerOrderId) {
    return async () => {
        try {
            await this.exportOrderReviewPDFAsync(this.customerOrderId);
            this.successDialog('success');
            this.loading = false;
        } catch (error) {
            this.errorDialog('error');
            this.loading = false;
        }

    }
}

结果与Angular 5异步

3 个答案: