MVC：鑒於模型的屬性是異步獲取的，如何在控制器的構造函數中記錄模型屬性的值？

Question

我正在嘗試在我的應用程序中應用 MVC 設計模式。

但是，我不確定為什么 Controller 的構造函數中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);