Async functions on Angular2

Question

I want to make functions on this service asynchronous, the last function should wait to a response of the one above it and so on. I am getting 'property subscribe does not exist on type void' on the second line of createPlaylist() and I don't know why.

Imports:

import { Injectable } from '@angular/core';
import { Http, Headers, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';

Code:

getUserId(token:string = localStorage.getItem('myToken')) {
  const url = 'https://api.spotify.com/v1/me';
  const headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  this.http.get(url, {headers : headers}).map((res: Response) => res.json())
  .subscribe(result => {
    this.currentUser = result.id;
    console.log(this.currentUser);
    return Observable.of(result);
  });
}

createPlaylist(token:string = localStorage.getItem('myToken')) {
  this.getUserId().subscribe(user => {
  const url = `https://api.spotify.com/v1/users/${this.currentUser}/playlists`;
  const headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  headers.append('Content-Type', 'application/json');
  const body = {
    'name': 'searchDDD playlist'
  };
  this.http.post(url, body, { headers } )
  .subscribe(result => {
    console.log(result.json().name);
    console.log(result.status);
    this.playlistID = result.json().id;
  });
  });
}

addSongs(token:string = localStorage.getItem('myToken')) {
  this.createPlaylist();
  const url = `https://api.spotify.com/v1/users/${this.currentUser}/playlists/${this.playlistID}/tracks`;
  const headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  headers.append('Content-Type', 'application/json');
  const body = {'uris': ['spotify:track:4iV5W9uYEdYUVa79Axb7Rh',
  'spotify:track:1301WleyT98MSxVHPZCA6M']};
  this.http.post(url, body, { headers } )
  .subscribe(result => {
    console.log(result.status);
  });
}

Suren Srapyan · Accepted Answer · 2017-11-14 06:14:40Z

2

Return from the getUserId function and remove the subscribe part. You can just one time subscribe to a Observable and put the logic inside the single subscribe or just write an intermediate logic via do function.

getUserId(token:string = localStorage.getItem('myToken')) {
  const url = 'https://api.spotify.com/v1/me';
  const headers = new Headers();
  headers.append('Authorization', 'Bearer ' + token);
  return this.http.get(url, {headers : headers})
                  .map((res: Response) => res.json())
                  .do(result => this.currentUser = result.id);
}

answered Nov 14, 2017 at 6:14

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

victor.ja Over a year ago

TSLint shows 'property do does not exist on type Observable<any>', what should I import?

Suren Srapyan Over a year ago

@victor.ja which property?

victor.ja Over a year ago

The .do property

Suren Srapyan Over a year ago

So import the do from the operators of RxJS

victor.ja Over a year ago

Should I do the same with createPlaylist() and then just subscribe to all from addSongs() ?. I mean returning and then putting the logic inside a 'do'

|

Collectives™ on Stack Overflow

Async functions on Angular2

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related