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的智能提示插件一枚
Feb 18 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
jQuery创建DOM元素实例解析
Jan 19 Javascript
javascript中Function类型详解
Apr 28 Javascript
DOM 高级编程
May 06 Javascript
Javascript通过overflow控制列表闭合与展开的方法
May 15 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
jQuery手指滑动轮播效果
Dec 22 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
浅谈vue.js导入css库(elementUi)的方法
Mar 09 Javascript
JS中数据结构之栈
Jan 01 Javascript
javascript操作元素的常见方法小结
Nov 13 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
神族 PROTOSS 概述
2020/03/14 星际争霸
php 设计模式之 单例模式
2008/12/19 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
Docker 如何布置PHP开发环境
2016/06/21 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
PHP排序算法之基数排序(Radix Sort)实例详解
2018/04/21 PHP
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
如何防止回车(enter)键提交表单
2014/05/11 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
js封装成插件的步骤方法
2017/09/11 Javascript
vue中axios处理http发送请求的示例(Post和get)
2017/10/13 Javascript
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
python使用socket连接远程服务器的方法
2015/04/29 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
python爬取w3shcool的JQuery课程并且保存到本地
2017/04/06 Python
Python使用MD5加密算法对字符串进行加密操作示例
2018/03/30 Python
java中两个byte数组实现合并的示例
2018/05/09 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
pytorch 模型可视化的例子
2019/08/17 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python实现移动木板小游戏
2020/10/09 Python
python爬虫scrapy图书分类实例讲解
2020/11/23 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
2016/10/23 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
凯普林包包西班牙官网:Kipling西班牙
2019/04/12 全球购物
高校毕业生自我鉴定
2013/10/27 职场文书
项目总经理岗位职责
2014/02/14 职场文书
人才市场接收函
2015/01/30 职场文书
党员自我评价2015
2015/03/03 职场文书
高中团支书竞选稿
2015/11/21 职场文书
怎样写好工作计划
2019/04/10 职场文书
如何做好工作总结!
2019/04/10 职场文书