一. app.module.ts注册http jsonp服务
-
引入HttpModule、JsonpModule
普通的http调用并不需要用到JsonpModule,不过稍后我就会演示对jsonp的支持,所以现在就加载它,免得浪费时间。import { HttpModule,JsonpModule } from '@angular/http';
-
HttpModule、JsonpModule依赖注入
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpClientModule,
NgZorroAntdModule,
DragDropModule,
DelonChartModule.forRoot(),
HttpModule,
JsonpModule
],
二. 通过http、jsonp请求数据——get
- 创建服务,引入Http、Jsonp模块
ng g service service/test
- 构造函数内声明
constructor(private http:Http,private Jsonp:Jsonp) { }
- 在service中定义方法,发送get请求,并返回对应接口得到的数据
getData(){
const url="http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1";
return this.http.get(url);
}
- 在对应页面导入test.service
import { TestService } from '../../service/test.service';
- 导入RxJs,使用RxJs库中的方法处理数据
import {Observable} from "rxjs";
import "rxjs/Rx";
- 在构造函数中注册testService
constructor(
private testService:TestService
) { }
- 调用service中封装好的getData()方法获取数据
requestData(){
this.testService.getData()
.subscribe((data) => {
console.log(JSON.parse(data['_body'])['result']);
this.list=JSON.parse(data['_body'])['result'];
},error => this.error = error);
}
subscribe里面封装了请求成功的回调和失败的回调
- Jsonp请求,请求路径后注意加上callback后的内容
三. 通过http请求数据——post
- post与get的不同之处在于,post请求数据要传三个参数,即url、data(页面调用post方法传入)、header。
- 引入注册header
import { Http,Jsonp,Headers } from '@angular/http';
3.发起请求
postData(val){
const url="http://127.0.0.1:3000/dologin";
return this.http.post(url,JSON.stringify(val),{headers:this.headers})
}
- 页面调用
postValue(){
this.testService.postData(this.data).subscribe((data)=>{
console.log(data);
},error=>{
console.log(error)
})
}
四. 通过http请求数据——delete
- service中发起请求
deleteHero (id: number): Observable<{}> {
const url = `${this.heroesUrl}/${id}`; // DELETE api/heroes/42
return this.http.delete(url, headers)
.pipe(//管道函数
catchError(this.handleError('deleteHero'))
);
}
- 页面调用
this.heroesService.deleteHero(hero.id).subscribe();
该组件不会等待删除操作的结果,所以它的 subscribe (订阅)中没有回调函数。不过就算你不关心结果,也仍然要订阅它。调用 subscribe() 方法会执行这个可观察对象,这时才会真的发起 DELETE 请求。
**你必须调用 subscribe(),否则什么都不会发生。仅仅调用 HeroesService.deleteHero()
是不会发起 DELETE 请求的。**
五. 通过http请求数据——delete
put与post方法一致,三个参数,url、data(请求体)、headers
- service发起请求
updateHero (hero: Hero): Observable<Hero> {
return this.http.put<Hero>(this.heroesUrl, hero, headers)
.pipe(
catchError(this.handleError('updateHero', hero))
);
}
- 页面调用
putValue
this.testService.updateHero (this.data).subscribe((data)=>{
console.log(data);
},error=>{
console.log(error)
})
}