2016-11-28 4 views
0

Я использую модуль angular2 HTTP для получения данных из SoundCloud API. Я знаю, как получить данные с наблюдаемыми:Angular 2 HTTP only want JSON

return this._http.get(`${API_BASE_URL}/users/${FEAT_USER_ID}/favorites?${CLIENT_ID_PARAM}`) 
    .map((res:Response) => res.json()) 
    .catch((error:any) => Observable.throw(error.json().error || 'Server error')) 

Как я могу получить это просто вернуть объект JSON без использования наблюдаемых/того, чтобы подписаться, чтобы получить данные?

+2

Когда вы говорите «без использования наблюдаемых», что вы хотите, чтобы вернуться вместо этого, учитывая что это асинхронная операция? Обещание? – GregL

ответ

1

, что вы можете сделать, это

import 'rxjs/add/operator/toPromise'; 

, а затем

return this.http.get(this.publishersUrl) 
       .toPromise() 
       .then(response => response.json().data) 
       .catch(this.handleError); 

ПРОЧТИТЕинструкцию the link, раздел: Отступайте обещания

+0

О, ничего себе. Спасибо. Я могу извлечь данные и назначить их переменной, используя .then(). Но когда я вызываю эту переменную за пределами then(), она отображается как неопределенная. Ты знаешь почему? –

+2

Сетевой вызов _asynchronous_, что означает, что он будет разрешен в какой-то неизвестной точке в будущем после запроса. Когда этот момент времени достигнут, выполняется код в функциях, переданных в '.then()', и вы можете получить доступ к возвращаемому значению. Любой код вне таких функций будет выполняться задолго до '.then()', поэтому переменная еще не имеет значения. Это похоже на вопрос: «Почему этот пустой файл с надписью« Мой сертификат смерти »в моем шкафу заполнен?». :-) – GregL

+1

Ахаха любит аналогию. Спасибо, Грег! Теперь это намного больше. –

1

Создания службы, например, посмотрите на моем пользователе обслуживание

import { Injectable } from '@angular/core'; 
import {Http, Headers} from "@angular/http"; 
import {Observable} from "rxjs"; 
import {AuthService} from "./auth.service"; 
import {User} from "./user"; 

@Injectable() 
export class UserService { 


    headers = new Headers({ 
    "Content-Type": "application/json", 
    'Authorization': this.authService.getToken(), 
    }); 

    serverUrl = "http://0.0.0.0:3000/api"; 

    constructor(private http:Http, private authService: AuthService) { 



    } 


    login(username: string, password: string): Observable<any>{ 

    let url = this.serverUrl + "/accounts/login?include=user"; 

    return this.http.post(url, {username: username, password: password}, {headers: this.headers}).map(res => res.json()).catch(err => { 

     return Observable.throw(err); 
    }) 
    } 

    register(user: User): Observable<any>{ 
    let url = this.serverUrl + "/accounts"; 
    this.headers.delete('Authorization'); 

    return this.http.post(url, user, {headers: this.headers}).map(res => res.json()).catch(err => { 

     return Observable.throw(err); 
    }); 
    } 

    logout(): Observable<any>{ 

    let url = this.serverUrl + '/accounts/logout'; 
    let data = {accessTokenID: this.authService.getToken()}; 
    return this.http.post(url, data, {headers: this.headers}).map(res => res.json()).catch(err => { 
    return Observable.throw(err); 
    }); 
    } 

} 

теперь компонента вы можете вызвать

this.userService.login(user.username, user.password).subscribe(response => { 

     console.log(response); 


    }, err => { 

     console.log(err); 
    }) 

увидеть код на GitHub: https://github.com/tabvn/angular-blog видеоурок: https://www.youtube.com/watch?v=sFpwxTdy9gQ&list=PLFaW_8zE4amNEdKZOJD3P_GeV3Hgva7RD