在Angular中，请求数据不管是get、post都是使用的HttpClientModule模块。
1、get请求数据
- 在app.module.ts中引入HttpClientModule并在import中注入
// 第一步，在app.modules中引入HttpClientModule并注入
import {HttpClientModule} from "@angular/common/http"
imports: [
BrowserModule,
HttpClientModule
],
- 在用到的地方引入HttpClient并在构造函数中声明
import { HttpClient} from '@angular/common/http';
constructor(public http:HttpClient) { }
- 封装方法开始请求数据
getData(){
var api = 'https://mobile-ms.uat.homecreditcfc.cn/mock/61090f7b5a76d8002786178d/api/staff/person';
this.http.get(api).subscribe((res:any)=>{
if(res.data && res.data.length !== 0){
this.array = res.data;
}
})
}
- 在声明周期或者需要数据地方去调用该接口的方法
ngAfterViewInit(): void {
this.getData();
}
2、post请求数据
- 在app.module.ts中引入HttpClientModule并在import中注入
// 第一步，在app.modules中引入HttpClientModule并注入
import {HttpClientModule} from "@angular/common/http"
imports: [
BrowserModule,
HttpClientModule
],
- 在用到的地方引入HttpClient和HttpHeaders 并在构造函数中声明
import { HttpClient,HttpHeaders } from '@angular/common/http';
constructor(public http:HttpClient) { }
- 定义httpOptions
const httpOptions = {
headers:new HttpHeaders({'Content-Type':'application/json'})
};
- 开始封装post请求数据的方法
postData(){
const httpOptions = {
headers:new HttpHeaders({'Content-Type':'application/json'})
};
var api = "https://mobile-ms.uat.homecreditcfc.cn/mock/61090f7b5a76d8002786178d/api/staff/list";
var body = {pn:1,ps:10};
this.http.post(api,body,httpOptions).subscribe((res:any)=>{
if(res.data && res.data.length !== 0){
this.list = res.data;
}
})
}
get请求.png
post请求.png
