在angular 2中使用async/await函数
在angular 2中使用async/await函数
提问于 2017-07-01 22:32:30
我正在尝试弄清楚如何在我的angular类中使用async/await。我有一个从api获取帖子的PostService，但它依赖于AreaService，以便PostService知道从哪个区域获取帖子。我不太明白如何告诉我的angular类PostService等待来自我的AreaService的数据。来自AreaService的正确响应应该是字符串"fun“。然后，PostService将在this.areas数组中使用这个有趣的字符串来向用户显示来自当前选定区域的帖子。当前错误是:未捕获(in promise)：Error: Error in :0:0 selected by: Cannot read property 'name‘of undefined
邮寄服务
import { Injectable, OnDestroy } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable} from 'rxjs';
import 'rxjs/add/operator/map';
import { AuthenticationService, AreaService, MessageService} from './index';
import { Post, Area} from '../_models/index';
@Injectable()
export class PostService {
areas: Area[] = [];
constructor(
private http: Http,
private authenticationService: AuthenticationService,
private areaService: AreaService,
private messageService: MessageService
) {
}
getPosts(): Observable<Post[]> {
this.areaService.getAreas().subscribe(area => { this.areas = area;});
// add authorization header with jwt token
let headers = new Headers();
headers.append('Authorization','token ' + this.authenticationService.token);
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({
headers: headers
});
// get posts from api
return this.http.get('http://localhost:8000/areas/'+ this.areas[0].name +'/', options)
.map((response: Response) => response.json());
}
}区域服务
import { Injectable } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';
import { Observable, Subject } from 'rxjs';
import 'rxjs/add/operator/map';
import { AuthenticationService, MessageService } from './index';
import { Area } from '../_models/index';
@Injectable()
export class AreaService {
public areas: Observable<Area[]> ;
subject:Subject<Area[]> = new Subject();
public currentArea: string = "fun";
constructor(
private http: Http,
private authenticationService: AuthenticationService,
private messageService: MessageService) {
}
getAreas(): Observable<Area[]> {
// add authorization header with jwt token
let headers = new Headers();
headers.append('Authorization','token ' + this.authenticationService.token);
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({
headers: headers
});
// get areas from api
return this.http.get('http://localhost:8000/areas/', options)
.map((response: Response) => response.json());
// this.areas = response.json();
// console.log("h");
// this.messageService.sendMessage(this.areas[0].name);
//this.messageService.sendMessage(this.areas[0].name);
}
}area.ts
import { Injectable } from '@angular/core';
@Injectable()
export class Area{
name:string;
currentArea:number = 1;
constructor(name:string) {
this.name = name;
}
public static createEmptyrea():Area{
return new Area("");
}
setArea(val:number) {
this.currentArea = val;
}
}来自/areas/的传入json
[
{
"name": "fun"
},
{
"name": "information"
}
]回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-02 00:00:59
如果您使用的是可观察对象，则不需要async/await。对于rxjs@5，需要使用mergeMap运算符；对于rxjs@4，需要使用flatMap
getPosts(): Observable<Post[]> {
// subscribe until the area is available
return this.areaService.getAreas().mergeMap(area => {
// add authorization header with jwt token
let headers = new Headers();
headers.append('Authorization', 'token ' + this.authenticationService.token);
headers.append('Content-Type', 'application/json');
let options = new RequestOptions({
headers: headers
});
// use the area to get the response
return this.http.get('http://localhost:8000/areas/' + area.name + '/', options)
.map((response: Response) => response.json());
});
}Stack Overflow用户
发布于 2017-07-02 00:02:54
您可以使用flatMap或mergeMap
getPost(): Observable<Post[]> {
return this.http.get('http://localhost:8000/areas/', options)
.map((res: any) => res.json())
.flatMap((area: any) => {
return this.http.get('http://localhost:8000/areas/'+ area[0].name +'/', options)
.map((response: Response) => response.json());
.map((res: any) => res.json());
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44862073
复制相关文章
相似问题
腾讯云开发者
