Fetch previously requested URL in Angular

Question

Is it possible to fetch previously called XHR request URLs (which used Angular's HttpClient)?

I'm willing to use the Interceptor. How can that be done? Pointing in the right direction might be just enough.

Having basic functionality like fetching the latest history member would be cool and basic ideas about remove, clear, add methods would be nice too.

Answer 1

You can use an interceptor to achieve this. Just create a simple interceptor:

export class XhrInterceptor implements HttpInterceptor {

    constructor(private xhrHistoryService: XhrHistoryService) {}

    public intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Here you have the information from your call and can get/store the data
        this.xhrHistoryService.add(request.url);
        return next.handle(request).pipe(
            tap((ev: HttpEvent<any>) => {
                // If you want to log responses add here
            })
        );
    }
}

As you can see I injected a xhrHistoryService. This service is for keeping and managing the history. As I do not know exactly what you want to do with your history it is just an example. If you wish to use your history as kind of cache you can also do it in the interceptor directly.

export class XhrHistoryService {
    // Define here what types you want to log
    private history: string[] = [];

    public getAll() {
        return this.history;
    }

    public getLatest() {
        return this.history.length && this.history[this.history.length - 1];
    }

    // Define here what you want to log
    public add(url: string) {
        this.history.push(url);
    }
}

I hope this helps. If not, please edit your question to specify your needs.

Code is here: https://stackblitz.com/edit/angular-ivy-atovsq?file=src/app/xhr.interceptor.ts