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

async getToken(){ try{ var token = await AsyncStorage.getItem('ACCESS_TOKEN') }catch(error){} return token; }; componentDidMount(){ var v = this.getToken() Alert.alert(v) return fetch('http://localhost/'+v); }是异步的，这意味着当您尝试在http.get()回调之外打印parcedTodos时，它仍然是未定义的。

Asynchronous programming in JS

Answer 4

this.http.get(whatever)是async电话。您的data是undefined，因为您在实际初始化之前正在访问它。即你正在success处理程序（then的第一个参数）中初始化它，并且可能在初始化之前访问它。

您需要做的就是确保在success或error处理程序之后执行此操作。使用Observable

无法从Angular

4 个答案: