Question

我有一个Angular 5应用程序，我必须调用一些繁重的REST服务（通常需要几秒钟）。我需要在应用程序的不同部分使用它的结果，所以我想将结果存储在DataStorageService中。基本上，这是我想实现的：

@Injectable()
export class DataStorageService {

private result: MyCustomObject;

constructor(private service: Service) {}

getResult(): MyCustomObject {
    if (typeof this.result === 'undefined') {
        // save result
    }
    return result;
}

问题是如何等待HTTP请求完成后再保存并返回结果＆＃39;宾语。我试图用Promise和Observable来解决它，但是没有一个能正常工作。

可观察：

if (typeof this.result === 'undefined') {
    this.service.call()
        .subscribe(response => this.result = response);
}
return this.result;  // wait for save and return MyCustomObject

无极：

if (typeof this.result === 'undefined') {
    this.service.call()
        .toPromise()
        .then(response => this.result = response);
}
return this.result;  // wait for save and return MyCustomObject

Answer 1

尝试使用await/async

async getResult(): Promise<MyCustomObject> {
    if (typeof this.result === 'undefined') 
    {
        // save result
        this.result = await this.service.call()
        .toPromise()
        .then(resp =>resp as MyCustomObject);//Do you own cast here

    }
    return this.result;
}

Answer 2

我对David的回应表示赞同，但我认为可能存在设计缺陷。实际上，您不应该将结果保存在getResult函数中。这是一个副作用，在某些情况下可能是不可取的，如果您只想不保存就可以使getResult难以重用。

如果您要刷新数据，那么拥有this.result === 'undefined'也可能会造成问题。

因此，如果您想在ngOnInit中获得这些结果，可以这样做：

ngOnInit() {
    if (typeof this.result === 'undefined') {
        this.getResult().then(result => {
            // save the result here
            this.result = result;

            // save in local storage ...
        });
    }
}

getResult(): Promise<MyCustomObject> {
    return this.service.call().toPromise();
}

请注意，您无法在ngOnInit中等待。但是现在，您的getResult()函数可在许多其他情况下重用。

Answer 3

问题是我如何等待HTTP请求完成后再保存并返回＆＃39; re SULT＆＃39;对象

//服务中的代码：

ServiceMethod:Observabke<any>(){ if (typeof this.result === 'undefined') { return this.service.call().map(res=>res); }

//这是组件中的代码。

componentMethod(){ return this.service.ServiceMethod() .subscribe(response => { this.result = response; }, ()=>//handle error, () => // call completed { return this.result; // Subscriber}); } return this.weeklyPlayer; // MyCustomObject (This return won't wait for http to get completed. Not sure why you want multiple returns.) }

希望这有帮助。

Angular 5同步HTTP调用

3 个答案: