Angular HttpClient data undefined out of subscribe

2019-06-10 01:42发布

I'm having trouble with setting up simple GET query with a REST API.

For demonstration purposes I used this REST endpoint: https://jsonplaceholder.typicode.com/posts/1

It seems that all received data is lost when leaving the scope of the subscribe method. I followed multiple tutorials, that also said I would get a error when accessing attributes without typecasting, but it works fine for me. Why is that so?

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

Screenshot of the console

1条回答
我只想做你的唯一
2楼-- · 2019-06-10 02:06

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

First of all, You are using it wrong. You are making 2 requests on the same 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  

You are making async call, this.o will be undefined because application has not received the data yet.

When you write it in subscribe() it will be showed up when client receives actual data.

查看更多
登录 后发表回答