Angular开发(十六)-HTTP请求的详细介绍

在项目开发中避免不了要跟服务器端数据链条，进行数据的增删改查操作，传统的方式用的是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");