Question

我有一个HttpInterceptor，可将Bearer令牌添加到对WebApi的所有调用中。这个拦截器可以很好地处理我所有的简单服务调用。

但是我有一个地方需要调用2个方法，并使用这两个结果来构建组合模型。我已经使用过MergeMap，ForkJoin和FlatMap来嵌套可观察对象，但是这些似乎都不触发我的HttpInterceptor ...

这是拦截器

export class JwtInterceptor implements HttpInterceptor {

    constructor(private userService: UserService) { }

    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // add authorization header with jwt token if available
        let currentUser = this.userService.getCurrentUser();
        if (currentUser && currentUser.token) {
            request = request.clone({
                setHeaders: {
                    Authorization: `Bearer ${currentUser.token}`
                }
            });
        }

        return next.handle(request);
    }
}

服务呼叫

public getPriceList(): Observable<CuttingGapPartPrice[]> {
    const list = sessionStorage.getItem(this.listSessionKey);
    if (list) {
        return of(JSON.parse(list) as CuttingGapPartPrice[]);
    }

    return super.getClient()
        .get(`/api/cutting-gap-part-prices`, { headers: super.getHeaders() })
        .pipe(map(response => {
            sessionStorage.setItem(this.listSessionKey, JSON.stringify(response));
            return response ? response as CuttingGapPartPrice[] : new Array<CuttingGapPartPrice>();
        }));
}

public getPowerList(): Observable<MotorPower[]> {
    const list = sessionStorage.getItem(this.listSessionKey);
    if (list) {
        return of(JSON.parse(list) as MotorPower[]);
    }

    return super.getClient()
        .get(`/api/motor-power`, { headers: super.getHeaders() })
        .pipe(map(response => {
            sessionStorage.setItem(this.listSessionKey, JSON.stringify(response));
            return response ? response as MotorPower[] : new Array<MotorPower>();
        }));
}

它们各自工作完美。但结合/嵌套它们却没有。

使用MergeMap嵌套通话

public getQuotationPrices(quotation: Quotation): Observable<QuotationPrices> {
    return this.cuttingGapPartPriceService.getPriceList().pipe(mergeMap(prices => {
        return this.motorPowerService.getPowerList().pipe(map(powers => {
            var result = new QuotationPrices();
            //Some custom logic

            return result;
        }));
    }));
}

我知道我的问题与本post中描述的问题相当，但是我不知道如何解决。

编辑-使用ForkJoin嵌套调用

public getQuotationPrices(quotation: Quotation): Observable<QuotationPrices> {
    return forkJoin([this.cuttingGapPartPriceService.getPriceList(), this.motorPowerService.getPowerList()]).pipe(map(data => {
        const prices = data[0];
        const powers = data[1];
        var result = new QuotationPrices();


        return result;
    }));
}

结果在Chrome的“网络”标签中

Answer 1

尝试展平嵌套的可观察对象。。可能是您的内部可观察对象未得到订阅（可观察对象除非被订阅，否则不会运行）。您可以检查this stackblitz example来查看嵌套的可观察对象如何不运行，除非您订阅了innerObservable或将它们展平。就像@JB Nizet所建议的那样，如果您可以在stackblitz上创建一个回购协议，那将真的很棒。

Answer 2

最后找出问题所在。它与可观察物无关。我在AppModule中提供了拦截器，但由于我再次导入angular的HTTPClientModule，它们被SharedModule再次覆盖。删除重复的导入后，此问题已解决。

Angular HttpInterceptor无法在嵌套Observable上触发

2 个答案: