angular 4 http 之web api 服务
Angular Http是获取和保存数据的。主要是为了取到我json文件里的数据。
直接上代码吧:
1. 先介绍Promise模式的:(直接代码)
heroes.json:
1
2
3
4
5
6
7
8
|
{ "data": [ { "id": 1, "name": "Windstorm" }, { "id": 2, "name": "Bombasto" }, { "id": 3, "name": "Magneta" }, { "id": 4, "name": "Tornado" } ] } |
http肯定是要有服务的,下面先看service的代码: hero.service.promise.ts:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Headers, RequestOptions } from '@angular/http'; import 'rxjs/add/operator/toPromise'; import { Hero } from './hero'; @Injectable() export class HeroService { //注意这里的路径,找的是app文件下的heroes.json文件 private heroesUrl = 'app/heroes.json'; constructor (private http: Http) {} getHeroes (): Promise< Hero []> { console.log(this.heroesUrl); return this.http.get(this.heroesUrl) .toPromise() .then(this.extractData) .catch(this.handleError); } private extractData(res: Response) { let body = res.json(); return body.data || { }; } private handleError (error: Response | any) { let errMsg: string; if (error instanceof Response) { const body = error.json() || ''; const err = body.error || JSON.stringify(body); errMsg = `${error.status} - ${error.statusText || ''} ${err}`; } else { errMsg = error.message ? error.message : error.toString(); } console.error(errMsg); return Promise.reject(errMsg); } } |
主要是提供了一个getHeroes ()方法:
下面看hero.component.promise.ts里面怎么用呢:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import { Component, OnInit } from '@angular/core'; import { Hero } from './hero'; import { HeroService } from './hero.service.promise'; @Component({ selector: 'hero-list-promise', templateUrl: './hero-list.component.html', providers: [ HeroService ], styles: ['.error {color:red;}'] }) export class HeroListPromiseComponent implements OnInit { errorMessage: string; heroes: Hero[]; mode = 'Promise'; constructor (private heroService: HeroService) {} ngOnInit() { this.getHeroes(); } getHeroes() { this.heroService.getHeroes() .then( heroes => this.heroes = heroes, error => this.errorMessage = < any >error); } } |
当然得定义一个hero.ts类:
1
2
3
4
5
|
export class Hero { constructor( public id: number, public name: string) { } } |
接下来看一下我们的hero.compoennt.html写什么呢?
1
2
3
4
5
|
< h1 >Tour of Heroes ({{mode}})</ h1 > < h3 >Heroes:</ h3 > < ul > < li *ngFor="let hero of heroes">{{hero.name}}</ li > </ ul > |
就是这么简单。
然后我们在app.compoennt.ts里面引入我们的标签:
1
|
< hero-list-promise ></ hero-list-promise > |
现在最关键的就是在Module.ts中如何配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { HttpModule, JsonpModule } from '@angular/http'; import { AppComponent } from './app.component'; import { HeroListComponent } from './toh/hero-list.component'; import { HeroListPromiseComponent } from './toh/hero-list.component.promise'; @NgModule({ imports: [ BrowserModule, FormsModule, HttpModule, JsonpModule, ], declarations: [ AppComponent, HeroListPromiseComponent, ], bootstrap: [ AppComponent ] }) export class AppModule {} |
最简单和平常的配置,和往常一样。 2.第二种是web api形式。
有一个文件hero-data.ts(这里就不需要heroes.json文件了)
1
2
3
4
5
6
7
8
9
10
11
12
|
import { InMemoryDbService } from 'angular-in-memory-web-api'; export class HeroData implements InMemoryDbService { createDb() { let heroes = [ { id: 1, name: 'Windstorm' }, { id: 2, name: 'Bombasto' }, { id: 3, name: 'Magneta' }, { id: 4, name: 'Tornado' } ]; return {heroes}; } } |
module.ts需要这样配置:加上:
1
2
3
4
5
|
import { InMemoryWebApiModule } from 'angular-in-memory-web-api'; import { HeroData } from './hero-data'; imports:[ InMemoryWebApiModule.forRoot(HeroData); ] |
hero.service.promise.ts里面需要修改下路径就可以。这要修改服务即可,其他的代码勿改动。
1
|
private heroesUrl = 'api/heroes'; |
这里已经和heroes.json是没有任何关系了。api是指web api在module.ts里面配置的。angular-in-memory-web-api
heroes是hero-data.ts 里面return 回来的heroes。
这两种得到的结果其实是一样的。
下面说说Observable模式的: 使用都是一样的。
只是服务里的这处代码不一样:
promise模式:
1
2
3
4
5
6
7
|
getHeroes (): Promise< Hero []> { console.log(this.heroesUrl); return this.http.get(this.heroesUrl) .toPromise() .then(this.extractData) .catch(this.handleError); } |
引入的包是这几个:
1
|
import 'rxjs/add/operator/toPromise'; |
而Observable模式是这样算的:
1
2
3
4
5
|
getHeroes(): Observable< Hero []> { return this.http.get(this.heroesUrl) .map(this.extractData) .catch(this.handleError); } |
引入:
1
2
3
|
import { Observable } from 'rxjs/Observable'; import 'rxjs/add/operator/catch'; import 'rxjs/add/operator/map'; |
然后就一样了
实际证明直接取Json数据比用web api 快多了
angular 4 http 之web api 服务的更多相关文章
- 延迟调用或多次调用第三方的Web API服务
当我们调用第三方的Web API服务的时候,不一定每次都是成功的.这时候,我们可能会再多尝试几次,也有可能延迟一段时间再去尝试调用服务. Task的静态方法Delay允许我们延迟执行某个Task,此方 ...
- 使用HttpClient对ASP.NET Web API服务实现增删改查
本篇体验使用HttpClient对ASP.NET Web API服务实现增删改查. 创建ASP.NET Web API项目 新建项目,选择"ASP.NET MVC 4 Web应用程序&quo ...
- 使用HttpClient消费ASP.NET Web API服务
本篇体验使用HttpClient消费ASP.NET Web API服务,例子比较简单. 依次点击"文件","新建","项目". 选择&quo ...
- 构建Web API服务
返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 构建动态Web API控制器 ABP可以自动地为应用层生成Web API 层.比如说我们之前创建的应用层: namespace N ...
- RESTFul Web Api 服务框架(一)
简介: 基于 REST 的 Web 服务日益成为后端企业服务集成的首选,因为它比 SOAP 更加简单.这篇文章介绍了一 个简单的可扩展框架,使用Asp.net Web Api作为 REST 服务的实现 ...
- .net core自定义高性能的Web API服务网关
网关对于服务起到一个统一控制处理的作用,也便于客户端更好的调用:通过网关可以灵活地控制服务应用接口负载,故障迁移,安全控制,监控跟踪和日志处理等.由于网关在性能和可靠性上都要求非常严格,所以针对业务需 ...
- VS调试web api服务
vs2013开发web api service时,使用vs开发服务器调试没有问题,但将项目放到另一台电脑调试(vs2010),总会提示 无法再以下端口启动asp.net开发服务器 错误:通常每个套接字 ...
- 记录ASP.NET Web API 服务接口响应时间
实现起来很简单,一个Filter就可以搞定!!! /// <summary> /// 监控接口执行时间 /// </summary> public class TimingAc ...
- Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)
在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...
随机推荐
- [ZJOI2015]地震后的幻想乡
题目传送门 SOL:不会积分的我瑟瑟发抖. 所以我选择状压DP. 我们有以下一个dp状态: f[S][i],S表示点集,i表示这个点集向外联了i条边. 那么答案就是f[(1<<n)-1][ ...
- 洛谷 P1485 火枪打怪
题目描述 LXL进入到了一片丛林,结果他发现有n只怪物排成一排站在他面前.LXL有一杆火枪能对付这些怪物.他知道从左至右数第i只怪物的血量是mi.现在LXL可以将一些子弹射向某个怪物.LXL可以控制他 ...
- swift 密码由6-16数字和字母组合组成
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #ffffff; background-color: #282b3 ...
- SSM框架开发web项目系列(五) Spring集成MyBatis
前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...
- 《深入理解Java虚拟机:JVM高级属性与最佳实践》读书笔记(更新中)
第一章:走进Java 概述 Java技术体系 Java发展史 Java虚拟机发展史 1996年 JDK1.0,出现Sun Classic VM HotSpot VM, 它是 Sun JDK 和 Ope ...
- 漫话JavaScript与异步·第三话——Generator:化异步为同步
一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...
- python-集合内置函数详解
集合(S).方法名 等价符号 方法说明 s.issubset(t) s<=t 子集测试(允许不严格意义上的子集):s中所有的元素都是t的成员 s<t 子集测试(严格意义上的子集 ...
- Android简易记事本
此次做的Android简易记事本的存储方式使用了SQLite数据库,然后界面的实现比较简单,但是,具有增删改查的基本功能,这里可以看一下效果图,如下: 具体操作就是长按可以删除操作,点击可以进行修改, ...
- VFS四大对象之三 struct dentry
继上一篇文章介绍了inode结构体:继续介绍目录项dentry: http://www.cnblogs.com/linhaostudy/p/7427794.html 三.dentry结构体 目录项:目 ...
- FileSaver.js 介绍
这是著名开源项目 FileSaver.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/eligrey/FileSaver. ...