详解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 轻松搞定快捷留言功能 只需一行代码
Apr 01 Javascript
JS实现将人民币金额转换为大写的示例代码
Feb 13 Javascript
js单独获取一个checkbox看其是否被选中
Sep 22 Javascript
Javascript中使用parseInt函数需要注意的问题
Apr 02 Javascript
JavaScript学习笔记之数组去重
Mar 23 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
node.js报错:Cannot find module 'ejs'的解决办法
Dec 14 Javascript
layui分页效果实现代码
May 19 Javascript
js实现分页功能
May 24 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
AngularJs导出数据到Excel的示例代码
Aug 11 Javascript
vue 使用Jade模板写html,stylus写css的方法
Feb 23 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实现最简单的MVC框架实例教程
2014/09/08 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js输入框邮箱自动提示功能代码实现
2013/12/10 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
实例讲解jquery与json的结合
2016/01/07 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
微信小程序 实战小程序实例
2016/10/08 Javascript
js编写选项卡效果
2017/05/23 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
2017/12/20 Javascript
微信小程序页面调用自定义组件内的事件详解
2019/09/12 Javascript
React中获取数据的3种方法及优缺点
2020/02/18 Javascript
详解JavaScript原型与原型链
2020/11/16 Javascript
Python切片用法实例教程
2014/09/08 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
Python机器学习之决策树算法实例详解
2017/12/06 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
python3 线性回归验证方法
2019/07/09 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
PyPDF2读取PDF文件内容保存到本地TXT实例
2020/05/12 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
UNIX文件系统常用命令
2012/05/25 面试题
总经理工作职责范文
2014/03/14 职场文书
股份转让协议书
2014/04/12 职场文书
乡镇个人对照检查材料
2014/08/22 职场文书
2014年幼儿园个人工作总结
2014/11/10 职场文书
2014年妇幼保健工作总结
2014/12/08 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2016年教代会开幕词
2016/03/04 职场文书
利用ajax+php实现商品价格计算
2021/03/31 PHP