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 服务的更多相关文章

  1. 延迟调用或多次调用第三方的Web API服务

    当我们调用第三方的Web API服务的时候,不一定每次都是成功的.这时候,我们可能会再多尝试几次,也有可能延迟一段时间再去尝试调用服务. Task的静态方法Delay允许我们延迟执行某个Task,此方 ...

  2. 使用HttpClient对ASP.NET Web API服务实现增删改查

    本篇体验使用HttpClient对ASP.NET Web API服务实现增删改查. 创建ASP.NET Web API项目 新建项目,选择"ASP.NET MVC 4 Web应用程序&quo ...

  3. 使用HttpClient消费ASP.NET Web API服务

    本篇体验使用HttpClient消费ASP.NET Web API服务,例子比较简单. 依次点击"文件","新建","项目". 选择&quo ...

  4. 构建Web API服务

    返回总目录<一步一步使用ABP框架搭建正式项目系列教程> 构建动态Web API控制器 ABP可以自动地为应用层生成Web API 层.比如说我们之前创建的应用层: namespace N ...

  5. RESTFul Web Api 服务框架(一)

    简介: 基于 REST 的 Web 服务日益成为后端企业服务集成的首选,因为它比 SOAP 更加简单.这篇文章介绍了一 个简单的可扩展框架,使用Asp.net Web Api作为 REST 服务的实现 ...

  6. .net core自定义高性能的Web API服务网关

    网关对于服务起到一个统一控制处理的作用,也便于客户端更好的调用:通过网关可以灵活地控制服务应用接口负载,故障迁移,安全控制,监控跟踪和日志处理等.由于网关在性能和可靠性上都要求非常严格,所以针对业务需 ...

  7. VS调试web api服务

    vs2013开发web api service时,使用vs开发服务器调试没有问题,但将项目放到另一台电脑调试(vs2010),总会提示 无法再以下端口启动asp.net开发服务器 错误:通常每个套接字 ...

  8. 记录ASP.NET Web API 服务接口响应时间

    实现起来很简单,一个Filter就可以搞定!!! /// <summary> /// 监控接口执行时间 /// </summary> public class TimingAc ...

  9. Web API 2 入门——使用ASP.NET Web API和Angular.js构建单页应用程序(SPA)(谷歌翻译)

    在这篇文章中 概观 演习 概要 由网络营 下载网络营训练包 在传统的Web应用程序中,客户机(浏览器)通过请求页面启动与服务器的通信.然后,服务器处理请求,并将页面的HTML发送给客户端.在与页面的后 ...

随机推荐

  1. [ZJOI2015]地震后的幻想乡

    题目传送门 SOL:不会积分的我瑟瑟发抖. 所以我选择状压DP. 我们有以下一个dp状态: f[S][i],S表示点集,i表示这个点集向外联了i条边. 那么答案就是f[(1<<n)-1][ ...

  2. 洛谷 P1485 火枪打怪

    题目描述 LXL进入到了一片丛林,结果他发现有n只怪物排成一排站在他面前.LXL有一杆火枪能对付这些怪物.他知道从左至右数第i只怪物的血量是mi.现在LXL可以将一些子弹射向某个怪物.LXL可以控制他 ...

  3. swift 密码由6-16数字和字母组合组成

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Menlo; color: #ffffff; background-color: #282b3 ...

  4. SSM框架开发web项目系列(五) Spring集成MyBatis

    前言 在前面的MyBatis部分内容中,我们已经可以独立的基于MyBatis构建一个数据库访问层应用,但是在实际的项目开发中,我们的程序不会这么简单,层次也更加复杂,除了这里说到的持久层,还有业务逻辑 ...

  5. 《深入理解Java虚拟机:JVM高级属性与最佳实践》读书笔记(更新中)

    第一章:走进Java 概述 Java技术体系 Java发展史 Java虚拟机发展史 1996年 JDK1.0,出现Sun Classic VM HotSpot VM, 它是 Sun JDK 和 Ope ...

  6. 漫话JavaScript与异步·第三话——Generator:化异步为同步

    一.Promise并非完美 我在上一话中介绍了Promise,这种模式增强了事件订阅机制,很好地解决了控制反转带来的信任问题.硬编码回调执行顺序造成的"回调金字塔"问题,无疑大大提 ...

  7. python-集合内置函数详解

        集合(S).方法名 等价符号 方法说明 s.issubset(t) s<=t 子集测试(允许不严格意义上的子集):s中所有的元素都是t的成员   s<t 子集测试(严格意义上的子集 ...

  8. Android简易记事本

    此次做的Android简易记事本的存储方式使用了SQLite数据库,然后界面的实现比较简单,但是,具有增删改查的基本功能,这里可以看一下效果图,如下: 具体操作就是长按可以删除操作,点击可以进行修改, ...

  9. VFS四大对象之三 struct dentry

    继上一篇文章介绍了inode结构体:继续介绍目录项dentry: http://www.cnblogs.com/linhaostudy/p/7427794.html 三.dentry结构体 目录项:目 ...

  10. FileSaver.js 介绍

    这是著名开源项目 FileSaver.js 的 README.md,我把它翻译成中文.发出来,方便自己和他人阅读. 项目地址:https://github.com/eligrey/FileSaver. ...