一: 在 app.moudel.ts 中导入 HttpClientModule 模块
import { HttpClientModule } from '@angular/common/http';
别忘记下边全局模块中添加 HttpClientModule
imports: [
BrowserModule,
FormsModule,
HttpClientModule,//加入这个
AppRoutingModule
],
二:在要创建的服务或组件中引入 HttpClient 模块
import { HttpClient } from '@angular/common/http';
并且在相应的构造函数中声明
export class HeaderComponent implements OnInit {
//http 为变量名 自己定义的
constructor(public http: HttpClient) { }
ngOnInit() {
}
}
三:设置请求方法
组件中使用写法
export class HeaderComponent implements OnInit {
constructor(public http: HttpClient) { }
ngOnInit() {
}
getD () {
this.http.get('/api/po').subscribe(data => {
// subscribe订阅方法,该方法可以获取异步返回的数据,也可以视作一个数据处理的回调函数
console.log(data);
});
}
}
注意:get方法传入得参数为请求的url,如果是post方法需要传入第二个参数,第二个参数为提交数据,数据类型为对象
subscribe(data => { }) 该小括号中是一个回调函数 data为返回数据
在写小括号内的回调函数时,webstorm会自动在data前边添加 next: , 还有get方法的 参数前边添加 url:, 如果没有不用管,不要自己去手打,如果有不要管它
服务写法
在服务的 ts文件中写 get/post方法
export class HttpService {
constructor(public http: HttpClient) { }
getMyData() {
return this.http.get('/api/get');
}
// 设置post方法
postMyData() {
// post 第一个参数为请求接口,第二个参数为提交数据
return this.http.post('/api/post', {
name: '公孙离',
age: 12
});
}
然后在组件中引入该服务
import { HttpService } from '../../service/http.service';
并且在构造函数中声名
constructor( public https: HttpService) { }
设置方法
// 使用Http的get方法
useHttpGet() {
this.https.getMyData().subscribe(data => {
console.log(data);
});