Angular 2 HTTP Requests with Promise
第一步:模拟restful api,还是以英雄列表为例。(我用的是node+express模拟,禁用同源策略)没什么好说的直接上代码。
var express = require('express');
var app = express();
//设置跨域访问式一
app.all('*', function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
app.get('/heroes', function (req, res) {
//res.header("Access-Control-Allow-Origin", "*"); //设置跨域访问方式二
var ret_obj = [{ "id": 1, "name": "Jackie Chan" }, { "id": 2, "name": "Jet Li" }];
res.end(JSON.stringify(ret_obj));
})
var server = app.listen(8081, function () {
var host = server.address().address
var port = server.address().port
console.log("应用实例,访问地址为ַ:http://%s:%s", host, port)
})
chrome中测试下,结果见下图。
第二步:定义英雄结构(hero.ts)
export class Hero {
id: number;
name: string;
constructor(_id: number, _name: string) {
this.id = _id;
this.name = _name;
}
}
第三步:编写英雄服务(hero.service.ts)
import { Injectable } from '@angular/core';
import { Http } from "@angular/http";
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/toPromise';
import { Hero } from './hero'
@Injectable()
export class HeroService {
heroesUrl = "http://localhost:8081/heroes";
constructor(private http: Http) { }
GetHeores(): Promise<Hero[]> {
return this.http.get(this.heroesUrl)
.toPromise()
.then(response => { console.log("Get the heroes from the server side succeeded!"); return response.json() as Hero[] })
.catch(this.handleError);
}
private handleError(error: any): Promise<any> {
console.error('An error occurred', error); // for demo purposes only
return Promise.reject(error.message || error);
}
}
第四步:组件调用(hero.service.ts)
import { Component } from '@angular/core';
import { Hero } from './hero'
import { HeroService } from './hero.service'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [HeroService]
})
export class AppComponent {
title = 'Tour of Heroes';
heroes: Hero[];
selectedHero: Hero;
constructor(private heroService: HeroService) { }
getHeroes(): void {
this.heroService
.GetHeores()
.then(heroes => { this.heroes = heroes; console.log(heroes) });
}
ngOnInit(): void {
this.getHeroes();
}
}
模板文件(app.component.html)如下:
<h1>{{title}}</h1>
<h2>My Heroes</h2>
<ul class="heroes">
<li *ngFor="let hero of heroes">
<span class="badge">{{hero.id}}</span> {{hero.name}}
</li>
</ul>
第五步:chrome中的运行效果:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥