承诺失败的Angular Interceptor测试

Question

我对其中一个拦截器进行单元测试时遇到了问题，而当测试运行时，我得到了以下错误。

You provided 'undefined' where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

我不确定为什么会发生这种情况。这是我的拦截器：

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { HttpBase } from "../http-base";
import { HttpUrl } from "../http-url.enum";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(
        private httpBase: HttpBase
    ) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (!this.isMiddleTierRequest(request.url)) {
            return next.handle(request);
        }

        this.httpBase.retrieveAuthToken()
            .then((token) => {
                const requestWithAuth = request.clone({ 
                    setHeaders: {
                        Authorization: `Bearer ${token}`
                    }});

                    return next.handle(request);
            });
    }

    private isMiddleTierRequest(url: string): boolean {
        return url.indexOf(HttpUrl.MiddleTier) != -1;
    }
}

正如您所看到的，任何请求都会被检查以查看其中是否有特定的字符串匹配，如果匹配，则在请求的Auth头中添加一个令牌。下面是retrieveAuthToken函数：

retrieveAuthToken(): Promise<string> {
        if(sessionStorage.getItem('auth') !== null) {
            return new Promise((resolve, reject) => {
                resolve(sessionStorage.getItem('auth'));
            });
        }    

        return this.authService.getAnonToken(); 
    } 

以及此方法调用的getAnonToken函数：

public getAnonToken(prev?: string): Promise<any> {
        return new Promise((resolve, reject) => {
            if (this.tokens[prev]) {
                resolve({data: this.tokens[prev]});
            }

            if (prev) {
                this.tokens[prev] = prev;
            }

            this.http.post<any>(HttpUrl.AnonToken, {})
                .subscribe((response) => {
                    this.saveAuthToken(response.data);
                    this.tokens[prev] = response.data;

                    this.global.internalAnalytics.getAnonToken();
                    resolve(response.data);
                }, (error) => {
                    reject(error);
                });   
        });            
    }]
}

有没有人知道为什么会发生这个错误？我有一种感觉，这与拦截器函数中Promise的返回值有关，但我不能确定。

谢谢

Answer 1

在任何情况下都必须返回值。在您的示例中，当retrieveAuthToken返回错误时-没有返回值。

请返回promise并更改声明的返回值。

import { Injectable } from "@angular/core";
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from "@angular/common/http";
import { Observable } from 'rxjs/Observable';
import { HttpBase } from "../http-base";
import { HttpUrl } from "../http-url.enum";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    constructor(
        private httpBase: HttpBase
    ) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> | Promise<any> {
        if (!this.isMiddleTierRequest(request.url)) {
            return next.handle(request);
        }

        return this.httpBase.retrieveAuthToken()
            .then((token) => {
                const requestWithAuth = request.clone({ 
                    setHeaders: {
                        Authorization: `Bearer ${token}`
                    }});

                    return next.handle(request);
            });
    }

    private isMiddleTierRequest(url: string): boolean {
        return url.indexOf(HttpUrl.MiddleTier) != -1;
    }
}