javascript MVC 结构，将模型映射到 rest api

Question

我正在尝试在我的 Web 应用程序中制作一个模型（MVC 中的 M），以理解这个概念。我正在努力解决以下代码中出现的异步问题：

function FruitModel(api) {
    this._api = api;
}

FruitModel.prototype = {
    getFruit: function(fruit_id) {
        $.getJSON(this._api + fruit_id, function(data){
            return data;
        });
    }
}

$(function(){
    var fruits = new FruitModel("/fruit/");
    console.log(fruits.getFruit(123))
});

我知道这是错误的，因为 console.log 会在 getJSON 完成之前发生，因为这是异步的。我应该如何设计这个来防止这个问题？

我想获取前端 MVC 的实际数据是从与我相同的 RESTapi 模型中访问它。有没有更好的解决方案，而不是像我这样在模型中这样做？

Answer 1

您可以向函数发送回调并在完成异步代码后执行它：

FruitModel.prototype = {
    getFruit: function(fruit_id,callback) {
        $.getJSON(this._api + fruit_id, function(data){
            callback(data);
        });
    }
}

$(function(){
    var fruits = new FruitModel("/fruit/");
        fruits.getFruit(123, function(data){
           console.log(data);
         });

});

Answer 2

为了避免这个问题，你可以这样做（因为 from jQuery 1.5 .getJSON 实现了 Promise 接口）

function FruitModel(api) {
    this._api = api;
}

FruitModel.prototype = {
    getFruit: function(fruit_id) {
       return $.getJSON(this._api + fruit_id);
    }
}

//Call

fruits.getFruit(123).done(function(data){
  console.log(data);
})

javascript MVC 结构，将模型映射到 rest api

javascript MVC structure, map model to rest api

javascript

rest

model-view-controller

javascript-objects