angular2中Http请求原理与用法详解

前端之家收集整理的这篇文章主要介绍了angular2中Http请求原理与用法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

提供HTTP服务

@angular/http的独立附属模块中.

编辑app.module.ts

angular-in-memory-web-api

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.

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

编辑app.module.ts

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

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

{ 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

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对象

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《》、《》及《

希望本文所述对大家AngularJS程序设计有所帮助。

猜你在找的JavaScript相关文章