angular2 问题请教

最新推荐文章于 2025-10-21 22:12:27 发布

转载最新推荐文章于 2025-10-21 22:12:27 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiagoushi/p/6115954.html

文章标签：

#javascript #后端 #ViewUI

本文探讨了Angular2中HTTP服务的使用，包括跨域问题的处理、服务在providers中的重复添加引发的问题及解决思路，以及如何正确使用Observable和Promise。

angular2 通过http服务进行对后端api的远程调用？

我简单的尝试了一下，发现了几个问题，记录一下，以方便查找问题。

angular2 http服务的跨域问题？跨域本身就是一个很复杂的问题，angular2对跨域的处理。
angular2 如果在providers中加入http服务会出现什么问题?
promise http服务会强迫我们使用Observerable，但是我们可以转换成promise，还是遵循官方指导，学习rxjs吧。

现在我们先看第二个问题？

 1 import { NgModule } from '@angular/core';
 2 import { Http, HttpModule } from '@angular/http';
 3 import { HeroListComponent } from './hero-list.component';
 4 
 5 @NgModule({
 6     imports: [HttpModule],
 7     declarations: [HeroListComponent],
 8     providers: [Http]
 9 })
10 
11 export class HeroListModule
12 { }

我在providers中添加了http服务。如果此时我通过http获取远程url内容。

 1 import { Component } from '@angular/core';
 2 import { Http } from '@angular/http';
 3 
 4 @Component({
 5     templateUrl: './hero-list.component.html'
 6 })
 7 
 8 export class HeroListComponent {
 9     private baiduhtml: string;
10     constructor(private http: Http) {
11         this.http.get("http://localhost:8080/dashboard/datalist").toPromise().then((data) => {
12             this.baiduhtml = data.text();
13         }).catch(this.handleError);
14     }
15 
16     private handleError(error: any): Promise<any> {
17         console.error('An error occurred', error); // for demo purposes only
18         return Promise.reject(error.message || error);
19     }
20 
21 }