无法从Angular的响应数据分配数据

Question

I have a function that should return an array of objects when called. The function looks like this

loadTodo(): Todo[]{
var data 
this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
  data = res.json()
  }, error => {
    console.log(error)
  })
  return data}

This results in unexpected behavior where data variable gets assigned correctly inside the success response block but is undefined when accessed outside the response block.

The function is assigned to a variable with type Todo[] and is invoked immediately when the variable is declared. I am quite new to TypeScript and Angular but not to JavaScript. Am I missing something with scope/closure of the function or is this issue related to TypeScript/Angular?

Whole class looks like this:

export class TodoDataService {
  API_URL: String = 'http://localhost:3000/'  
  todos: Todo[] = this.loadTodo();
  constructor(private http: Http) {
  }
  loadTodo(): Todo[]{
    this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
      this.parcedTodos = res.json()
      console.log('inside function')
      console.log(this.parcedTodos)
      }, error => {
        console.log(error)
      })
      console.log('outside function')
      console.log(this.parcedTodos)
      return this.parcedTodos
  }
}

Answer 1

It is happening because http calls are asynchronous .

You need to make sure you are accessing data only after call is completed.

export class TodoDataService {
  API_URL: String = 'http://localhost:3000/'  
  todos: Todo[] = this.loadTodo();
  constructor(private http: Http) {
  }
  loadTodo(): Todo[]{
    this.http.get(`${this.API_URL}todos`).toPromise().then(res => {
      this.parcedTodos = res.json()
      console.log('inside function')
      console.log(this.parcedTodos)
      }, error => {
        console.log(error)
      },
      {
        console.log(this.parcedTodos);
        // This is where your call gets completed. Here you can access assigned data or call another function where you can access data.
      })
      console.log('outside function')
      console.log(this.parcedTodos) // This is called before asynchronous call is completed. Thats why it is undefined yet.
      return this.parcedTodos
  }
}

Hope this helps.

Answer 2

I think that using res.json() not is neccesary because angular pipes already doing this works. Do you try to assign to variable res directly?

As others friends says, you are doing bad some things.

First: you must read about asynchronous methods

Second: use Observables importing rxjs/Observable; and follow its callbacks flow

Example

    export class TodoDataService {
  API_URL: String = 'http://localhost:3000/'  
  todos: Todo[] = this.loadTodo();
  constructor(private http: Http) {
  }
  loadTodo() : Observable<Todo[]>{
    return this.http.get(`${this.API_URL}todos`);
  }
}

And other class consummes this method

 todoDataService.loadTodo().subscribe(
        (response) => {
          console.log("Future response", response);
        }
    );

Answer 3

http.get() is asynchronous, which means that when you try to print parcedTodos outside the then callback, it will still be undefined.

Asynchronous programming in JS

Answer 4

this.http.get(whatever) is an async call. Your data is undefined because you're accessing it before it is actually initialized. ie you're initializing it inside the success handler (the first argument to then ), and probably are accessing it before initialization.

All you need to do is make sure you're doing so after the success or error handler. use Observable