無法從Angular的響應數據分配數據

Question

我有一個函數，應在調用時返回對象數組。 該功能看起來像這樣

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

這會導致意外的行為，其中在成功響應塊內正確分配了data變量，但在響應塊外訪問時undefined 。

該函數被分配給類型為Todo[]的變量，並在聲明該變量時立即調用。 我對TypeScript和Angular很陌生，但對JavaScript卻不是。 我是否在函數范圍/關閉方面缺少某些內容，或者此問題與TypeScript / Angular有關？

全班看起來像這樣：

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

這是因為http調用是asynchronous 。

您需要確保僅在通話完成后才訪問數據。

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

希望這可以幫助。

Answer 2

我認為不是必須使用res.json()因為有角度的管道已經可以工作了。 您是否嘗試直接分配給變量res？

就像其他朋友說的那樣，您在做某些事情上做得不好。

首先：您必須了解異步方法

第二：使用Observables導入rxjs / Observable； 並遵循其回調流程

例

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

其他類使用此方法

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

Answer 3

http.get()是異步的，這意味着當您嘗試在then回調之外打印parcedTodos ，它將仍然是未定義的。

JS中的異步編程

Answer 4

this.http.get(whatever)是一個async調用。 您的data是undefined因為您需要在實際初始化之前訪問它。 也就是說，您正在success處理程序（ then的第一個參數）內部對其進行初始化，並且可能在初始化之前對其進行了訪問。

您需要做的就是確保success或error處理程序之后執行此操作。 使用Observable