angular5 httpclient的示例实战

 更新时间:2018年03月12日 16:04:31   作者:今天来找bug  
本篇文章主要介绍了angular5 httpclient的示例实战,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

从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);
 }
}

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

相关文章

  • AngularJS 应用模块化的使用

    AngularJS 应用模块化的使用

    这篇文章主要介绍了AngularJS 应用模块化的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • 利用VS Code开发你的第一个AngularJS 2应用程序

    利用VS Code开发你的第一个AngularJS 2应用程序

    这篇文章主要给大家介绍了关于利用VS Code如何开发你的第一个AngularJS 2应用程序的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友下面来一起看看吧。
    2017-12-12
  • 对Angular.js Controller如何进行单元测试

    对Angular.js Controller如何进行单元测试

    这篇文章主要给大家介绍了如何对Angular Controller进行单页测试。如果你不太了解angular也没关系,本文也会提及关于Angular的一些知识。文中通过示例代码介绍的很详细,详细对大家的理解和学习很有帮助,下面来一起看看吧。
    2016-10-10
  • AngularJS内置指令

    AngularJS内置指令

    这篇文章主要详细介绍了AngularJS内置指令的使用方法,非常详细,常用的一些指令操作都做了总结,有需要的小伙伴参考下
    2015-02-02
  • Agularjs妙用双向数据绑定实现手风琴效果

    Agularjs妙用双向数据绑定实现手风琴效果

    最近在工作总遇到需要实现类似手风琴效果的需求,下面小编通过本文给大家分享angularjs巧用双向数据绑定实现手风琴效果,需要的朋友可以参考下
    2017-05-05
  • AngularJS 路由详解和简单实例

    AngularJS 路由详解和简单实例

    本文主要介绍AngularJS 路由,这里整理了相关资料进行详细介绍,并附实例代码和实现效果图,有需要的小伙伴可以参考下
    2016-07-07
  • angular4 如何在全局设置路由跳转动画的方法

    angular4 如何在全局设置路由跳转动画的方法

    本篇文章主要介绍了angular4 如何在全局设置路由跳转动画的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • angularjs1.5 组件内用函数向外传值的实例

    angularjs1.5 组件内用函数向外传值的实例

    今天小编就为大家分享一篇angularjs1.5 组件内用函数向外传值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • AngularJS入门教程之REST和定制服务详解

    AngularJS入门教程之REST和定制服务详解

    本文主要讲解 AngularJS REST和定制服务的知识,这里帮大家整理了相关知识,并附示例代码,详细讲解了RES和定制服务的知识,有兴趣的小伙伴可以参考下
    2016-08-08
  • AngularJS中filter的使用实例详解

    AngularJS中filter的使用实例详解

    这篇文章主要介绍了AngularJS中filter的使用实例详解的相关资料,这里提供实例帮助大家理解掌握,希望能帮助到大家,需要的朋友可以参考下
    2017-08-08

最新评论