HTTP — случаи использования перехватчиков¶

import { AuthService } from '../auth.service';

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

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // Get the auth token from the service.
        const authToken = this.auth.getAuthorizationToken();

        // Clone the request and replace the original headers with
        // cloned headers, updated with the authorization.
        const authReq = req.clone({
            headers: req.headers.set(
                'Authorization',
                authToken
            ),
        });

        // send cloned request with header to the next handler.
        return next.handle(authReq);
    }
}

// Clone the request and set the new header in one step.
const authReq = req.clone({
    setHeaders: { Authorization: authToken },
});

import { finalize, tap } from 'rxjs/operators';
import { MessageService } from '../message.service';

@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
    constructor(private messenger: MessageService) {}

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        const started = Date.now();
        let ok: string;

        // extend server response observable with logging
        return next.handle(req).pipe(
            tap({
                // Succeeds when there is a response; ignore other events
                next: (event) =>
                    (ok =
                        event instanceof HttpResponse
                            ? 'succeeded'
                            : ''),
                // Operation failed; error is an HttpErrorResponse
                error: (error) => (ok = 'failed'),
            }),
            // Log when response observable either completes or errors
            finalize(() => {
                const elapsed = Date.now() - started;
                const msg = `${req.method} "${req.urlWithParams}"
             ${ok} in ${elapsed} ms.`;
                this.messenger.add(msg);
            })
        );
    }
}

// The JsonParser class acts as a base class for custom parsers and as the DI token.
@Injectable()
export abstract class JsonParser {
    abstract parse(text: string): any;
}

@Injectable()
export class CustomJsonInterceptor
    implements HttpInterceptor {
    constructor(private jsonParser: JsonParser) {}

    intercept(
        httpRequest: HttpRequest<any>,
        next: HttpHandler
    ) {
        if (httpRequest.responseType === 'json') {
            // If the expected response type is JSON then handle it here.
            return this.handleJsonResponse(
                httpRequest,
                next
            );
        } else {
            return next.handle(httpRequest);
        }
    }

    private handleJsonResponse(
        httpRequest: HttpRequest<any>,
        next: HttpHandler
    ) {
        // Override the responseType to disable the default JSON parsing.
        httpRequest = httpRequest.clone({
            responseType: 'text',
        });
        // Handle the response using the custom parser.
        return next
            .handle(httpRequest)
            .pipe(
                map((event) =>
                    this.parseJsonResponse(event)
                )
            );
    }

    private parseJsonResponse(event: HttpEvent<any>) {
        if (
            event instanceof HttpResponse &&
            typeof event.body === 'string'
        ) {
            return event.clone({
                body: this.jsonParser.parse(event.body),
            });
        } else {
            return event;
        }
    }
}

@Injectable()
export class CustomJsonParser implements JsonParser {
    parse(text: string): any {
        return JSON.parse(text, dateReviver);
    }
}

function dateReviver(key: string, value: any) {
    /* . . . */
}

{ provide: HTTP_INTERCEPTORS, useClass: CustomJsonInterceptor, multi: true },
{ provide: JsonParser, useClass: CustomJsonParser },

@Injectable()
export class CachingInterceptor implements HttpInterceptor {
    constructor(private cache: RequestCache) {}

    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // continue if not cacheable.
        if (!isCacheable(req)) {
            return next.handle(req);
        }

        const cachedResponse = this.cache.get(req);
        return cachedResponse
            ? of(cachedResponse)
            : sendRequest(req, next, this.cache);
    }
}

/**
 * Get server response observable by sending request to `next()`.
 * Will add the response to the cache on the way out.
 */
function sendRequest(
    req: HttpRequest<any>,
    next: HttpHandler,
    cache: RequestCache
): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
        tap((event) => {
            // There may be other events besides the response.
            if (event instanceof HttpResponse) {
                cache.put(req, event); // Update the cache.
            }
        })
    );
}

// cache-then-refresh
if (req.headers.get('x-refresh')) {
    const results$ = sendRequest(req, next, this.cache);
    return cachedResponse
        ? results$.pipe(startWith(cachedResponse))
        : results$;
}
// cache-or-fetch
return cachedResponse
    ? of(cachedResponse)
    : sendRequest(req, next, this.cache);