web-dev-qa-db-ja.com

angular httpClient interceptorに非同期サービスを使用する方法

Angular 4.3.1とHttpClientを使用して、非同期サービスによる要求と応答をhttpClientのHttpInterceptorに変更する必要があります。

リクエストを変更する例：

export class UseAsyncServiceInterceptor implements HttpInterceptor {

  constructor( private asyncService: AsyncService) { }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // input request of applyLogic, output is async elaboration on request
    this.asyncService.applyLogic(req).subscribe((modifiedReq) => {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
    /* HERE, I have to return the Observable with next.handle but obviously 
    ** I have a problem because I have to return 
    ** newReq and here is not available. */
  }
}

応答には別の問題がありますが、応答を更新するために再度applyLogicを実行する必要があります。この場合、angularガイドは次のように示唆しています。

return next.handle(req).do(event => {
    if (event instanceof HttpResponse) {
        // your async elaboration
    }
}

しかし、「do（）演算子-ストリームの値に影響を与えることなく、Observableに副作用を追加します」。

ソリューション：リクエストに関するソリューションはbsorrentinoによって表示され（承認された回答に）、レスポンスに関するソリューションは次のとおりです：

return next.handle(newReq).mergeMap((value: any) => {
  return new Observable((observer) => {
    if (value instanceof HttpResponse) {
      // do async logic
      this.asyncService.applyLogic(req).subscribe((modifiedRes) => {
        const newRes = req.clone(modifiedRes);
        observer.next(newRes);
      });
    }
  });
 });

したがって、非同期サービスを使用してリクエストとレスポンスをhttpClientインターセプターに変更するにはどうすればよいですか？

解決策：rxjsを利用する

angulartypescriptrxjsinterceptorangular2-observables
10
Pasquale Vitale

リアクティブフローに問題があると思います。メソッドinterceptはObservableを返すことを期待しており、flattennext.handleによって返されるObservableを使用した非同期結果

これを試して

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      return this.asyncService.applyLogic(req).mergeMap((modifiedReq)=> {
        const newReq = req.clone(modifiedReq);
        return next.handle(newReq);
    });
}

mergeMapの代わりにswitchMapを使用することもできます

9
bsorrentino

インターセプター内で非同期関数を呼び出す必要がある場合は、rxjsfrom演算子を使用して次のアプローチに従うことができます。

import { MyAuth} from './myauth'
import { from } from 'rxjs'

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private auth: MyAuth) {}

  intercept(req: HttpRequest<any>, next: HttpHandler) {
    // convert promise to observable using 'from' operator
    return from(this.handle(req, next))
  }

  async handle(req: HttpRequest<any>, next: HttpHandler) {
    // if your getAuthToken() function declared as "async getAuthToken() {}"
    await this.auth.getAuthToken()

    // if your getAuthToken() function declared to return an observable then you can use
    // await this.auth.getAuthToken().toPromise()

    const authReq = req.clone({
      setHeaders: {
        Authorization: authToken
      }
    })

    // Important: Note the .toPromise()
    return next.handle(authReq).toPromise()
  }
}
6
yottabrain

Angular 6.0およびRxJS 6.0を使用したHttpInterceptorの非同期操作

auth.interceptor.ts

import { HttpInterceptor, HttpEvent, HttpHandler, HttpRequest } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/index';;
import { switchMap } from 'rxjs/internal/operators';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private auth: AuthService) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    return this.auth.client().pipe(switchMap(() => {
        return next.handle(request);
    }));

  }
}

auth.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable()
export class AuthService {

  constructor() {}

  client(): Observable<string> {
    return new Observable((observer) => {
      setTimeout(() => {
        observer.next('result');
      }, 5000);
    });
  }
}
4
Volodymyr Kr

次のようにインターセプターで非同期メソッドを使用しています：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    public constructor(private userService: UserService) {
    }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        return from(this.handleAccess(req, next));
    }

    private async handleAccess(req: HttpRequest<any>, next: HttpHandler):
        Promise<HttpEvent<any>> {
        const user: User = await this.userService.getUser();
        const changedReq = req.clone({
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'X-API-KEY': user.apiKey,
            })
        });
        return next.handle(changedReq).toPromise();
    }
}
3
Kent Munthe Caspersen

上記の答えは問題ないようです。私は同じ要件を持っていましたが、異なる依存関係と演算子の更新のために問題に直面しました。少し時間がかかりましたが、この特定の問題の解決策が1つ見つかりました。

Angular 7およびAsync Interceptorリクエストの要件を持つRxJsバージョン6+を使用している場合、NgRxストアの最新バージョンと関連する依存関係で動作するこのコードを使用できます。

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    let combRef = combineLatest(this.store.select(App.getAppName));

    return combRef.pipe( take(1), switchMap((result) => {

        // Perform any updates in the request here
        return next.handle(request).pipe(
            map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('event--->>>', event);
                }
                return event;
            }),
            catchError((error: HttpErrorResponse) => {
                let data = {};
                data = {
                    reason: error && error.error.reason ? error.error.reason : '',
                    status: error.status
                };
                return throwError(error);
            }));
    }));
1
Tofiq Quadri

はい、私は私の答えを更新しています、非同期サービスで要求または応答を更新することはできません、あなたはこのように同期的に要求を更新する必要があります

export class UseAsyncServiceInterceptor implements HttpInterceptor {

constructor( private asyncService: AsyncService) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // make apply logic function synchronous
  this.someService.applyLogic(req).subscribe((modifiedReq) => {
    const newReq = req.clone(modifiedReq);
    // do not return it here because its a callback function 
    });
  return next.handle(newReq); // return it here
 }
}
0
Ghulam Mohayudin