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中的私有成员
Sep 18 Javascript
javascript 嵌套的函数(作用域链)
Mar 15 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
Angular2 多级注入器详解及实例
Oct 30 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
Js数组扁平化实现方法代码总汇
Nov 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
php判断对象是派生自哪个类的方法
2015/06/20 PHP
php实现评论回复删除功能
2017/05/23 PHP
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
js隐藏与显示回到顶部按钮及window.onscroll事件应用
2013/01/25 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
2014/05/15 Javascript
jQuery实现类似淘宝网图片放大效果的方法
2015/07/08 Javascript
JavaScript 封装一个tab效果源码分享
2015/09/15 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
深入理解node exports和module.exports区别
2016/06/01 Javascript
JavaScript中匿名函数的递归调用
2017/01/22 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
微信小程序日历效果
2018/12/29 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
vue 判断两个时间插件结束时间必选大于开始时间的代码
2020/11/04 Javascript
python 字符串split的用法分享
2013/03/23 Python
跟老齐学Python之网站的结构
2014/10/24 Python
python学习之编写查询ip程序
2016/02/27 Python
Python制作豆瓣图片的爬虫
2017/12/28 Python
python数据封装json格式数据
2018/03/04 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
Python 3.8中实现functools.cached_property功能
2019/05/29 Python
对Python中TKinter模块中的Label组件实例详解
2019/06/14 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
kali中python版本的切换方法
2019/07/11 Python
python实现复制大量文件功能
2019/08/31 Python
python 已知一个字符,在一个list中找出近似值或相似值实现模糊匹配
2020/02/29 Python
详解HTML5表单新增属性
2016/12/21 HTML / CSS
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
死亡赔偿协议书
2015/01/28 职场文书
vue2实现provide inject传递响应式
2021/05/21 Vue.js
理解python中装饰器的作用
2021/07/21 Python
开发者首先否认《遗弃》被取消的传言
2022/04/11 其他游戏