详解AngularJS2 Http服务


Posted in Javascript onJune 26, 2017

关于http服务

HttpModule并不是angular的核心模块,它是一个附加的模块,存在于@angular/http中,虽然如此但是依然可以在需要的时候使用它,只需要在使用之前引入即可。对于大多数app来说使用http服务是很常见的,所以我们将HttpModule加入到AppModule的import列表和应用的根组件中,这样就可以在整个应用中使用http服务了

在自定义服务中使用Http服务

http服务通过其get方法获取数据,他会返回RxJS Observable,我们希望使用的数据是Promise,然而 Observable 并没有toPromise()方法,可以在自定义服务中这样引入

import 'rxjs/add/operator/toPromise';

如此就拓展了Observable的功能了

具体代码如下

import { Injectable }  from '@angular/core';

import { Headers, Http } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Hero } from './hero';
 private heroesUrl = 'api/heroes'; // URL to web api

 constructor(private http: Http) { }

 getHeroes(): Promise<Hero[]> {
  return this.http.get(this.heroesUrl)
        .toPromise()
        .then(response => response.json().data as Hero[])
        .catch(this.handleError);
 }

 private handleError(error: any): Promise<any> {
  console.error('An error occurred', error); // for demo purposes only
  return Promise.reject(error.message || error);
 }

在回调函数then()中调用了返回对象的json()方法将data从返回对象中分离出来

.then(response => response.json().data as Hero[])

 这里的.data是因为返回对象中有data这个属性,具体情况下会不一样

注意:Http failure是经常发生的,必须预料到会有异常的可能,所以在方法最后捕获了异常并将其传递给异常处理器,使用Promise.reject()将错误信息返回给服务调用者

利用服务实现数据的增删改查

信息查询

可以在请求url里面带上参数,这样就可以将参数传到后台,服务器查到信息后返回到前台

getHero(id: number): Promise<Hero> {
    const url = `${this.heroesUrl}/${id}`;
    return this.http.get(url).toPromise()
   .then(response => response.json().data as Hero)
   .catch(this.handleError);
  }

修改信息

在自定义服务中

private headers = new Headers({'Content-Type': 'application/json'});
  update(hero: Hero): Promise<Hero> {
  const url = `${this.heroesUrl}/${hero.id}`;
  return this.http
  .put(url, JSON.stringify(hero), {headers: this.headers})
  .toPromise()
  .then(() => hero)
  .catch(this.handleError);
}

依然是在url后带上id告知服务器要修改的记录标识,JSON.stringify()将对象转化成json字符串,通过put将字符串放到请求中,header说明了请求体的类型

在调用服务的组件中

save(): void {
   this.heroService.update(this.hero)
    .then(() => this.goBack());
  }

修改成功后返回前一个视图

添加信息

在自定义服务中

create(name: string): Promise<Hero> {
 return this.http
  .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
  .toPromise()
  .then(res => res.json().data)
  .catch(this.handleError);
}

删除信息

在自定义服务中

delete(id: number): Promise<void> {
   const url = `${this.heroesUrl}/${id}`;
   return this.http.delete(url, {headers: this.headers})
    .toPromise()
    .then(() => null)
    .catch(this.handleError);
  }

这步只是将后台的信息删除了,但是本地数组中依然存在,所以依然会在视图中显示,所以就要在组建中进行一些处理

delete(hero: Hero): void {
 this.heroService
   .delete(hero.id)
   .then(() => {
    this.heroes = this.heroes.filter(h => h !== hero);
    if (this.selectedHero === hero) { this.selectedHero = null; }
   });
}

这步就是将已经删除的数据从本地数组中过滤掉

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS实现日期加减的方法
Nov 29 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
vue项目中应用ueditor自定义上传按钮功能
Apr 27 Javascript
vue源码学习之Object.defineProperty对象属性监听
May 30 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
Vue常见面试题整理【值得收藏】
Sep 20 Javascript
vue实现修改图片后实时更新
Nov 14 Javascript
在vue中使用防抖函数组件操作
Jul 26 Javascript
详解用node.js实现简单的反向代理
Jun 26 #Javascript
JS作用域链详解
Jun 26 #Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 #jQuery
纯JS实现简单的日历
Jun 26 #Javascript
vue2.0全局组件之pdf详解
Jun 26 #Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 #Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 #Javascript
You might like
PHP句法规则详解 入门学习
2011/11/09 PHP
php遍历文件夹所有文件子文件夹函数代码
2013/11/27 PHP
php+ajax 实现输入读取数据库显示匹配信息
2015/10/08 PHP
js的with语句使用方法
2007/09/21 Javascript
jQuery 使用手册(三)
2009/09/23 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
2010/12/19 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery实现的一个文章自定义分段显示功能
2014/05/23 Javascript
JavaScript常用的弹出广告及背投广告实现方法
2015/02/06 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
bootstrap弹出层的多种触发方式
2017/05/10 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
JavaScript之RegExp_动力节点Java学院整理
2017/06/29 Javascript
vue mint-ui学习笔记之picker的使用
2017/10/11 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
Python assert关键字原理及实例解析
2019/12/13 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5 canvas画矩形时出现边框样式不一致的解决方法
2013/10/14 HTML / CSS
瑞典Happy Socks美国官网:购买色彩斑斓的快乐袜子
2016/10/19 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
华为C++笔试题
2014/08/05 面试题
阿尔卡特(中国)的面试题目
2014/08/20 面试题
留学自荐信写作方法
2014/01/27 职场文书
英语课前三分钟演讲稿(6篇)
2014/09/13 职场文书
党员组织生活会发言材料
2014/10/17 职场文书