angular2 Http请求

提供HTTP服务

HttpModule并不是Angular的核心模块。 它是Angular用来进行Web访问的一种可选方式，并位于一个名叫@angular/http的独立附属模块中.

编辑app.module.ts

import { HttpModule, JsonpModule } from '@angular/http';

@NgModule({
  imports: [
    HttpModule,
    JsonpModule
  ],
})

angular-in-memory-web-api

npm install angular-in-memory-web-api --save-dev

This in-memory web api service processes an HTTP request and returns an Observable of HTTP Response object in the manner of a RESTy web api.

:base/:collectionName/:id?
GET api/heroes          // all heroes
GET api/heroes/42       // the character with id=42
GET api/heroes?name=^j  // 'j' is a regex; returns heroes whose name starting with 'j' or 'J'
GET api/heroes.json/42  // ignores the ".json"

之前测试时用的app/mock/user_data_memory_mock.ts数据

import {User} from '../model/User';
import { InMemoryDbService } from 'angular-in-memory-web-api';

export class UserDataMemoryMock implements InMemoryDbService{
  createDb() {
    const users: User[] = [
        new User('chenjianhua_a', 21, '[email protected]', '123456'),
        new User('chenjianhua_b', 22, '[email protected]', '123456'),
        new User('chenjianhua_c', 23, '[email protected]', '123456'),
        new User('chenjianhua_d', 24, '[email protected]', '123456'),
        new User('chenjianhua_e', 25, '[email protected]', '123456'),
        new User('chenjianhua_f', 26, '[email protected]', '123456'),    
    ];
    return {users};
  }
}

编辑app.module.ts

import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { UserDataMemoryMock } from './mock/user_data_memory_mock';

@NgModule({
  imports: [
    InMemoryWebApiModule.forRoot(UserDataMemoryMock),
  ]
})

导入InMemoryWebApiModule并将其加入到模块的imports数组。 InMemoryWebApiModule将Http客户端模拟的后端服务
forRoot()配置方法需要UserMemoryMockService类实例，用来向内存数据库填充数据

编辑app/service/user.restful.service.ts

import {Injectable} from '@angular/core';
import { Headers, Http } from '@angular/http';
import 'rxjs/add/operator/toPromise';

import { User } from '../model/User';
import { Logger } from './logger.service';

@Injectable()
export class UserService {
    private USERURL = 'api/users';
    private headers = new Headers({'Content-Type': 'application/json'});

    constructor(private Log: Logger,
    private http: Http) { }


    getUserByName(name: string): Promise {
    const url = `${this.USERURL}/?name=${name}`;
    return this.http.get(url)
        .toPromise()
        .then(response => response.json().data as User)
        .catch(this.handleError);
    }

    getUsers(): Promise {
        console.log('Get User!');
        return this.http.get(this.USERURL)
        .toPromise()
        .then(response => response.json().data as User[])
        .catch(this.handleError);
    }

    create(name: string): Promise {
    return this.http
        .post(this.USERURL, JSON.stringify({name: name}), {headers: this.headers})
        .toPromise()
        .then(res => res.json().data as User)
        .catch(this.handleError);
    }
    private handleError(error: any): Promise{
        console.log('An error occurred :', error);
        return Promise.reject(error.message);
    }
}

编辑app/components/app-loginform/app.loginform.ts

import { Component, OnInit } from '@angular/core';
import { Logger } from '../../service/logger.service';
import { UserService } from '../../service/user.restful.service';
import { User } from '../../model/User';
import { Subject } from 'rxjs/Subject';

@Component({
  selector: 'app-loginform',
  templateUrl: './app.loginform.html',
  styleUrls: ['./app.loginform.css'],
  providers: [
    Logger,
    UserService
  ]
})

export class AppLoginFormComponent implements OnInit {
    users: User[];
    submitted = false;
    model = new User('1', 'fangfang', 22, '[email protected]', '123456');

    constructor(
        private Log: Logger,
        private userService: UserService
    ){}


    ngOnInit(): void{
        this.userService
        .getUsers()
        .then( users => this.users = users);
    }
    onSubmit(): void {
        this.userService.getUserByName(this.model.name)
        .then( user => {
            console.log('user.name', user[0].name);
            console.log('user.password', user[0].password);
            if(user[0].name === this.model.name
            && user[0].password === this.model.password){
                this.Log.log('login success!');
                this.submitted = true;
            }else{
                this.Log.log('login failed!');
                this.submitted = false;
            }
        })
        .catch(errorMsg => console.log(errorMsg));

    }
}

HTTP Promise

Angular 的http.get返回一个 RxJS 的Observable对象。 Observable是一个管理异步数据流的强力方式。
现在，我们先利用toPromise方法把Observable直接转换成Promise对象

参考

• RxJs 介绍
• angular-in-memory-web-api