angular 学习笔记 get post以及jsonp请求数据

1、app.module.ts注册HTTP JSONP服务
1.引入HttpModule 、JsonpModule 普通的 HTTP 调用并不须要用到 JsonpModule，不过稍后咱们就会演示对 JSONP 的支持， 因此如今就加载它，省得再回来改浪费时间。

import { HttpModule, JsonpModule } from '@angular/http';

2.HttpModule 、JsonpModule依赖注入

@NgModule({ 
    declarations: [ 
    AppComponent, 
    HomeComponent, 
    NewsComponent,
     NewscontentComponent 
],
 imports: [ 
    BrowserModule,
    FormsModule,
    HttpModule, 
    JsonpModule, 
    AppRoutingModule 
 ], 
providers: [
    StorageService,
    NewsService
],
 bootstrap: [AppComponent]
}) 

2、经过 Http、Jsonp请求数据、不用RxJs
RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；无论如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。 app.module.ts引入而且依赖注入完成之后，在须要用到的地方执行下面操做。 使用Http、Jsonp：

一、在须要请求数据的地方引入 Http

import {Http,Jsonp} from "@angular/http";

二、构造函数内申明：

constructor(private http:Http,private jsonp:Jsonp) { }

三、对应的方法内使用http请求数据

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .subscribe(
     function(data){ console.log(data); //参数1: function 成功 ...
　　　　var _that =this;
　　　　var list =JSON.parse(data); //前台直接经过*ngFor就能够循环list数据了
 },
　　  function(err){  //参数2: function 失败...
　　　　　　console.log('失败'); 
    }
 );

 jsonp 同理把 http更换成jsonp 就能够了 可是要在url加回调 即拼接 &callback=JSONP_CALLBACK")

注：JSON.parse可将JSON字符串转译成JSON对象。

var _that =this; 指向方法外定义的数组

=========================================================

使用Post
1. 引入Headers 、Http模块

import {Http,Jsonp,Headers} from "@angular/http";

2. 实例化Headers

private headers = new Headers({'Content-Type': 'application/json'});

this.http .post('http://localhost:8008/api/test', JSON.stringify(
　　{username: 'admin'}), {headers:this.headers}
).subscribe(function(res){
 　　console.log(res.json()); }
);

 

3、经过 Http、Jsonp请求数据、使用RxJs。

须要用到请求数据的地方引入Http模块Jsonp模块，以及rxjs RxJS是一种针对异步数据流编程工具，或者叫响应式扩展编程；可无论如何解释RxJS其目标就是异步编程，Angular引入RxJS为了就是让异步可控、更简单。

大部分RxJS操做符都不包括在Angular的Observable基本实现中，基本实现只包括Angular自己所需的功能。 若是想要更多的RxJS功能，咱们必须导入其所定义的库来扩展Observable对象， 如下是这个模块所需导入的全部RxJS操做符：

一、 引入Http 、Jsonp、RxJs 模块

import {Http,Jsonp} from "@angular/http"; import {Observable} from "rxjs"; import "rxjs/Rx"; 

你可能并不熟悉这种import 'rxjs/Rx'语法，它缺乏了花括号中的导入列表：{...}。 这是由于咱们并不须要操做符自己，这种状况下，咱们所作的实际上是导入这个库，加载并运行其中的脚本， 它会把操做符添加到Observable类中。

二、 构造函数内申明：

constructor(private http:Http,private jsonp:Jsonp) { }

三、get请求 主要添加map(res => res.json()这个方法

this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1") .map(res => res.json()) .subscribe( function(data){ console.log(data); } );

四、Jsonp请求 主要添加map(res => res.json()这个方法

this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1&callback=JSONP_CALLBACK") .map(res => res.json()) .subscribe( function(data){ console.log(data);} );

http.get 方法中返回一个Observable对象，咱们以后调用RxJS的map操做符对返回的数据作处理。