Angular HttpClient replacement for RequestOptions?

Question

Angular's Http module used to have a RequestOptions object which could be passed to its get method (e.g. this.http.get(fooUrl, barOptions). The RequestOptions contained any headers. This was deprecated. The "closest replacement" for the deprecated RequestOptions is HttpRequest.

There's two problems with this:
1. HttpRequest has a url param, so it is NOT an equivalent of RequestOptions. In fact, it seems to encapsulate the entire request, yet I don't see it used anywhere, so I am guessing it's just an internal class..
2. HttpClient's get method does NOT take HttpRequest as an argument.

The source code for HttpClient's get method looks like this:

/**
 * Constructs a `GET` request that interprets the body as an `ArrayBuffer` and returns the response in
 *  an `ArrayBuffer`.
 *
 * @param url     The endpoint URL.
 * @param options The HTTP options to send with the request.
 *
 * @return An `Observable` of the response, with the response body as an `ArrayBuffer`.
 */
get(url: string, options: {
    headers?: HttpHeaders | {
        [header: string]: string | string[];
    };
    observe?: 'body';
    params?: HttpParams | {
        [param: string]: string | string[];
    };
    reportProgress?: boolean;
    responseType: 'arraybuffer';
    withCredentials?: boolean;
}): Observable<ArrayBuffer>;

Is s there some type I can use for the options param now? Should I just define an interface that has HttpHeaders on it? If there isn't a type for it, why not?

My old code looks like this:

reqOptions.headers.set('Authorization', user.token);
reqOptions.headers.set('RefreshToken', user.refreshToken);

RequestOptions from the old Http module had a headers property and was statically typed.

P.S. I read the answer here, but it doesn't use a type: Angular4: Http -> HttpClient - requestOptions

Pejorative

which version of angular are you on/coming from? – Marathi

Going from 7 to 8. I think this could apply to anyone updating from 4 or so iirc. We just never fully applied HttpClient across the board. – Pejorative

Answer 1

For now, I just defined "my own" RequestOptions interface in a new file in my app called request-options.ts. The interface definition is below, the properties were lifted straight out of the Angular Library's client.d.ts file to match what HttpClient expects from the options param for REST calls:

import { HttpHeaders, HttpParams } from '@angular/common/http';

export interface RequestOptions {
  headers?: HttpHeaders;
  params?: HttpParams;
}

Now I can statically type RequestOptions again, e.g.:

const requestOptions: RequestOptions = {
  params: new HttpParams()
};

(Above example code lifted from here: Angular4: Http -> HttpClient - requestOptions)

I am not sure if I am completely missing something or I should go make a PR against the angular repo. This seems like a rather obvious omission if there isn't a reason for it.

Pejorative

ok, this is just one of the multiple type definition for RequestOptions, if you read the http.d.ts (@angular/common/http), and i don't think you are using the one with a responseType arraybuffer (only JSON in 2019 XD) , an idea may be to just craft your "partial" RequestOption for your use cases – Zea

Answer 2

Here's a little something I had written as a helper service. I'm sure you could extend to pass along any explicit headers.

export class ParamBuilderService {
  buildParams(queryParams: Params, excludedValues ? : Array < string > ): HttpParams {
    let params = new HttpParams();
    for (const key in queryParams) {
      if (queryParams.hasOwnProperty(key)) {
        const value = queryParams[key];
        if (excludedValues) {
          const containExcludedValue = excludedValues.indexOf(value) !== -1;
          if (!!value && !containExcludedValue) {
            params = params.append(key, value);
          }
        } else if (!!value || value === 0) {
          params = params.append(key, value);
        }
      }
    }
    return params;
  }
}

Marathi