如何在同一 class 中将变量从一种方法传递到另一种方法

Question

我正在尝试在 JS 中创建模块化代码，但在将具有值的变量传递给同一 class 中的另一个方法时遇到问题。我现在看到的结果是 ''。请帮忙！

class foodApp {
  
  constructor() {
     this.getjsondata = ''
  }
  

  fetchData() {
      return fetch("https://jsonplaceholder.typicode.com/users")
        .then(response => response.json())
        .then(data => {
            const result = JSON.stringify(data);
            this.getjsondata = result;
      })
  }
  
 displayHTML() {
    return console.log(this.getjsondata)
  }

}

new foodApp().displayHTML();

Answer 1

fetchData 是一个异步函数，它将 return 一个承诺。你必须处理承诺。

试试下面的代码。

class FoodApp {
  constructor() {
    this.getjsondata = "";
  }

  fetchData() {
    return fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(data => {
        const result = JSON.stringify(data);
        this.getjsondata = result;
      });
  }

  displayHTML() {
    return this.getjsondata;
  }
}

let foodApp = new FoodApp();

(async function() {
  await foodApp.fetchData();
  console.log(foodApp.displayHTML());
})();

Answer 2

如果您希望 fetchData 总是运行每个实例，我认为您可能会在构造函数中包含函数内容，而不是在单独的方法中。否则，当您第一次调用 displayHTML 时，获取还没有发生。

constructor() {
      fetch("https://jsonplaceholder.typicode.com/users")
        .then(response => response.json())
        .then(data => {
            const result = JSON.stringify(data);
            this.getjsondata = result;
      })
  }

如何在同一 class 中将变量从一种方法传递到另一种方法

how to pass variable from one method to another within same class

javascript

modularity

class

fetch