这篇文章主要介绍了angular2中http请求原理与用法,结合实例形式分析了angularjs中http相关模块实现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
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对象
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
javascript递归遍历和非递归遍历
vue 个人总结（碰到的问题）
nuxt.js vue服务端渲染摸索
js中let和var定义变量的区别有哪些？
在vue中有关watch检测到不到对象属性的变化方面的问题
以上就是在angular2中有关http请求原理（详细教程）的详细内容。