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 相关文章推荐
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
May 22 Javascript
jQuery EasyUI API 中文文档 - Panel面板
Sep 30 Javascript
js中判断对象是否为空的三种实现方法
Dec 23 Javascript
JQuery以JSON方式提交数据到服务端示例代码
May 05 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
适用于javascript开发者的Processing.js入门教程
Feb 24 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 Javascript
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
Apr 11 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
声音就能俘获人心,蕾姆,是哪个漂亮小姐姐配音呢?
2020/03/03 日漫
推荐Discuz!5的PHP代码高亮显示与实现可运行代码
2007/03/15 PHP
php图片处理:加水印、缩略图的实现(自定义函数:watermark、thumbnail)
2010/12/02 PHP
PHP连接Access数据库的方法小结
2013/06/20 PHP
php calender(日历)二个版本代码示例(解决2038问题)
2013/12/24 PHP
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
javascript 图片上一张下一张链接效果代码
2010/03/12 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
全面理解JavaScript中的继承(必看)
2016/06/16 Javascript
Vue表单验证插件的制作过程
2017/04/01 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
微信小程序事件 bindtap bindinput代码实例
2019/08/26 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
2019/09/10 Javascript
解决vue中el-tab-pane切换的问题
2020/07/19 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
2020/08/19 Javascript
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python实现学生成绩管理系统
2020/04/05 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
Python模块常用四种安装方式
2020/10/20 Python
应届生求职信写作技巧
2013/10/24 职场文书
2015年招聘工作总结
2014/12/12 职场文书
欢迎词范文
2015/01/27 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
投诉书范文
2015/07/02 职场文书
房地产置业顾问工作总结
2015/10/23 职场文书
四年级数学教学反思
2016/02/16 职场文书
2016年最美孝心少年事迹材料
2016/02/26 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers