angular2 Http请求
来源:互联网 发布:淘宝怎么看买家秀 编辑:程序博客网 时间:2024/05/22 16:45
提供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 heroesGET api/heroes/42 // the character with id=42GET 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.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<User> { const url = `${this.USERURL}/?name=${name}`; return this.http.get(url) .toPromise() .then(response => response.json().data as User) .catch(this.handleError); } getUsers(): Promise<User[]> { 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<User> { 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<any>{ 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, '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
对象
参考
- RxJs 介绍
- angular-in-memory-web-api
阅读全文
0 0
- angular2 Http请求
- angular2 http post请求
- angular2-英雄指南教程http请求
- angular2实现统一的http请求头
- Angular2-http
- angular2-http
- Angular2 Http
- angular2的http请求返回结果的subcribe注意事项
- Angular2 http服务
- Angular2(九)--http
- Angular2 Http的使用
- Angular2 http服务
- angular2使用Http服务
- Angular2学习 Http通信
- Angular2 http模块
- angular2/angular4 如何通过$http的post方法请求下载二进制的Excel文件
- angular2.0 http示例代码
- Angular2 Http拦截器 Interceptor 实现
- react路由提高(Prompt、Redirect、match、Switch)
- xml生成
- 动态顺序表(C语言实现)
- leetcode 42. Trapping Rain Water
- 解决oracle速度变慢
- angular2 Http请求
- [LeetCode] Unique Paths II 起点与终点确定的路径数II
- 插入法 排列 linked list
- Python基础(4)-文件操作
- Gradle版本管理-升级与降级
- hbase安装中遇到的一些问题及解决办法
- LeetCode 10. Regular Expression Matching
- python3 爬取深圳主板公司名称,公司网址
- 如何在sublime中使用sass