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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
js tab 选项卡
Apr 26 Javascript
JS在IE和FireFox之间常用函数的区别小结
Mar 12 Javascript
javascript dom代码应用 简单的相册[firefox only]
Jun 12 Javascript
jquery 触发a链接点击事件解决方案
May 02 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
Sep 10 Javascript
微信小程序点击保存图片到本机功能
Dec 13 Javascript
JavaScript中isPrototypeOf函数
Nov 07 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 Socket配置以及实例的详细介绍
2013/06/13 PHP
PHP pthreads v3下worker和pool的使用方法示例
2020/02/21 PHP
PHP Ajax跨域问题解决方案代码实例
2020/08/01 PHP
jquery判断单个复选框是否被选中的代码
2009/09/03 Javascript
javascript 定义初始化数组函数
2009/09/07 Javascript
Jquery index()方法 获取相应元素索引值
2012/10/12 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
JS实现选项卡实例详解
2015/11/17 Javascript
jQuery Uploadify 上传插件出现Http Error 302 错误的解决办法
2015/12/12 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jquery把int类型转换成字符串类型的方法
2016/10/07 Javascript
bootstrap警告框使用方法解析
2017/01/13 Javascript
AngularJS 使用ng-repeat报错 [ngRepeat:dupes]
2017/01/19 Javascript
Angular实现跨域(搜索框的下拉列表)
2017/02/16 Javascript
js 只比较时间大小的实例
2017/10/26 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
vite2.0+vue3移动端项目实战详解
2021/03/03 Vue.js
python列表操作实例
2015/01/14 Python
python if not in 多条件判断代码
2016/09/21 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
《画家乡》教学反思
2014/04/22 职场文书
中学生英语演讲稿
2014/04/26 职场文书
后备干部培训方案
2014/05/22 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
教师师德考核自我评价
2014/09/13 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
幼儿园校车安全责任书
2015/05/08 职场文书
高二数学教学反思
2016/02/18 职场文书
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android
vue实现简易音乐播放器
2022/08/14 Vue.js