web-dev-qa-db-ja.com

paramをHttpInterceptorに渡す方法は？

Angular 4.3.1およびHttpClientを使用しています。いくつかのヘッダーを設定するHttpInterceptorがあります。

一部のhttp get要求では、別のヘッダーを設定する必要があります。とにかく、特定のHttpRequestのこのHttpInterceptorにいくつかのパラメーターを渡すことができますか？

@Injectable()
export class MyHttpInterceptor implements HttpInterceptor {

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if(request.custom.param1) // how can i do this 
      request = request.clone({
        setHeaders: {
          'header1': 'xxxxxx'
          }
      });

    else
      request = request.clone({
        setHeaders: {
          'header2': 'yyyyyy'
          }
      });


    return next.handle(request);
  }
}
angulartypescriptinterceptor
21
Amitabh

Httpエラー応答を処理するインターセプターを作成しました。特定のHttp呼び出しがインターセプターに特定の応答ステータスコードを無視するよう指示することを許可し、同時にHttp呼び出しにパラメーターを渡す機能を保持したかったのです。ここに私が終わった解決策があります。 （回答の最初のアイデアをありがとう、Aleksey）。

HttpParamsを拡張します。

import { HttpParams } from '@angular/common/http';
import { HttpParamsOptions } from '@angular/common/http/src/params';

// Cause the HttpErrorInterceptor to ignore certain error response status codes like this:
//
//  this.http.get<TypeHere>(`URL_HERE`, {
//    params: new InterceptorHttpParams({ statusCodesToIgnore: [400, 401] }, {
//      complete: 'false',
//      offset: '0',
//      limit: '50'
//    })
//  })

export class InterceptorHttpParams extends HttpParams {
  constructor(
    public interceptorConfig: { statusCodesToIgnore: number[] },
    params?: { [param: string]: string | string[] }
  ) {
    super({ fromObject: params } as HttpParamsOptions);
  }
}

インターセプター：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  return next.handle(req).pipe(
    tap(
      () => {},
      (error: any) => {
        if (error instanceof HttpErrorResponse) {
          const regEx = /^[4-5][0-9][0-9]$/; // 4XX and 5XX status codes

          if (regEx.test(error.status.toString())) {
              const errorMessage = this.getErrorMessageFromStatus(error.status);

              if (!this._shouldIgnoreError(req, error)) {
                console.log(`ERROR INTERCEPTOR: ${error.status}`);
                this.toastService.alert(errorMessage);
              }
          }
        }
      })
  );
}

// Based on `request.params.interceptorConfig.statusCodesToIgnore`, we can see if we should ignore this error.
_shouldIgnoreError(request: HttpRequest<any>, errorResponse: HttpErrorResponse) {
  if (request.params instanceof InterceptorHttpParams
    && Array.isArray(request.params.interceptorConfig.statusCodesToIgnore)
    && request.params.interceptorConfig.statusCodesToIgnore.includes(errorResponse.status)) {

    return true;
  }

  return false;
}
12
JWess

この問題を処理するより良い方法があるかもしれませんが、回避策として、カスタムHttpParamsを作成してリクエストに渡し、インターセプターでそれらをチェックできます。例えば：

export class CustomHttpParams extends HttpParams {
  constructor(public param1: boolean) {
   super();
  }
}

HTTP呼び出しでこのクラスを使用する：

this.http.get('https://example.com', {
  params: new CustomHttpParams(true)
})

そして今、インターセプターで：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  if (request.params instanceof CustomHttpParams && request.params.param1) 
    request = request.clone({
      setHeaders: {
        'header1': 'xxxxxx'
      }
    });
  else
    request = request.clone({
      setHeaders: {
        'header2': 'yyyyyy'
      }
    });

  return next.handle(request);
}
10
Aleksey L.