在项目开发中避免不了要跟服务器端数据链条，进行数据的增删改查操作，传统的方式用的是ajax，新一代网络请求fetch,angular中默认注入了HttpModule，如果在网络请求中出现跨域的问题，请先看angular自带的代理方式处理跨域

一、Http源码介绍

源码中提供了几个方法,下面我们介绍两个比较常用的get与post请求，至于别的request，put，delete，patch，head可以自己去查看

• get(url: string, options?: RequestOptionsArgs): Observable;

• post(url: string, body: any, options?: RequestOptionsArgs): Observable;
  上面两个方法中:

• 1、返回数据类型都是Observable的响应式编程的可观察对象

• 2、get请求必填字段是url
• 3、post请求必填字段url，请求体
• 4、可选参数是请求头信息

二、get请求的介绍

• 1、普通展现方式

//ts文件
import { Component, OnInit } from '@angular/core';
import {Http} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";@Component({selector: 'app-demo05',templateUrl: './demo05.component.html',styleUrls: ['./demo05.component.css']
})
export class Demo05Component implements OnInit {private dataSource:Observable<any>;private data:Array<any> = [];constructor(private http:Http) {this.dataSource = this.http.get("/getdata").map(res=>res.json());}//点击获取数据getData(){this.dataSource.subscribe((data)=>{this.data = data;})}ngOnInit() {}}

//html代码
<h3>我是get请求获取数据</h3>
<input type="button" value="点击我获取数据" (click)="getData()"/>
<ul *ngIf="data.length > 0"><li *ngFor="let item of data;let i = index;">{{i+1}}--{{item.bookname}}--{{item.bookauthor}}--{{item.price}}</li>
</ul>

• 2、封装为单独的服务

//ts代码
import { Component, OnInit } from '@angular/core';
import {Http1Service} from "./../server/http1.service";@Component({selector: 'app-demo06',templateUrl: './demo06.component.html',styleUrls: ['./demo06.component.css'],providers:[Http1Service]
})
export class Demo06Component implements OnInit {private data:Array<any> = [];constructor(private http1Service:Http1Service) { }ngOnInit() {}getData(){this.http1Service.getContacts().subscribe(data=>{this.data = data;})}
}

//服务的代码
import { Injectable } from '@angular/core';
import {Http, Headers} from "@angular/http";
import {Observable} from "rxjs";
import "rxjs/Rx";
@Injectable()
export class Http1Service {constructor(private _http:Http) {}getContacts():Observable<any[]>{/*** 给头部添加请求头*/let myHeaders:Headers = new Headers();myHeaders.append("tocken","abcdefgh");myHeaders.append("app","32486876");return this._http.get("/getdata",{headers:myHeaders}).map(res=>res.json());}
}

//html代码
<h3>我是get请求获取数据</h3>
<input type="button" value="点击我获取数据" (click)="getData()"/>
<ul *ngIf="data?.length > 0"><li *ngFor="let item of data;let i = index;">{{i+1}}--{{item.bookname}}--{{item.bookauthor}}--{{item.price}}</li>
</ul>

三、post请求

对于post提交数据跟get差不多，只是多了一个数据提交到服务器，主要点:

• 1、提交数据要转换json字符串
• 2、新增头信息

let myHeaders:Headers = new Headers();
myHeaders.append("Content-Type","application/json");