MVC: как записать значение свойства модели в конструктор контроллера, учитывая, что свойство модели выбирается асинхронно?

Question

Я пытаюсь применить шаблон проектирования MVC в моем приложении.

Однако я не уверен, почему вывод this.logActivites() в конструкторе Controller равен 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);