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 相关文章推荐
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
js获取和设置属性的方法
Feb 20 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 Javascript
详解jquery事件delegate()的使用方法
Jan 25 Javascript
jQuery实现简单隔行变色的方法
Feb 20 Javascript
一个简单的JavaScript Map实例(分享)
Aug 03 Javascript
angular 基于ng-messages的表单验证实例
May 04 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
vue项目中使用ueditor的实例讲解
Mar 05 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
vue-router实现嵌套路由的讲解
Jan 19 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
php中的时间处理
2006/10/09 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Gird事件机制初级读本
2007/03/10 Javascript
jquery中获得$.ajax()事件返回的值并添加事件的方法
2010/04/15 Javascript
改写一个简单的菜单 弹性大小
2010/12/02 Javascript
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
JavaScript作用域与作用域链深入解析
2013/12/06 Javascript
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
JavaScript实现网页对象拖放功能的方法
2015/04/15 Javascript
jQuery实现dialog设置focus焦点的方法
2015/06/10 Javascript
javascript 常见功能汇总
2015/06/11 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
JS限定手机版中图片大小随分辨率自动调整的方法
2016/12/05 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
解决vant的Toast组件时提示not defined的问题
2020/11/11 Javascript
go和python调用其它程序并得到程序输出
2014/02/10 Python
python获取整个网页源码的方法
2020/08/03 Python
如何利用python之wxpy模块玩转微信
2020/08/17 Python
Python使用pycharm导入pymysql教程
2020/09/16 Python
Python txt文件如何转换成字典
2020/11/03 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
什么是反射
2012/03/17 面试题
原料仓管员岗位职责
2014/04/12 职场文书
小班下学期个人总结
2015/02/12 职场文书
2015年技术员工作总结
2015/04/10 职场文书
《月光曲》教学反思
2016/02/16 职场文书
竞聘演讲报告:基本写作有哪些?附开头范文
2019/10/16 职场文书
排查Tomcat进程假死的问题
2022/05/06 Servers