Augular http服务

一: 在 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);
    });