MVC：如何在控制器的构造函数中记录模型属性的值，因为模型的属性是异步获取的？

Question

我正在尝试在我的应用程序中应用MVC设计模式。

但是，我不确定为什么Controller的构造函数中this.logActivites()的输出是undefined。不过，在加载页面后，我可以从控制台轻松地执行app.logActivities()。

是因为——出于某种原因——数据尚未提取吗？我该怎么解决？

class Model {
constructor() {
this.getActivities()
.then(json => 
this.activities = json.activities
)
}
async getActivities() {
const url = 'https://jsonplaceholder.typicode.com/todos/1'
const response = await fetch(url)
const json = await response.json()
return json
}    
}
class View {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model
this.view = view
this.logActivities()
}
logActivities() {
console.log(this.model.activities)
}              
}
app = new Controller(new Model(), new View())

Answer 1

它记录未定义的日志，因为在那个时刻它是。这里我展示了一个记录{}的例子，这样你就可以看到它是这样的

我会让你返工，例如，如果你的fetch从未像fetch("HTTPS://Iambadforever.gone/I/do/not/exist")那样返回，该怎么办

我输入了一个可能的更改

/*jshint esversion: 8 */
class Model {
constructor() {
this.getActivities()
.then(json =>
this.activities = json.activities
// possibly this?
this.logActivities();
);
}
async getActivities() {
const url = 'https://jsonplaceholder.typicode.com/todos/1';
const response = await fetch(url);
const json = await response.json();
return json;
}

logActivities() {
console.log(this.activities);
}
}
class View {
constructor() {}
}
class Controller {
constructor(model, view) {
this.model = model;
this.view = view;
//  this.logActivities();
}
}
let m = new Model();
console.log(m);
m.activities = {};
let v = new View();
console.log(v);
let app = new Controller(m, v);