在服务angular2中共享异步数据

时间:2016-04-27 13:29:01

标签: typescript angular

我可能遗漏了一些非常明显的东西,但我想要做的是分享我从服务器异步获取的数据,在组件之间。

这就是我的服务:

import {Injectable} from 'angular2/core';
import {ApiService} from './api.service';

@Injectable()
export class UserService {
    private user: Object

    constructor(private _api: ApiService) {}

    getUser(user) {
        return this.user
    }

    setUser(slug) {
        return Promise.resolve(this._api.GET('users/' + slug + '/?slug=true').subscribe(
            data => { this.user = data.json; return data.json; },
            (err)=>console.log(err)
         ))
    }
}

由于进程是异步的,我需要Promise响应,但是承诺的响应返回实际的subscribe对象,而不是返回的data.json

这是一个配置文件页面,它由嵌套路由组成,因此我无法将数据传递给路由组件。其中一个路由组件是帖子,加载配置文件后,应该开始提取帖子当前用户在服务中

所以这就是我需要发生的事情:

  1. 用户转到他/她的个人资料。
  2. 服务电话setUser(' foo'),一旦响应,就会显示个人资料页面。
  3. 使用服务的getUser()
  4. 将用户的帖子提取到帖子组件中

    api服务看起来像这样:

    import {Injectable} from 'angular2/core';
    import {Http, Response, RequestOptions, Headers, Request, RequestMethod} from 'angular2/http';
    import {GlobalService} from '../app.service';
    import 'rxjs/Rx';
    
    
    @Injectable()
    export class ApiService {
        constructor(private http: Http) {}
    
        apiURL = 'http://localhost:8000/api/';
        assetURL = 'http://localhost:8000/media/';
    
        GET(url) {
            var headers = new Headers(), authtoken = localStorage.getItem('authtoken');
            headers.append("Content-Type", 'application/json');
    
            if (authtoken) {
            headers.append("Authorization", 'Token ' + authtoken)
            }
            headers.append("Accept", 'application/json');
    
            var requestoptions = new RequestOptions({
                method: RequestMethod.Get,
                url: this.apiURL + url,
                headers: headers
            })
    
            return this.http.request(new Request(requestoptions))
            .map((res: Response) => {
                if (res) {
                    return { status: res.status, json: res.json() }
                }
            });
        }
    }
    

    请原谅这个可怜的问题,如果是的话,我还在学习angular2,并且无法在网上找到具体的解决方案。

2 个答案:

答案 0 :(得分:0)

如果您需要承诺,可以使用以下内容:

setUser(slug) {
    return new Promise((resolve, reject) => {
      this._api.GET('users/' + slug + '/?slug=true').subscribe(
        data => {
          this.user = data.json;
          resolve(data.json);
        },
        (err) => {
          console.log(err);
          reject(err);
        }
     ))
}

否则您解决订阅而不是收到的数据......

答案 1 :(得分:0)

如果您需要Promise,可以使用toPromise

import {toPromise} from 'rxjs/operator/toPromise'

...

   setUser(slug) {
        return this._api.GET('users/' + slug + '/?slug=true')
        .map(
            data => { this.user = data.json; return data.json; }
         )
         .toPromise()
         .catch(err)=>console.log(err));
    }