浅谈Angular HttpClient简单入门

现代浏览器支持使用两种不同的 API 发起 HTTP 请求：XMLHttpRequest 接口和 fetch() API。

@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。

一、准备工作

首先在app.module.ts 导入 HttpClientModule。如下：

import { HttpClientModule } from '@angular/common/http';
@NgModule({
 imports: [
  HttpClientModule,
 ]
})
export class AppModule {}

二、在需要引用HttpClient的service.ts中引入HttpClient，如下：

import { HttpClient } from '@angular/common/http';
export class ConfigService {
 constructor(private http: HttpClient) { }
}

三、请求数据

return this.http.get/post(url:'请求地址' ,
  options: {
   headers: this.headers
  })
   .toPromise()
   .then((data: any) => {
    return data;
   })
   .catch((err) => {
    console.log(err);
   });
 }

四、在对应的component.ts文件中引入service

数据格式：

{
  "lists":[
    {"title":"","pic":""},
    {"title":"","pic":""}
  ]
}

五、页面上调用

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

您可能感兴趣的文章:

  • angular5 httpclient的示例实战
  • 详解使用angular的HttpClient搭配rxjs
  • 激动人心的 Angular HttpClient的源码解析
赞 (0)

相关推荐

  • 激动人心的 Angular HttpClient的源码解析

    Angular 4.3.0-rc.0版本已经发布

  • 详解使用angular的HttpClient搭配rxjs

    详解使用angular的HttpClient搭配rxjs

    一.原Http使用总结 使用方法 1.在根模块或核心模块引入HttpModule 即在AppModule或CoreModule中引入HttpModule: import { HttpModule } from '@angular/http'; @NgModule({ import: [ HttpModule ] // ... }) AppModule {} 2.在使用的地方注入Http服务 import { Http } from '@angular/http'; // ... construc

  • 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

  • 浅谈Angular HttpClient简单入门

    现代浏览器支持使用两种不同的 API 发起 HTTP 请求:XMLHttpRequest 接口和 fetch() API. @angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能. 一.准备工作 首先在app.module.ts 导入 HttpClientModule.如下: import { HttpClientModule } from '@angular/common/http'; @NgM

  • 浅谈Angular中ngModel的$render

    浅谈Angular中ngModel的$render

    在我开始着手ngModel的领域时候,有一个问题很令我纠结,那就是$render()到底是做什么的呢?查了很多资料都只是简单的描述一下,这就令我很纠结了,终于在一个阳光明媚的晚上,我终于解决了这个大问题 那么这个$render方法到底是干什么的呢?他的用处就是在$viewValue改变的时候可以重新绑定model数据,但是我们要注意一点($viewValue和DOM节点的value是不同的),我觉得他们的区别有点类似setTimeout和$timeout的区别,但是又不太一样.ps:其实mode

  • 浅谈Angular的12个经典问题

    浅谈Angular的12个经典问题

    1. 请解释Angular 2应用程序的生命周期hooks是什么? Angular 2组件/指令具有生命周期事件,是由@angular/core管理的.@angular/core会创建组件,渲染它,创建并呈现它的后代.当@angular/core的数据绑定属性更改时,处理就会更改,在从DOM中删除其模板之前,就会销毁掉它.Angular提供了一组生命周期hooks(特殊事件),可以被分接到生命周期中,并在需要时执行操作.构造函数会在所有生命周期事件之前执行.每个接口都有一个前缀为ng的hook方

  • 浅谈angular懒加载的一些坑

    浅谈angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包压缩到一个文件中,在页面初次访问的时候加载,造成页面初始载入缓慢,在此基础上,提出按需加载,即只有当用户访问某个模块的时候,该模块的脚本才会加载. 工具类: 项目使用grunt打包根据AMD规范,使用grunt-contrib-requirejs来压缩合并模块,同时用ocLazyLoad来完成ang

  • 浅谈angular表单提交中ng-submit的默认使用方法

    在表单提交的时候,我使用了一个button,但ng-submit写在form标签中,然而button中我未使用任何方法访问submit()函数 <div ng-app="dkr"> <div ng-controller="logincontrol"> <form ng-submit="submit(user)"> <div>账号名 <input type="text" ng

  • 浅谈Angular路由复用策略

    一.引言 路由在执行过程中对组件无状态操作,即路由离退时组件状态也一并被删除:当然在绝大多数场景下这是合理的. 但有时一些特殊需求会让人半死亡状态,当然这一切都是为了用户体验:一种非常常见场景,在移动端中用户通过关键词搜索商品,而死不死的这样的列表通常都会是自动下一页动作,此时用户好不容易滚动到第二页并找到想要看的商品时,路由至商品详情页,然后一个后退--用户懵逼了. Angular路由与组件一开始就透过 RouterModule.forRoot 形成一种关系,当路由命中时利用Component

  • 浅谈Angular路由守卫

    浅谈Angular路由守卫

    引言 在企业应用中权限.复杂页多路由数据处理.进入与离开路由数据处理这些是非常常见的需求. 当希望用户离开一个正常编辑页时,要中断并提醒用户是否真的要离开时,如果在Angular中应该怎么做呢? 其实Angular路由守卫属性可以帮我们做更多有意义的事,而且非常简单. 什么是路由守卫? Angular 的 Route 路由参数中除了熟悉的 path.component 外,还包括四种是否允许路由激活与离开的属性. canActivate 控制是否允许进入路由. canActivateChild

  • 浅谈Angular.js中使用$watch监听模型变化

    $watch简单使用 $watch是一个scope函数,用于监听模型变化,当你的模型部分发生变化时它会通知你. $watch(watchExpression, listener, objectEquality); 每个参数的说明如下: watchExpression:监听的对象,它可以是一个angular表达式如'name',或函数如function(){return $scope.name}. listener:当watchExpression变化时会被调用的函数或者表达式,它接收3个参数:n

  • 浅谈C#多线程简单例子讲解

    .NET将关于多线程的功能定义在System.Threading名字空间中.因此,要使用多线程,必须先声明引用此名字空间(using System.Threading;). a.启动线程 顾名思义,"启动线程"就是新建并启动一个线程的意思,如下代码可实现: Thread thread1 = new Thread(new ThreadStart( Count)); 其中的 Count 是将要被新线程执行的函数. b.杀死线程 "杀死线程"就是将一线程斩草除根,为了不白

  • 浅谈Angular文字折叠展开组件的原理分析

    浅谈Angular文字折叠展开组件的原理分析

    自己写了个Angular的文字折叠组件,这种组件其实很多地方都能用到效果如下 展开后的效果 折叠后的效果 先放全部代码,使用的时候只需要把自己需要展现的文字{{designer.des}}替换成自己所在路由器所需要绑定的数据即可 .directive('textfold', function() { return { restrict: 'EA', template: '<p style="font-size: 14px; border-left:5px solid #dddddd; pa

随机推荐