javascript - 由接口(interface)强制执行的异步方法的顺序调用，Angular 4

Question

我有以下界面:

export interface Data {
    getText(): string;
}

两个类实现了上述接口(interface):

export class LocalStorageData implements Data {
    public getText(): string {
        return localStorage.getItem('data');
    }
}

export class HttpData implements Data {
    public constructor(private http: Http) {
    }

    public getText(): string {
        let text = '';

        this.http.get('http://server.com:3000/data').subscribe((response) => {
            text = response.toString();
        });

        return text;
    }
}

有一个类使用 LocalStorageData 和 HttpData 类:

export class Main {
    private http: Http;

    ...

    private getData(fromLocalStorage: boolean): Data {
        let data: Data;

        if (fromLocalStorage)
            data = new LocalStorageData();
        else
            data = new HttpData(this.http);

        return data;
    }

    public getText() {
        console.log(this.getData(true).getText());
        console.log(this.getData(false).getText());
    }
}

当 Main 类的 getText() 被调用时，第二个控制台日志将打印一个空字符串，因为 get() 方法来自 Http 服务是异步的。

如何使用 Http 服务的异步方法实现 Data 接口(interface)？

Answer 1

改变界面

来自

export interface Data {
    getText(): string;
}

到

export interface Data {
    getText(): Observable<string>;
}

并从本地存储返回

Observable.of(localStorage.getItem('data'))

从 HttpData 作为

export class HttpData implements Data {
    public constructor(private http: Http) {
    }

    public getText(): Observable<string> {
        let text = '';

         return this.http.get('http://server.com:3000/data').map(res => res.json());

    }
}

并按如下方式使用它

public getText() {
        this.getData(true).subscribe(test=> {
          console.log(text);
        })

        this.getData(false).subscribe(test=> {
          console.log(text);
        })
    }