What is the best way to include custom RequestOptionsArgs in an Angular 2 request?

Question

What is the best way to include custom RequestOptionsArgs in an Angular 2 request?

My customized Http service includes a method that handles requests with a loading indicator that displays when the request begins and hides when it ends.

request(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    this.loadingService.start();

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return super.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

Although the loading indicator shows and hides accordingly, I want to have control over which requests trigger the loader. How can I accomplish this?

The RequestOptionsArgs interface defines various properties, but using them to determine when to show the loading indicator may not be ideal.

export interface RequestOptionsArgs {
    url?: string;
    method?: string | RequestMethod;
    search?: string | URLSearchParams;
    headers?: Headers;
    body?: any;
    withCredentials?: boolean;
    responseType?: ResponseContentType;
}

What alternatives do I have in order to selectively show or hide the loading indicator?

angular typescript angular-http

Answer 1

Answer №1

Create a custom HTTP request using the http service within your service without overriding the original service.

Next, define two methods: one for handling requests with a loading service (loadingService) and another for requests without it.

requestWithLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    this.loadingService.start();

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

requestNonLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {});
}

Answer 2

Create a custom HTTP request using the http service within your service without overriding the original service.

Next, define two methods: one for handling requests with a loading service (loadingService) and another for requests without it.

requestWithLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {
    this.loadingService.start();

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

requestNonLoading(url: string|Request, options?: RequestOptionsArgs): Observable<Response> {

    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return http.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {});
}

Answer 3

Answer №2

1.Solution : Ensure that this.loadingService.start(); is moved into your component.

2.Solution : Alternatively, define a parameter isLoading :boolean = true in the service.

request(url: string|Request, options?: RequestOptionsArgs, isLoading:boolean = true): Observable<Response> {
  if(isLoading){
     this.loadingService.start();
   }


    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return super.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

Set the default value to true or false based on what is more appropriate for your needs.

Answer 4

1.Solution : Ensure that this.loadingService.start(); is moved into your component.

2.Solution : Alternatively, define a parameter isLoading :boolean = true in the service.

request(url: string|Request, options?: RequestOptionsArgs, isLoading:boolean = true): Observable<Response> {
  if(isLoading){
     this.loadingService.start();
   }


    if (!options) {
        options = {};
        options.headers = new Headers();
    }
    this.updateHeaders(options.headers);
    if (typeof url !== 'string') {
        this.updateHeaders(url.headers);
    }

    return super.request(url, options)
        .catch((response: Response) => this.authError(response))
        .finally(() => {
            this.loadingService.done();
        });
}

Set the default value to true or false based on what is more appropriate for your needs.

What is the best way to include custom RequestOptionsArgs in an Angular 2 request?

Answer №1

Answer №2

Similar questions

The comparison between StrictNullChecks and Union Types in terms of syntax usage

What could be causing the Angular HTTPClient to make duplicate REST calls in this scenario?

Linking children to their parents in a mat tree structure

How to transfer the returned value from an anonymous callback function to the `this` keyword in an ionic2 angular4 project

After a loop, a TypeScript promise will be returned

Decrease the construction duration within a sprawling Angular 8 project

What is the best way to apply a filter to an array of objects nested within another object in JavaScript?

How to send parameters with the fetch API

How can we limit the CSS properties that can be used in an interpolated manner by defining a restricted TS type for CSS props based on emotions?

When retrieving objects using Angular's HttpClient, properties may be null or empty

Unable to connect my Angular library with another Angular library

A step-by-step guide on creating a Decorator using the TypeScript compile API

I am unable to showcase the image at this time

Generating a form structure from json containing repeated inputs: Control with path formArray could not be located

Associate text with a color from a predetermined list (JavaScript)

What is the method for obtaining the union type of interface values (including string enums)?

What is the best way to rid ourselves of unwanted values?

Error message "Property 'name' does not exist on type '{}'" is encountered when using Ionic/Angular HttpClient and no data type is specified

Why is it that the resource fails to load in an Angular localhost environment when making an http request?

"Troubleshooting the placement problem in Angular Material's md-menu