Angular 4/2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Exam
阿新 • • 發佈：2019-01-11
https://www.concretepage.com/angular-2/angular-2-http-get-parameters-headers-urlsearchparams-requestoptions-example
Headers class
is used to create headers. Angular URLSearchParams class
is used to create URL parameters. Angular RequestOptions instantiates
itself using instances of Headers, URLSearchParams and
other request options such as url, method, search, body, withCredentials, responseType. These classes are imported from @angular/http API.
Finally Http.get() uses instance of RequestOptions to
interact with the server. Though RequestOptions is optional
to use with Http.get(), but to send request headers
or query/search parameters in the URL, we need to use them. On this page we will create an application that will use Http.get() to
send headers and parameters using angular in-memory web API. Find the code snippet from our example.set() or append() method
of URLSearchParams and Headers,
we can add multiple parameters and headers, too. Now we will walk through complete example step by step.
Technologies Used
Find the technologies being used in our example.1. Angular 4.0.0
2. TypeScript 2.2.0
3. Node.js 6.10.1
4. Angular CLI 1.0.0
5. Angular Compiler CLI 4.0.0
6. [email protected]
Headers
Headers is the angular class that is used to configure request
headers. Find the sample Headers instantiation.
We can also pass headers as an argument while instantiating Headers class.
Find the code snippet.
To fetch, add and delete headers, Headers class
has following methods. append(name: string, value: string): Appends a header to existing list of header values for a given header name. We use
append() as follows.
Now the Accept header
will have the following values.
set(name: string, value: string|string[]): Sets or overrides header value for given name. It is
used as follows.
Now the Accept header
will have only the following value.
delete(name: string): Deletes all header values for the given name. We use it as follows.
get(name: string) : string: Returns first header that matches given name. Find the code snippet.
getAll(name: string) : string[]: Returns list of header values for a given name.
If we want to add multiple headers, we can achieve it by
set() method
as follows.
If we want to add multiple headers by append() method,
we can achieve it as follows.
URLSearchParams
URLSearchParams creates the query string in the URL. It is a
map-like representation of URL search parameters. Find its constructor syntax.
Both arguments in the constructor are optional. Angular queryEncoder parameter
is used to pass any custom QueryEncoder to encode key
and value of the query string. By default QueryEncoder encodes
keys and values of parameter using JavaScript encodeURIComponent() method. Now we can instantiate
URLSearchParams as
given below.
Now we can fetch, add and delete parameters using following methods. append(param: string, val: string) : void: Appends parameter value to existing list of parameter values for a given parameter name. It is used to add values in multi-value fields or arrays in query string. If we write the code as given below. Then query parameter
names will
be an array. The query string will look like as given below.
Server side code such as PHP will get names parameter
value as an array. set(param: string, val: string): Sets or overrides parameter value for given parameter name. We can use as follows. The query string will be as follows. delete(param: string) : void: Deletes all parameter values for the given parameter name. Find the code snippet. get(param: string) : string: In case of multi-value fields, it returns the first value for given parameter name. Find the code snippet. getAll(param: string) : string[]: Returns list of values for a given parameter name. Find the code snippet.
If we want to add multiple parameters, we can achieve it by
set() method
as follows.
If we want to add multiple parameters by append() method,
we can achieve it as follows.
RequestOptionsArgs and RequestOptions
RequestOptionsArgs is an interface that is used to construct
a RequestOptions. The fields of RequestOptionsArgs are
url, method, search, params, headers, body, withCredentials, responseType. RequestOptions is used to create request option. It is instantiated
using RequestOptionsArgs. It contains all the fields
of the RequestOptionsArgs interface. Now find the constructor
of RequestOptions class.
In our example we will use following fields. headers : Sets headers for HTTP request. It is of
Headers class
type. params: Sets query parameters in the URL. It is of
URLSearchParams class
type. Now if we have instance of
Headers as
follows.
And instance of URLSearchParams as
follows.
Then headers and params can
be passed to RequestOptions as given below.
Http.get() with Multiple Headers and Multiple Parameters
AngularHttp.get() method
performs a request with HTTP GET method. Find the arguments of Http.get() method.
url: This is the HTTP URL to hit the server using HTTP GET method. RequestOptionsArgs: This is optional in
Http.get() method.
This is used to create instance of RequestOptions to
send headers, parameters etc with Http.get() method. Now If we want to add multiple headers, we can do as follows.