时间戳

首页 > 解决方案 > Angular：HTTP调用完成之前的函数返回值

angular - Angular：HTTP调用完成之前的函数返回值

问题描述

我必须计算所选日期之间的总工作日数，并且我使用以下逻辑

this.businessDays = this.calcBusinessDays(this.startDate, this.endDate);

calcBusinessDays(d1: Date, d2: Date) {
        let date1 = new Date(d1);
        let date2 = new Date(d2);
        let oneDay = 1000 * 60 * 60 * 24;
        let difference = Math.floor((date2.getTime() - date1.getTime()) / oneDay);
        let businessDays = 0;
        let i: number;
        this.httpService
            .getHolidays(moment(date1).format('YYYY-MM-DD'), moment(date2).format('YYYY-MM-DD')) //start-date and end date are a part of query params in YYYY-MM-DD format.
            .subscribe((res: HttpResponse<HolidaysListInterface>) => {
                this.holidaysList = res.body.holidayDates;
                for (i = 0; i < difference; ++i) {
                    let day = date1.getDay();
                    let isHoliday = this.holidaysList.indexOf(moment(date1).format('YYYY-MM-DD')) != -1;
                    if (day != 0 && day != 6 && !isHoliday) {
                        ++businessDays;
                    }
                    date1.setDate(date1.getDate() + 1);
                }
            });
        return businessDays;
    }

现在这里的问题是我0每次都得到一个返回值。该函数甚至在 Http 调用完成之前就返回了该值。解决方法是什么？

标签： angularajaxtypescriptreturn

解决方案

因为这就是异步请求的工作方式。无论您指定的实际执行顺序，它们都是异步执行的。你可以在这里了解更多。

您的问题的一种解决方案是

任何直接依赖于 HTTP 调用响应的内容都应该在订阅中

或者换句话说

在需要响应的地方订阅

要记住的另一件事是您不能businessDays同步返回异步变量（此处）。

您也可以使用 RxJSmap运算符将响应转换为所需格式

尝试以下

businessDays: any;

someFunc() {
    this.calcBusinessDays(this.startDate, this.endDate).subscribe(
        businessDays => this.businessDays = businessDays,
        error => {
            // always good practice to handle HTTP errors
        }
    );
}

calcBusinessDays(d1: Date, d2: Date): Observable<any> { // <-- return observable here
    let date1 = new Date(d1);
    let date2 = new Date(d2);
    let oneDay = 1000 * 60 * 60 * 24;
    let difference = Math.floor((date2.getTime() - date1.getTime()) / oneDay);
    let businessDays = 0;
    let i: number;
    return this.httpService
        .getHolidays(moment(date1).format('YYYY-MM-DD'), moment(date2).format('YYYY-MM-DD')) //start-date and end date are a part of query params in YYYY-MM-DD format.
        .pipe(
            map((res: HttpResponse<HolidaysListInterface>) => {
                this.holidaysList = res.body.holidayDates;
                for (i = 0; i < difference; ++i) {
                    let day = date1.getDay();
                    let isHoliday = this.holidaysList.indexOf(moment(date1).format('YYYY-MM-DD')) != -1;
                    if (day != 0 && day != 6 && !isHoliday) {
                        ++businessDays;
                    }
                    date1.setDate(date1.getDate() + 1);
                }
                return businessDays; // <-- return modified value here
            })
        );
}

推荐阅读