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 相关文章推荐
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jquery png 透明解决方案(推荐)
Aug 21 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
Feb 27 Javascript
如何正确使用javascript 来进行我们的程序开发
Jun 23 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jquery拖动层效果插件用法实例分析(附demo源码)
Apr 28 Javascript
jQuery通过ajax请求php遍历json数组到table中的代码(推荐)
Jun 12 Javascript
基于vue.js轮播组件vue-awesome-swiper实现轮播图
Mar 17 Javascript
webpack配置之后端渲染详解
Oct 26 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
Aug 28 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
PHP日期时间函数的高级应用技巧
2009/05/16 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php从右向左/从左向右截取字符串的实现方法
2011/11/28 PHP
PHP文件注释标记及规范小结
2012/04/01 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
thinkPHP5框架实现多数据库连接,跨数据连接查询操作示例
2019/05/29 PHP
关于文本限制字数的js代码
2007/04/02 Javascript
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
javascript修改IMG标签的src问题
2014/03/28 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
JS异步加载的三种实现方式
2017/03/16 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
2017/08/16 Javascript
JS实现碰撞检测的方法分析
2018/01/19 Javascript
JS运动特效之任意值添加运动的方法分析
2018/01/24 Javascript
jquery 实现拖动文件上传加载进度条功能
2018/03/18 jQuery
浅谈super-vuex使用体验
2018/06/25 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
vue内置组件transition简单原理图文详解(小结)
2018/07/12 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
Django实现跨域请求过程详解
2019/07/25 Python
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
杭州时比特电子有限公司SQL
2013/08/22 面试题
预备党员思想汇报范文
2014/01/11 职场文书
工作态度检讨书
2014/02/11 职场文书
南京青奥会口号
2014/06/12 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Django项目如何正确配置日志(logging)
2021/04/29 Python
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
疑《守望先锋2》A测截图泄露 或将推出新模式、新界面
2022/04/03 其他游戏