Sharing async data in service angular2

Question

I'm probably missing something very obvious, but what I am trying to do is share data that I get from a server asynchronously, between components.

This is what my service looks like:

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)
         ))
    }
}

Since the process is asynchronous I need to Promise the response, however the promised response returns the actual subscribe object, not the returned data.json.

This is for a profile page, it consists of nested routes, so I can't pass data to the routed components. One of the routed components is Posts, and after loading the profile, this should start fetching posts OF THE CURRENT USER IN THE SERVICE.

So this is what I need to happen:

User goes to his/her profile.
Service calls setUser('foo'), once response, show profile page.
Fetch the user's post into the Posts component using the service's getUser()

The api service looks like this:

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() }
            }
        });
    }
}

Excuse the poor question if it was, I am still learning angular2 and couldn't find a concrete solution to this online.

@GünterZöchbauer If you refer to my previous question that you answered, it's for the Profile component, after the promise, the profile component loads the profile page for the user. And then any child components can use getUser to fetch the user that the service set. — Sebastian Olsen, Apr 27 '16 at 13:32
@GünterZöchbauer http://stackoverflow.com/questions/36877226/pass-component-property-to-routedata-in-angular2/36881624?noredirect=1#comment61342558_36881624 I'm trying to implement a global service, like you said. — Sebastian Olsen, Apr 27 '16 at 13:33
See http://stackoverflow.com/a/36291681/217408 but that doesn't really answer what you need the `Promise` for. — Günter Zöchbauer, Apr 27 '16 at 13:35
@GünterZöchbauer 'Cannot find name Observable' Is there a module I have to import? — Sebastian Olsen, Apr 27 '16 at 13:58
I have that already, tried importing it and I get the same error. — Sebastian Olsen, Apr 27 '16 at 14:02
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/110394/discussion-between-sebastian-olsen-and-gunter-zochbauer). — Sebastian Olsen, Apr 27 '16 at 14:09

score 0 · Answer 1 · answered Apr 27 '16 at 13:36

If you need a promise, you could use something like this:

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);
        }
     ))
}

Otherwise you resolve the subscription and not the received data...

score 0 · Answer 2 · answered Apr 27 '16 at 13:37

If you need a Promise you can just use 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));
    }

Sharing async data in service angular2

2 Answers2