Angular：HTTP调用完成之前的函数返回值答案

【问题标题】：Angular: Function returning value before the HTTP call is finishedAngular：HTTP调用完成之前的函数返回值
【发布时间】：2020-10-15 06:36:00
【问题描述】：

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

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 调用完成之前就返回了该值。解决方法是什么？

【问题讨论】：

标签： angular ajax typescript return

【解决方案1】：

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

解决您的问题的一条线是

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

或者换句话说

在需要响应的地方订阅

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

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

试试下面的

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

【讨论】：