angular2中Http请求原理与用法详解
本文实例讲述了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
npminstallangular-in-memory-web-api--save-dev
Thisin-memorywebapiserviceprocessesanHTTPrequestandreturnsanObservableofHTTPResponseobjectinthemannerofaRESTywebapi.
:base/:collectionName/:id? GETapi/heroes//allheroes GETapi/heroes/42//thecharacterwithid=42 GETapi/heroes?name=^j//'j'isaregex;returnsheroeswhosenamestartingwith'j'or'J' GETapi/heroes.json/42//ignoresthe".json"
之前测试时用的app/mock/user_data_memory_mock.ts数据
import{User}from'../model/User';
import{InMemoryDbService}from'angular-in-memory-web-api';
exportclassUserDataMemoryMockimplementsInMemoryDbService{
createDb(){
constusers:User[]=[
newUser('chenjianhua_a',21,'2290910211@qq.com','123456'),
newUser('chenjianhua_b',22,'2290910211@qq.com','123456'),
newUser('chenjianhua_c',23,'2290910211@qq.com','123456'),
newUser('chenjianhua_d',24,'2290910211@qq.com','123456'),
newUser('chenjianhua_e',25,'2290910211@qq.com','123456'),
newUser('chenjianhua_f',26,'2290910211@qq.com','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()
exportclassUserService{
privateUSERURL='api/users';
privateheaders=newHeaders({'Content-Type':'application/json'});
constructor(privateLog:Logger,
privatehttp:Http){}
getUserByName(name:string):Promise{
consturl=`${this.USERURL}/?name=${name}`;
returnthis.http.get(url)
.toPromise()
.then(response=>response.json().dataasUser)
.catch(this.handleError);
}
getUsers():Promise{
console.log('GetUser!');
returnthis.http.get(this.USERURL)
.toPromise()
.then(response=>response.json().dataasUser[])
.catch(this.handleError);
}
create(name:string):Promise{
returnthis.http
.post(this.USERURL,JSON.stringify({name:name}),{headers:this.headers})
.toPromise()
.then(res=>res.json().dataasUser)
.catch(this.handleError);
}
privatehandleError(error:any):Promise{
console.log('Anerroroccurred:',error);
returnPromise.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
]
})
exportclassAppLoginFormComponentimplementsOnInit{
users:User[];
submitted=false;
model=newUser('1','fangfang',22,'2290910211@qq.com','123456');
constructor(
privateLog:Logger,
privateuserService: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('loginsuccess!');
this.submitted=true;
}else{
this.Log.log('loginfailed!');
this.submitted=false;
}
})
.catch(errorMsg=>console.log(errorMsg));
}
}
HTTPPromise
Angular的http.get返回一个RxJS的Observable对象。Observable是一个管理异步数据流的强力方式。
现在，我们先利用toPromise方法把Observable直接转换成Promise对象
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。