在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

第一步

准备好api接口地址， 例如 https://api.example.com/api/

第二步

在根组件 app.components.ts 中引入 HttpClientModule 模块。

// app.components.ts
import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块
imports: [
 BrowserModule,
 AppRoutingModule,
 HttpClientModule //声明HTTP模块
],

第三步

在组件中使用HTTP模块向远程服务器请求数据

1.引入HTTP模块

// list.components.ts
import { HttpClient } from "@angular/common/http" //这里是HttpClient

2.在组件的构造函数中实例化 HttpClient

constructor(private http:HttpClient){}

3.创建用来接收数据的变量

public anyList:any

4.通过HTTP的get方法请求数据

ngOnInit() { //这个是初始化
 this.http.get("https://api.example.com/api/list")
   .subscribe(res=>{ this.anyList = res })
}
// get方法中接收的是一个接口文件的地址，它会接收接口传递过来的数据，并默认处理为json数据。
// subscribe方法是对get接收的数据进行处理。参数 res 就是接收过来的数据对象。然后把 res 对象赋值给anyList变量。

5：前台输出

// list.component.html

<ul *ngFor="let v of anyList"> 循环输出anyList对象数据
 <a routerLink="/post/{{v.id}}"> 这里的routerLink是angular的a链接形式
  <img src="{{v.thumb}}" alt=""> 这里的v.thumb是调用anyList对象的每条数据的thumb缩略图
  <h3>{{v.name}}</h3>
 </a>
</ul>

打开前台页面，就可以看到输出的数据信息了。

总结

以上所述是小编给大家介绍的在 Angular6 中使用 HTTP 请求服务端数据的步骤详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • angularjs请求数据的方法示例

    在 app.module.ts 中引入 HttpClientModule 并注入 import {HttpClientModule} from '@angular/common/http'; imports: [ BrowserModule, HttpClientModule ] Angular get 请求数据 在用到的地方引入 HttpClient 并在构造函数声明 import {HttpClient} from "@angular/common/http"; construct

  • Angular 数据请求的实现方法

    使用 Angular 请求数据的时候,需要引入 HttpModule 模块,如果使用的 jsonp 模式的话,则需要另外引入 JsonpModule 模块 import { HttpModule, JsonpModule } from '@angular/http' 然后在当前模块中的 imports 内进行注册 imports: [ HttpModule, JsonpModule ], 注册以后就可以在组件文件当中引入相对应的方法来进行数据请求了 import { Http, Jsonp }

  • 在 Angular6 中使用 HTTP 请求服务端数据的步骤详解

    第一步 准备好api接口地址, 例如 https://api.example.com/api/ 第二步 在根组件 app.components.ts 中引入 HttpClientModule 模块. // app.components.ts import {HttpClientModule} from "@angular/common/http"; //引入HttpClientModule 模块 imports: [ BrowserModule, AppRoutingModule, H

  • SpringBoot服务端数据校验过程详解

    这篇文章主要介绍了SpringBoot服务端数据校验过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 对于任何一个应用而言,客户端做的数据有效性验证都不是安全有效的,而数据验证又是一个企业级项目架构上最为基础的功能模块,这时候就要求我们在服务端接收到数据的时候也对数据的有效性进行验证.为什么这么说呢?往往我们在编写程序的时候都会感觉后台的验证无关紧要,毕竟客户端已经做过验证了,后端没必要在浪费资源对数据进行验证了,但恰恰是这种思维最为容易

  • 详解AngularJs中$resource和restfu服务端数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 安装 ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js <script type="text/javascript" src="/javascripts/angular-resource.js"> $resource应用 我们并不是直接通过$resource服务本身同服务器通信,$resource是一个

  • vue服务端渲染缓存应用详解

    服务端渲染简介 服务端渲染不是一个新的技术:在 Web 最初的时候,页面就是通过服务端渲染来返回的,用 PHP 来说,通常是使用 Smarty 等模板写模板文件,然后 PHP 服务端框架将数据和模板渲染为页面返回,这样的服务端渲染有个缺点就是一旦要查看新的页面,就需要请求服务端,刷新页面. 但如今的前端,为了追求一些体验上的优化,通常整个渲染在浏览器端使用 JS 来完成,配合 history.pushState 等方式来做单页应用(SPA: Single-Page Application),也收

  • Redis客户端及服务端的安装教程详解

    本系列将和大家分享Redis分布式缓存,本文是该系列的开篇,主要简单介绍下Redis客户端及服务端的安装. 一.Redis简介 Redis:Remote Dictionary Server 远程字典服务器 基于内存管理(数据存在内存),实现了5种数据结构(分别应对各种具体需求),单线程模型的应用程序(单进程单线程),对外提供插入--查询--固化--集群功能. 正是因为基于内存管理所以速度快,可以用来提升性能.但是不能当数据库,不能作为数据的最终依据. 单线程多进程的模式来提供集群服务. 单线程最

  • Vue 服务端渲染SSR示例详解

    Vue 服务端渲染SSR示例详解

    目录 手写Vue服务端渲染 一.开始vue-ssr之旅 二.采用模板渲染 三.ssr目录创建 四.通过webpack实现编译vue项目 app.js client-entry.js server-entry.js 五.配置客户端打包和服务端打包 六.配置运行脚本 七.服务端配置 七.通过json配置createBundleRenderer方法 八.集成VueRouter 配置入口文件 配置组件信息 防止刷新页面不存在 保证异步路由加载完成 十.集成vuex配置 在后端更新vuex 在浏览器运行时

  • 使用Netty搭建服务端和客户端过程详解

    前言 前面我们介绍了网络一些基本的概念,虽然说这些很难吧,但是至少要做到理解吧.有了之前的基础,我们来正式揭开Netty这神秘的面纱就会简单很多. 服务端 public class PrintServer { public void bind(int port) throws Exception { EventLoopGroup bossGroup = new NioEventLoopGroup(); //1 EventLoopGroup workerGroup = new NioEventLo

  • python网络编程socket实现服务端、客户端操作详解

    本文实例讲述了python网络编程socket实现服务端.客户端操作.分享给大家供大家参考,具体如下: 本文内容: socket介绍 TCP: 服务端 客户端 UDP: 服务端 客户端 首发时间:2018-02-08 01:14 修改: 2018-03-20 :重置了布局,增加了UDP 什么是socket: socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 网络上的两个程序通过一个双向的通信连接实现数据的交换,这个连接的一端称为

  • 用PHP的socket实现客户端到服务端的通信实例详解

    用PHP的socket实现客户端到服务端的通信实例详解

    一.server.php服务端: <?php error_reporting(E_ALL); set_time_limit(0); ob_implicit_flush(); //本地IP $address = 'localhost'; //设置用111端口进行通信 $port = 111; //创建SOCKET if (($sock = socket_create(AF_INET, SOCK_STREAM, SOL_TCP)) < 0) { echo "socket创建失败原因 &q

  • ASP.NET Core中调整HTTP请求大小的几种方法详解

    一.前言 之所以称ASP.NET Core是一个Web开发平台,源于它具有一个极具扩展性的请求处理管道,我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求.ASP. NET Core应用的很多特性,比如路由.认证.会话.缓存等,也同时定制消息处理管道来实现的.我们甚至可以通过管道定制在ASP.NET Core平台上创建我们自己的Web框架,实际上MVC和SingalR这两个重要的Web框架也是采用这样的方式创建的. HTTP协议自身的特性决定了任何一个Web应用的工作方式都是监听.接收

随机推荐