Question

我有两个组件，我需要在两个组件中显示相同的数据。我的服务：

????????

我使用promises，因为export default class Logs { constructor($http, $q, httpService) { this.$http = $http; this.$q = $q; this.$rootScope = $rootScope; this.httpService = httpService; this.logs = null; this.getDefer = this.$q.defer(); this.loadData(); } loadData() { var request = {url: '/logs'}; this.httpService.getJson(request) .then((response) => { this.logs = response.data; this.getDefer.resolve(this.logs); }) .catch((err) => { this.getDefer.reject(err); }); return this.getDefer.promise; } getLogs() { return this.getDefer.promise; } create(newLog) { return this.$http.post('http://localhost:9000/api/logs', newLog); } } // this is example of using service in component this.logService.getLogs().then((result) => { this.logs = result; });在几个组件中使用，并帮助我避免在应用程序启动时出现双重请求。但现在，我想知道，如何在更新或创建后调用getLogs来获取新数据？

Answer 1

你做错了。你应该从getLogs返回promise。

像：

getLogs() {

    if(this.getDefer) return this.getDefer.promise;
    this.getDefer = $q.defer();
    loadData().then(function(data){
        this.getDefer.resolve(data);
        delete this.getDefer;
    });
    return this.getDefer.promise;

}

和loadData：

loadData() {
    if(this.logs) return $q.when(this.logs); //<-- return cached if exist
    var request = {url: '/logs'};
    return this.httpService.getJson(request)
        .then((response) => {
            this.logs = response.data;
            return response.data;
        });
}

所以loadData是私有方法，它异步返回数据，也许缓存它，getLogs应该是检索这些数据的入口点。所以你应该在getLogs中使用defer。如果已经有对loadData的请求 - 返回promise，否则 - 创建new defer。

不幸的是，我现在无法提供Plunker，但这就是概念。：）

使用promises服务共享数据

1 个答案: