Verwenden Sie eine Verheißung in Angular HttpClient Interceptor

Question

Kann ich Versprechen innerhalb HttpInterceptor verwenden? Zum Beispiel:

export class AuthInterceptor implements HttpInterceptor{ 
this.someService.someFunction() 
    .then((data)=>{ 
     //do something with data and then 
     return next.handle(req); 
    }); 
} 

warum brauche ich das? weil ich ein Token erhalten muss, um dem Anfrage-Header hinzuzufügen, bevor ich die Anfrage an den Server mache.

Mein Interceptor:

@Injectable() 
export class AuthInterceptor implements HttpInterceptor{ 

    constructor(private authService: AuthService){} 

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{ 
     console.log('Intercepted!'); 
     // return next.handle(req); 
     this.authService.getToken() 
      .then((token)=>{ 
       console.log(token); 
       const reqClone = req.clone({ 
        headers: req.headers 
          .set('Authorization', 'Bearer ' + token) 
          .append('Content-Type', application/json') 
       }); 
       console.log(reqClone); 
       return next.handle(reqClone); 
      }) 
      .catch((err)=>{ 
       console.log('error in interceptor' + err); 
       return null; 
      }); 
    } 
} 

Anfrage:

this.http.post(this.baseURL + 'hero', data) 
        .subscribe(
          (res: any) => { 
           console.log('Saved Successfully.'); 
           console.log(res); 
          }, 
          (err: any) => { 
           console.log('Save Error.' + err); 
          } 
         ); 

Probleme Ich bin vor:

-> Ich bekomme diese Fehlermeldung, bevor das Versprechen behoben ist.

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

Versprechen resloves und ich bekomme mein Token aber nach dem Fehler.

Answer 1

Ja, Sie könnten den neu reparierten Dienst in die Konstruktormethode des Interceptors injizieren und in der Implementierung von intercept den Wert abrufen, eine neue aktualisierte HTTP-Anforderung erstellen und diese verarbeiten.

Ill meiner Antwort mit einem Beispiel in einer Weile aktualisieren, die derzeit Im afk

UPDATE:

Ich bin nicht gut mit dem Versprechen, so dass Sie die folgenden versuchen könnten:

import { fromPromise } from 'rxjs/observable/fromPromise'; 

@Injectable() 
export class AuthInterceptor implements HttpInterceptor{ 

    constructor(private authService: AuthService){} 

    intercept(req: HttpRequest<any>, next: HttpHandler) : Observable<HttpEvent<any>>{ 
     return fromPromise(this.authService.getToken()) 
       .switchMap(token => { 
        const headers = req.headers 
          .set('Authorization', 'Bearer ' + token) 
          .append('Content-Type', application/json'); 
        const reqClone = req.clone({ 
        headers 
        }); 
        return next.handle(reqClone); 
      }); 
    } 
}