详解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 相关文章推荐
JavaScript高级程序设计 阅读笔记(七) ECMAScript中的语句
Feb 27 Javascript
动态加载脚本提升javascript性能
Feb 24 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
js实现select选择框效果及美化
Aug 19 Javascript
Vue axios 中提交表单数据(含上传文件)
Jul 06 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
Angular6封装http请求的步骤详解
Aug 13 Javascript
mpvue项目中使用第三方UI组件库的方法
Sep 30 Javascript
Vue Prop属性功能与用法实例详解
Feb 23 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
mapboxgl实现带箭头轨迹线的代码
Jan 04 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购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
jQuery 加上最后自己的验证
2009/11/04 Javascript
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
js中传递特殊字符(+,&amp;)的方法
2014/01/16 Javascript
绑定回车enter事件代码
2014/05/18 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
2016/07/22 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
2017/03/03 Javascript
详解如何在Node.js的httpServer中接收前端发送的arraybuffer数据
2018/11/11 Javascript
JS 封装父页面子页面交互接口的实例代码
2019/06/25 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
使用 js 简单的实现 bind、call 、aplly代码实例
2019/09/07 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python多重继承实例
2014/10/11 Python
python 自动重连wifi windows的方法
2018/12/18 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
python 日志 logging模块详细解析
2020/03/31 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
机械专业个人求职自荐信格式
2013/09/21 职场文书
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
中专毕业生自荐信
2013/11/16 职场文书
2013届毕业生求职信范文
2013/11/20 职场文书
本科毕业生自荐信
2014/05/26 职场文书
找工作求职信
2014/07/07 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
五年级数学教学反思
2016/02/16 职场文书
Java反应式框架Reactor中的Mono和Flux
2021/07/25 Java/Android
SQL IDENTITY_INSERT作用案例详解
2021/08/23 MySQL