Angular 4/2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Exam
来源:互联网 发布:3d智能试衣镜 知乎 编辑:程序博客网 时间:2024/06/08 09:52
https://www.concretepage.com/angular-2/angular-2-http-get-parameters-headers-urlsearchparams-requestoptions-example
May 19, 2017
This page will walk through Angular 2 Http get() parameters + Headers + URLSearchParams + RequestOptions example. Angular 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.Using
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.Contents
- Technologies Used
- Headers
- URLSearchParams
- RequestOptionsArgs and RequestOptions
- Http.get() with Multiple Headers and Multiple Parameters
- Angular In-Memory Web API
- Complete Example
- Run Application
- References
- Download Source Code
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. angular-in-memory-web-api@0.3.2
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.
If we want to add multiple parameters, we can do as follows.
Find the code snippet for
Http.get()
with multiple headers and multiple URL parameters.Angular In-Memory Web API
Angular provides in-memory web API to process HTTP request in test environment. In case we don't have actual server URL, we can use angular in-memory web API for testing our angularHttp
methods. It provides a dummy URL which can be changed by actual URL later. It returns an Observable
of HTTP Response
object in the manner of a RESTy web api. In our example we are using in-memory web API to get and post data. To use it in our angular application we need to follow below steps. Step-1: Add
angular-in-memory-web-api
in dependencies block in package.json
file as given below.Step-2: Run npm install command to download
angular-in-memory-web-api
. Step-3: Create a class implementing
InMemoryDbService
interface. In our example we are creating an in-memory DB for books. Find our class for our in-memory DB. book-data.ts
To interact with DB, URL will be api/books .
Step-4: Before using DB we need to configure our above class in application module using
imports
metadata of @NgModule
as follows.Find the application module.
Find the link for more information on in-memory web API.
Complete Example
Find the complete example.book.service.ts
book.component.ts
book.component.html
book.component.css
book.ts
app.component.ts
app.module.ts
Run Application
To run the application, find following steps.1. Download source code using download link given on this page.
2. In your angular CLI application, replace src folder.
3. Add
"angular-in-memory-web-api": "~0.3.2"
in dependencies block in package.json
file. 4. Run npm install and then run ng serve .
5. Now access the URL http://localhost:4200 . Find the print screen.
Find the link for Angular 2
Http
CRUD operation with Spring Boot. Spring Boot REST + Angular 2 + JPA + Hibernate + MySQL CRUD Example
References
HttpHeaders
URLSearchParams
RequestOptions
Angular 2 Http post() Example
Download Source Code
angular-2-http-get-parameters-headers-urlsearchparams-requestoptions-example.zip
阅读全文
0 0
- Angular 4/2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Exam
- import { Injectable } from '@angular/core'; import { Http, Headers, RequestOptions, Response } from
- HTTP Headers
- http headers
- HTTP Headers
- HTTP Headers
- HTTP Headers
- http headers
- Http Headers
- Angular 4 Http
- angular在HTML中去取字符串,以及$http通过headers取值
- 如何使用火狐浏览器的 live http headers调试http post get请求
- Get parameters from Url
- angular $q封装$http get和post请求
- Angular 1.6提示$http.get(...).success is not a function
- angular 1.6 $http.get(...).success is not a function 解决办法
- Angular 1.6提示$http.get(...).success is not a function
- angular $http get post使用过程中遇到的错误
- js单张图片平移切换
- C++中break语句和continue语句讲解及使用实例
- Oracle存储过程
- Collection,List,Set
- iOS设置圆角矩形和阴影效果
- Angular 4/2 Http get() Parameters + Headers + URLSearchParams + RequestOptions Exam
- Android保存图片到系统相册
- BigDecimal的用法详解(保留两位小数,四舍五入,数字格式化,科学计数法转数字,数字里的逗号处理)
- Java ClassLoad详解
- Breadth-first Search -- Leetcode problem515. Find Largest Value in Each Tree Row
- IIS权限控制(sqlite只读)
- ios 实现系统加载动画 红色小菊花
- 正则表达式最全总结
- 记一次亲身经历的高速三车追尾及处理全流程