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


Posted in Javascript onJanuary 11, 2018

本文实例讲述了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 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.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对象

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

Javascript 相关文章推荐
TopList标签和JavaScript结合两例
Aug 12 Javascript
javascript 多级checkbox选择效果
Aug 20 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
Angular.js回顾ng-app和ng-model使用技巧
Apr 26 Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
Jun 21 Javascript
Jquery鼠标放上去显示全名的实现方法
Feb 06 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
微信小程序实现皮肤功能(夜间模式)
Jun 18 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
mpvue微信小程序的接口请求fly全局拦截代码实例
Nov 13 Javascript
基于node下的http小爬虫的示例代码
Jan 11 #Javascript
JS脚本实现网页自动秒杀点击
Jan 11 #Javascript
Javascript网页抢红包外挂实现分享
Jan 11 #Javascript
JS写谷歌浏览器chrome的外挂实例
Jan 11 #Javascript
React 高阶组件入门介绍
Jan 11 #Javascript
基于react后端渲染模板引擎noox发布使用
Jan 11 #Javascript
Router解决跨模块下的页面跳转示例
Jan 11 #Javascript
You might like
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
PHP MemCached 高级缓存应用代码
2010/08/05 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
javascript 必知必会之closure
2009/09/21 Javascript
JS随即打乱数组实现代码
2012/12/03 Javascript
javascript 中that的含义示例介绍
2014/05/14 Javascript
JS实现带有3D立体感的银灰色竖排折叠菜单代码
2015/10/20 Javascript
jQuery学习笔记之入门
2016/12/14 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
VueJS组件之间通过props交互及验证的方式
2017/09/04 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
Vue CLI3.0中使用jQuery和Bootstrap的方法
2019/02/28 jQuery
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
Vue中qs插件的使用详解
2020/02/07 Javascript
ES2020让代码更优美的运算符 (?.) (??)
2021/01/04 Javascript
Python字符串匹配算法KMP实例
2015/07/18 Python
Python 中的 else详解
2016/04/23 Python
详解Python核心对象类型字符串
2018/02/11 Python
Python中six模块基础用法
2019/12/08 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
HTML5 video标签(播放器)学习笔记(一):使用入门
2015/04/24 HTML / CSS
购买原创艺术品:Zatista
2019/11/09 全球购物
茶叶生产计划书
2014/01/10 职场文书
双方协议书
2014/04/22 职场文书
银行求职信
2014/05/31 职场文书
节电标语大全
2014/06/23 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
教师学期个人总结
2015/02/11 职场文书
围城读书笔记
2015/06/26 职场文书
教师正风肃纪心得体会
2016/01/15 职场文书
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis