一、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 ] }) export class AppModule { } |
二、通过 Http、Jsonp 请求数据、不用 RxJs
RxJS 是一种针对异步数据流编程工具,或者叫响应式扩展编程;不管如何解释 RxJS 其目标就是异步编程,
Angular 引入 RxJS 为了就是让异步可控、更简单。
app.module.ts 引入并且依赖注入完成以后,在需要用到的地方执行下面操作。 使用 Http、Jsonp:
1、在需要请求数据的地方引入 Http
import {Http,Jsonp} from "@angular/http";
2、构造函数内 申明:
constructor(private http:Http,private jsonp:Jsonp) { }
3、对应的方法内使用 http 请求数据
this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&ca tid=20&page=1") |
.subscribe( function(data){ console.log(data); } ,function(err){ |
console.log('失败'); } ); |
this.jsonp.get("http://www.phonegap100.com/appapi.php?a=getPortalList&c atid=20&page=1&callback=JSONP_CALLBACK") .subscribe( |
function(data){ console.log(data); },function(err){ console.log('失败'); |
} ); |
使用 Post
1. 引入 Headers 、Http 模块
import {Http,Jsonp,Headers} from "@angular/http";
2. 实例化 Headers
private headers = new Headers({'Content-Type': 'application/json'});
3.post 提交数据
this.http.post('http://localhost:8008/api/test', JSON.stringify({username: 'admin'}), {headers:this.headers}) // .toPromise() .subscribe(function(res){ |
console.log(res.json()); }); |
三、通过 Http、Jsonp 请求数据、使用 RxJs。
需要用到请求数据的地方引入 Http 模块 Jsonp 模块,以及 rxjs
RxJS 是一种针对异步数据流编程工具,或者叫响应式扩展编程;可不管如何解释 RxJS 其
目标就是异步编程,Angular 引入 RxJS 为了就是让异步可控、更简单
大部分 RxJS 操作符都不包括在 Angular 的 Observable 基本实现中,基本实现只包括 |
Angular 本身所需的功能。 如果想要更多的 RxJS 功能,我们必须导入其所定义的库来扩展 Observable 对象, 以下 是这个模块所需导入的所有 RxJS 操作符: |
1、 引入 Http 、Jsonp、RxJs 模块
import {Http,Jsonp} from "@angular/http"; |
import {Observable} from "rxjs"; import "rxjs/Rx"; |
你可能并不熟悉这种import 'rxjs/Rx'语法,它缺少了花括号中的导入列表:{...}。
这是因为我们并不需要操作符本身,这种情况下,我们所做的其实是导入这个库,加载并运行其中的脚本, 它会把操作符添加到 Observable 类中。
rxjx@^5.0.0版本Observable、静态方法、操作符的引用方法在@^6中报的错误
import {Observable} from "rxjs/Observable"; import "rxjs/add/Observable/fromEvent"; import "rxjs/add/operator/map";
ERROR in node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'. src/app/common/services/http/api.ts(7,9): error TS2305: Module '"F:/exercises/myNG/node_modules/rxjs/Observable"' has no exported member 'Observable'. ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable' ERROR in ./node_modules/rxjs/add/Observable/fromEvent.js Module not found: Error: Can't resolve 'rxjs-compat/add/observable/fromEvent' in 'F:\exercises\myNG\node_modules\rxjs\add\Observable'
rxjx@^6.0.0中的正确引用方法
import {Observable} from "rxjs/index" 和 import {Observable} from "rxjs"这两种引用都是正确的,但是在webStorm中的第二种方法会有错误信息的提示,但是可以正常编译,因为编译的时候对象会自动检索rxjs文件夹下的index.d.ts文件,但是webStorm在显示的时候不会去检索,rxjs只是一个文件夹。
import {Observable} from "rxjs/index"; //Observable import {fromEvent} from "rxjs/index"; //静态方法 import { map } from "rxjs/operators"; //操作符
注意:正确的引用还没有完,静态方法和操作符使用方法还有变化,下面是rxjs@^5版本的实用方法及报错信息
Observable.fromEvent(someDocumen, "someEvent").startWith(0).map()
ERROR in src/.... Property 'fromEvent' does not exist on type 'typeof Observable'. ERROR in src/....: error TS2339: Property 'startWith' does not exist on type 'Observable<Event>'. ERROR in src/....: error TS2339: Property 'map' does not exist on type 'Observable<Event>'.
rxjs@^6版本的正确使用方法
静态方法直接调用就可以了,比以前版本方便不少,但是这个操作符要吐槽一下,完全没有以前的链式写法用着方便,看着舒服,理解着容易,差评!差评!!
fromEvent(someDocumen, "someEvent").pipe( startWith(0), map() )
import { filter } from 'rxjs/operators'; // .. this.router.events.pipe( filter((event:Event) => event instanceof NavigationEnd) ).subscribe(x => console.log(x))
2、 构造函数内申明:
constructor(private http:Http,private jsonp:Jsonp) { }
3、get请求
this.http.get("http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&p age=1") .map(res => res.json()) .subscribe( |
function(data){ console.log(data); } |
); |
4、Jsonp 请求
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 操作符对返回的数据 做处理。