angular2 php 教程,在angular2中有关Http请求原理（详细教程）

这篇文章主要介绍了angular2中Http请求原理与用法,结合实例形式分析了AngularJS中http相关模块实现http服务请求与相应的相关操作技巧,需要的朋友可以参考下

本文实例讲述了angular2中Http请求原理与用法。分享给大家供大家参考，具体如下：

提供HTTP服务

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

编辑app.module.tsimport { HttpModule, JsonpModule } from '@angular/http';

@NgModule({

imports: [

HttpModule,

JsonpModule

],

})

angular-in-memory-web-apinpm 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, '2290910211@qq.com', '123456'),

new User('chenjianhua_b', 22, '2290910211@qq.com', '123456'),

new User('chenjianhua_c', 23, '2290910211@qq.com', '123456'),

new User('chenjianhua_d', 24, '2290910211@qq.com', '123456'),

new User('chenjianhua_e', 25, '2290910211@qq.com', '123456'),

new User('chenjianhua_f', 26, '2290910211@qq.com', '123456'),

];

return {users};

}

}

编辑app.module.tsimport { 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.tsimport {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.tsimport { 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, '2290910211@qq.com', '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对象

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：