Angular2 http jsonp的实例详解
angular2 http
1. 使用http
绝大部分应用程序都会和后台服务打交道，http是浏览器和服务器之间通讯的主要协议，通过http调用来访问远程服务器上相应的 web api。
httpmodule 并不是 angular 的核心模块，通过angular包中一个名叫 @angular/http 的独立附属模块发布了出来。我们的应用将会依赖于angular的 http 服务，它本身又依赖于其它支持类服务。来自 @angular/http 库中的 httpmodule 保存着这些 http 相关服务提供商的全集。
现代浏览器支持两种基http的api ： xmlhttprequest (xhr) 和 jsonp 。少数浏览器还支持 fetch 。在angular中分别对应@angular/http 库中的httpmodule 和jsonpmodule两个模块。
2. get获取数据
为了能够使用xhr中的get方法来获取数据信息，我们把 httpmodule 添加到 appmodule 的 imports 列表中，这样本应用程序的任何地方都可以访问xhr服务。
我们使用http服务的实例中的get方法来执行http get方法获取数据，该方法的调用形式如下
get(url: string, options?: requestoptionsargs) : observable<response>
来看一个简单的例子，代码如下
@component({
selector: 'demo',
template: '<button id="input" (click)="click()">get data</button>',
})
export class democomponent {
constructor(private http: http) {
}
url: string = '/api/list';
click() {
this.http.get(this.url).subscribe(function (data) {
console.log(data)
})
}
}
我们在democomponent构造函数中采用di获取了http服务的实例http，当点击获取数据的按钮后，便能够通过http实例中的get方法，根据其参数url地址及options?: requestoptionsargs参数来获取对应的数据信息。该方法返回的是一个可观察对象 (observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
3. post发送数据
同样的，为了能够使用xhr中的post方法来获取数据信息，我们把 httpmodule 添加到 appmodule 的 imports 列表中，这样本应用程序的任何地方都可以访问xhr服务。
我们使用http服务的实例中的post方法来执行http post方法获取数据，该方法的调用形式如下
post(url: string, body: any, options?: requestoptionsargs) : observable<response>
来看一个简单的例子，代码如下
@component({
selector: 'demo',
template: '<button id="input" (click)="click()">get data</button>',
})
export class democomponent {
constructor(private http: http) {
}
url: string = '/api/post';
click() {
let headers = new headers({ 'content-type': 'application/json' });
let options = new requestoptions({ headers: headers });
this.http.post(this.url, json.stringify({ 'id': '1' }), options).subscribe(function (data) {
console.log(data)
})
}
}
我们在democomponent构造函数中采用di获取了http服务的实例http，当点击获取数据的按钮后，便能够通过http实例中的get方法，根据其参数url地址, body:any及options?: requestoptionsargs参数来提交对应的数据信息，其中body表示传递到服务器端的数据信息。示例中，我们传递json格式的数据到服务器端，所以使用了'content-type': 'application/json'头信息进行包装。
该方法返回的是一个可观察对象 (observable)，针对可观察对象，我们可以subscribe对应的方法，当数据返回后进行处理。
4. jsonp获取数据
用 angular http 服务发起 xmlhttprequests，是与服务器通讯时最常用的方法。但它不适合所有场景。
出于安全的考虑，网络浏览器会阻止调用与当前页面不“同源”的远端服务器的xhr。所谓源就是 uri 的协议 (scheme) 、主机名 (host) 和端口号 (port) 这几部分的组合。这被称为同源策略。
为了可以向不同源的服务器发起 xhr 请求，这时候就需要支持一种老的、只读的 ( 译注：即仅支持 get) 备选协议，这就是 jsonp。
为了能够使用jsonp中的get方法来获取数据信息，我们把 jsonpmodule 添加到 appmodule 的 imports 列表中，这样本应用程序的任何地方都可以访问jsonp服务。
angular的jsonp服务不但通过jsonp 扩展了http 服务，而且限制我们只能用get请求，调用的形式如下。
get(url: string, options?: requestoptionsargs) : observable<response>
我们来看一个例子，该示例和http get访问十分类似，
@component({
selector: 'demo',
template: '<button id="input" (click)="click()">get data</button>',
})
export class democomponent {
constructor(private jsonp: jsonp) {
}
url: string = '/api/list';
click() {
this.jsonp.get(this.url).subscribe((data) => {
console.log(data);
});
}
}
5. 结果处理
5.1 可观察对象
我们通过http以及jsonp的api接口可以知道，默认返回值都是可观察对象 observable< response >。可以把可观察对象 observable 看做一个由某些“源”发布的事件流。 通过 订阅 到可观察对象 observable ，我们监听（subscribe）这个流中的事件。 在这些订阅中，我们指定了当 web 请求生成了一个成功事件 ( 有效载荷是英雄数据 ) 或失败事件 ( 有效载荷是错误对象 ) 时该如何采取行动，如示例中所示。
我们的服务可以返回 http 响应对象response。但这可不是一个好主意！ 数据服务的重点在于，对消费者隐藏与服务器交互的细节。其实上，我们最关心的还是获取到的返回数据信息，这时候我们就可以利用rxjs库来对事件流进行一些额外的处理。
rxjs("reactive extensions" 的缩写)是一个被 angular 认可的第三方库，它实现了异步可观察对象 (asynchronous observable) 模式。rxjs库中包含很多对事件流进行处理的方法，例如map，distinctuntilchanged等操作符。
针对返回数据是json格式的响应对象，可以把response解析成 javascript 对象——只要调一下 response.json() 就可以了，这时候我们就可以利用map操作符来进行处理，例如
this.jsonp.get(this.url)
.map((rsp:response)=>{
return rsp.json()
})
.subscribe((data) => {
console.log(data);
});
5.2 promise
虽然 angular 的 http 客户端 api 返回的是 observable<response> 类型的对象，但我们也可以把它转成 promise<response>。这很容易，只需要调用可观察对象 observable< response >的方法topromise()就能够进行转化。例如
this.jsonp.get(this.url)
.topromise()
.then((rsp: response) => {
console.log(rsp)
});
以上就是对angular http json的讲解，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！