Angular Web Framework HTTP Client & API Integration 2 — Questions and Answers
Question 1: How do you add custom HTTP headers to an HttpClient request?
- By modifying the global fetch API before the call
- By passing an HttpHeaders object via the headers option (Correct answer)
- By setting document.headers before the request
- By using a map() pipe operator on the response
Correct answer: By passing an HttpHeaders object via the headers option
You construct an HttpHeaders instance with key-value pairs and pass it through the headers property of the request options object.
Question 2: What is the purpose of HttpClientTestingModule in Angular unit tests?
- To speed up HTTP calls in the test environment
- To provide a mock HTTP backend so requests can be flushed and asserted (Correct answer)
- To enable HTTPS during local development
- To automatically retry failed requests in tests
Correct answer: To provide a mock HTTP backend so requests can be flushed and asserted
HttpClientTestingModule replaces the real backend with TestingBackend, letting you expect, flush, and verify requests without real network calls.
Question 3: How do you cancel an in-flight HTTP request in Angular?
- Call HttpClient.cancel() with the request reference
- Unsubscribe from the Observable returned by HttpClient (Correct answer)
- Set timeout: 0 in the request options object
- Call request.abort() on the XHR object
Correct answer: Unsubscribe from the Observable returned by HttpClient
Unsubscribing from the HttpClient Observable triggers teardown logic that aborts the underlying XHR request.
Question 4: What does setting withCredentials: true in an HttpClient request do?
- Automatically adds a CSRF token to every request
- Includes cookies and authorization headers in cross-origin requests (Correct answer)
- Enables HTTP/2 multiplexing for the request
- Forces the request to use HTTPS regardless of the URL
Correct answer: Includes cookies and authorization headers in cross-origin requests
withCredentials: true instructs the browser to send cookies, HTTP authentication headers, and TLS client certificates with cross-origin requests.
Question 5: How do you configure HttpClient to return the raw response body as a plain string instead of parsed JSON?
- observe: 'text'
- responseType: 'text' (Correct answer)
- contentType: 'text/plain'
- type: 'string'
Correct answer: responseType: 'text'
Setting responseType: 'text' tells HttpClient to skip JSON parsing and return the response body as a raw string.
Question 6: Which RxJS operator automatically re-issues an HTTP request up to 3 times when it fails?
- repeat(3)
- retry(3) (Correct answer)
- retryWhen(() => 3)
- catchError(() => retry())
Correct answer: retry(3)
retry(3) resubscribes to the source observable — re-issuing the HTTP request — up to 3 times before propagating the error.
Question 7: How should you send a JavaScript object as a JSON body in an HttpClient.post() request?
- Pass the plain object as the body argument; Angular serializes it automatically (Correct answer)
- Always call JSON.stringify() and manually set Content-Type header
- Wrap it in FormData before passing it
- Use HttpParams to encode the object as form fields
Correct answer: Pass the plain object as the body argument; Angular serializes it automatically
HttpClient detects a plain object body, serializes it to JSON, and sets the Content-Type: application/json header automatically.
Angular Web Framework HTTP Client & API Integration 2
How do you add custom HTTP headers to an HttpClient request?