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");