Данные Angular HttpClient не определены вне подписки

У меня возникли проблемы с настройкой простого запроса GET с REST API.

В демонстрационных целях я использовал эту конечную точку REST: https://jsonplaceholder.typicode.com/posts/1

Кажется, что все полученные данные теряются при выходе из области действия метода subscribe. Я следовал нескольким руководствам, в которых также говорилось, что я получу ошибку при доступе к атрибутам без приведения типов, но у меня это работает нормально. Почему это так?

import { Injectable } from '@angular/core';
import { HttpClient  } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';

import * as _ from 'lodash';    

@Injectable()
export class TestService {

    constructor(private http : HttpClient ) { }

    private URI = 'https://jsonplaceholder.typicode.com/posts/1';
    o : object;
    //Object { userId: 1, id: 1, title: "sunt aut facere repellat provident 
    //…", body: "quia et suscipit suscipit recusanda…" }

    getData(): void
    {
        this.o = this.http.get(this.URI ).subscribe();

        this.http.get<Post>(this.URI ).subscribe(response => {
            console.log(response)//shows up  
            this.o = response;
            console.log(this.o);//shows up
        } );
        console.log(this.o);//undefined
     } 
}

interface Post{
    userId: number;
    id : number;
    title : string;
    body : string;
}

Снимок экрана консоли


angular get rest httpclient undefined
person Plagueis    schedule 14.11.2017    source источник
comment
Вы понимаете, что получаете данные асинхронно?   -  person yurzui    schedule 14.11.2017
comment
какая польза от этой строки this.o = this.http.get(this.URI ).subscribe();?   -  person Hareesh    schedule 14.11.2017
comment
Эту строку можно стереть. Должно быть так.o = ответ; как в теле подписки ниже. Что указывает на то, что я этого не понимаю.   -  person Plagueis    schedule 14.11.2017

Ответы (1)


arrow_upward
1
arrow_downward

Обновление 1:

ngOnInit() {
  this.thingService.getThingsGoing()
  .subscribe(data => this.success(data), err => this.failed(err));
}

success(data){
  console.log(data); // <== Use it here
}

failed(err){
  console.log(err);
}

Во-первых, вы используете его неправильно. Вы делаете 2 запроса по одному и тому же URL.

this.o = this.http.get(this.URI ).subscribe();   // <==== Request 1 / No need        
    this.http.get<Post>(this.URI ).subscribe(response => {    
        console.log(response)//shows up  
        this.o = response;
        console.log(this.o);//shows up        
    } );   // <==== Request 2
    console.log(this.o);//undefined

Вы делаете асинхронный вызов, this.o будет undefined, потому что приложение еще не получило данные.

Когда вы пишете это в subscribe(), оно будет отображаться, когда клиент получит фактические данные.

person Sangwin Gawande    schedule 14.11.2017
comment
На самом деле я написал это в подписке, а также. Я борюсь с тем, как получить доступ к полученным данным снаружи от подписки. Также, когда я добавляю возвращаемое значение в метод и вызываю этот метод в другом компоненте, я также получаю неопределенность. - person Plagueis; 14.11.2017
comment
О, я обновил ответ в этом сценарии. - person Sangwin Gawande; 14.11.2017