如何访问库中声明的HttpContextToken？

Question

我有一个 HttpInterceptor，可以在进行 http 调用时显示进度条。

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
  if (request.context.get(SHOW_PROGRESSBAR)) {
    this.requestLoaderService.show();
    this.pendingRequestNumber++;

    return next.handle(request).pipe(
      delay(0),
      finalize(() => {
        this.pendingRequestNumber--;

        if (this.pendingRequestNumber === 0) {
          this.requestLoaderService.hide();
        }
      }),
    );
  }
}

这个 HttpInterceptor 位于 Angular 库中。我想在我的 Angular 应用程序中设置 HttpContextToken (SHOW_PROGRESSBAR) 的值。

this.http.request<KweResponse<any>>(
        method,
        this.url.getString(endpoint),
        {
          body,
          headers: options?.headers,
          params: options?.params,
          observe: 'response',
          context: new HttpContext()
            .set(SHOW_PROGRESSBAR, options?.withProgressbar ?? true)
        }
      )

如何在我的库中声明 HttpContextToken 以便可以从我的应用程序访问它？

Answer 1

要在 Angular 库中使用

HttpContextToken

并从应用程序访问它，您可以使用以下步骤。

1. 提供 HttpContextToken 这通常是通过创建一个新文件来完成的 (

   my_token.ts

   )。 然后在那里声明

   HttpContextToken

   。这将允许您的库的拦截器/可观察者或使用者使用令牌。

这是如何根据文档使用它

ref

用于操作和访问存储在 HttpContext 中的值的令牌。

class HttpContextToken<T> {
  constructor(defaultValue: () => T)
  defaultValue: () => T
}

2. 在拦截器中使用 HttpContextToken 参见 ref:

我已经修改了您的代码，其中考虑了拦截器如何评估每个令牌

@Injectable()
export class YourHttpInterceptor implements HttpInterceptor {
  private pendingRequestNumber = 0;

  constructor(private requestLoaderService: RequestLoaderService) {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    if (request.context.get(SHOW_PROGRESSBAR)) {
      this.requestLoaderService.show();
      this.pendingRequestNumber++;

      return next.handle(request).pipe(
        next(() => {
          this.pendingRequestNumber--;
          if (this.pendingRequestNumber === 0) {
            this.requestLoaderService.hide();
          }
        }),
        error((err) => {
          if (this.error.message) {
             return error
          }
        }),
        complete(() =>{});
    }

    return next.handle(request);
  }
}

在你的

Angular App

然后您可以在您的应用程序中执行类似的操作。

// App
import { HttpClient, HttpContext } from '@angular/common/http';
import { SHOW_PROGRESSBAR } from 'path/to/my_token.ts)'; // <- token

constructor(private http: HttpClient) {}

requestData(endpoint: string, options?: { withProgressbar?: boolean }) {
  return this.http.request<type>(
    'GET', /, 'POST' etc.
    endpoint,
    {
      context: new HttpContext().set(SHOW_PROGRESSBAR, options?.withProgressbar ?? true)
    }
  );
}