angular5 httpclient的示例实战


Posted in Javascript onMarch 12, 2018

从angular 4.3.0 以后的版本开始使用httpclient,替换了之前的http,引用的包路径已经变为了angular/common/http了

一个基础的 httpclient 样例

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { HttpDefaultOptions } from './http.default.options';

@Injectable()
export class Service {

 private static METHOD_DELTE = 'DELETE';
 private static METHOD_POST = 'POST';
 private static METHOD_GET = 'GET';
 private static METHOD_PUT = 'PUT';

 constructor(private httpClient: HttpClient) {
 }

 /**
  * 将数据上传
  * @param data
  * @param {Function} func
  */
 uploadDataPost(data: any, func: Function) {
  let url = '/api/test';
  this.apiPost(url, data)
   .subscribe((response: HttpResponse) => {
    func(response);
   }, error => {
    func(undefined);
   });
 }

 /**
  * 返回json 格式的obj 对象
  * @param url
  * @param body
  * @param urlSearchParams
  * @returns {Observable<{}>}
  */
 apiPost(url, body, urlSearchParams?: any): Observable<{}> {
  let options = {
   body: body ? body : null,
   params: urlSearchParams,
   responseType: 'json'
  };
  return this.httpClient.request(Service.METHOD_POST, url, options);
 }

 /**
  * 返回一个obj 对象
  * @param url
  * @param urlSearchParams url 的查询参数
  * @returns {Observable<{}>}
  */
 apiGet(url, urlSearchParams?: any): Observable<{}> {
  let options = {
   params: urlSearchParams,
   responseType: 'json'
  };
  return this.httpClient.request(Service.METHOD_GET, url, options);
 }
}

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

Javascript 相关文章推荐
预加载css或javascript的js代码
Apr 23 Javascript
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
Jan 06 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
Bootstrap CSS组件之大屏幕展播
Dec 17 Javascript
antd组件Upload实现自己上传的实现示例
Dec 18 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
vue 简单自动补全的输入框的示例
Mar 12 #Javascript
webpack打包js的方法
Mar 12 #Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
Mar 12 #Javascript
vue路由懒加载的实现方法
Mar 12 #Javascript
vue移动UI框架滑动加载数据的方法
Mar 12 #Javascript
详解vuex的简单使用
Mar 12 #Javascript
js提取中文拼音首字母的封装工具类
Mar 12 #Javascript
You might like
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
CI(CodeIgniter)框架中的增删改查操作
2014/06/10 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
深入解析contentWindow, contentDocument
2013/07/04 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
2014/05/20 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
2014/07/23 Javascript
jQuery经过一段时间自动隐藏指定元素的方法
2015/03/17 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
微信小程序教程系列之视图层的条件渲染(10)
2017/04/19 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
2017/09/21 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
使用konva和vue-konva库实现拖拽滑块验证功能
2020/04/27 Javascript
浅谈vant组件Picker 选择器选单选问题
2020/11/04 Javascript
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
python生成IP段的方法
2015/07/07 Python
Python利用turtle库绘制彩虹代码示例
2017/12/20 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
Python 使用多属性来进行排序
2019/09/01 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
Python hmac模块使用实例解析
2019/12/24 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Python+Django+MySQL实现基于Web版的增删改查的示例代码
2020/05/13 Python
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
意大利灯具购物网站:Lampade.it
2018/10/18 全球购物
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
软环境建设心得体会
2014/09/09 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
导师对论文的学术评语
2015/01/04 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Python基于Opencv识别两张相似图片
2021/04/25 Python