EmberJS中EmberData如何解析非默认格式的JSON数据
博客专区 > puras 的博客 > 博客详情
EmberJS中EmberData如何解析非默认格式的JSON数据
puras 发表于3年前
EmberJS中EmberData如何解析非默认格式的JSON数据
  • 发表于 3年前
  • 阅读 98
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

摘要: 通过三种方法,来解决EmberJS中EmberData如何解析非默认格式的JSON数据这个问题

背景与问题

最近在使用EmberJS做为前端MVC框架来编写前端应用,但遇到了一个问题,EmberData要求的JSON格式默认为下面这样:

{
    "user":[
        {
            "name": "puras1",
            ......
        },
        {
            "name": "puras2",
            ......
        },
        {
            "name": "puras3",
            ......
        }
    ]
}

而我们后端返回的格式却与之不同,是下面这样的格式:

{    
    "errcode": 0,
    "message": "success",
    "ret": 0,
    "data": {
        "user":[
            {
                "name": "puras1",
                ......
            },
            {
                "name": "puras2",
                ......
            },
            {
                "name": "puras3",
                ......
            }
        ]
    }
}

通过DS.RESTAdapter来读取数据的话,是无法正常工作的。
想了三种办法来解决这个问题。

解决办法

主要思路是重写RESTAdapter中的ajax方法,Ajax方法如下:

ajax: function(url, type, hash) {
    var adapter = this;

    return new Ember.RSVP.Promise(function(resolve, reject) {
      hash = adapter.ajaxOptions(url, type, hash);

      hash.success = function(json) {
        Ember.run(null, resolve, json);
      };

      hash.error = function(jqXHR, textStatus, errorThrown) {
        Ember.run(null, reject, adapter.ajaxError(jqXHR));
      };

      Ember.$.ajax(hash);
    }, "DS: RestAdapter#ajax " + type + " to " + url);
  }

方法中,如果请求成功,则会调用hash.success方法,直接把JSON串传到了Ember.run方法中。由于我们后端返回的格式不同,我们想传JSON中指定的内容到Ember.run方法中。如下面解决方法中,根据传回的JSON串结构,使用json.data来替代原来的json。

方法一:继承RESTAdapter实现自己的Adapter

自定义一个Adapter,继承RESTAdapter,重写Ajax方法:

App.MKRESTAdapter = DS.RESTAdapter.extend({
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

在使用的时候,用MKRESTAdapter来替代RESTAdapter:

//App.ApplicationAdapter = DS.RESTAdapter.extend();
// 修改成
App.ApplicationAdapter = App.MKRESTAdapter.extend();

缺点:需要多加载一个自定义的类。

方法二:通过reopen重写RESTAdapter的Ajax方法

不重新自定义Adapter,直接通过reopen来重写RESTAdapter:

DS.RESTAdapter.reopen({
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

使用方式不变。

缺点:改变了RESTAdapter默认的处理方式,而且是全局模式的,在其他地方如果使用RESTAdapter可能会受到影响。

方法三:通过reopen重写ApplicationAdapter的Ajax方法

从使用角度上来讲,App.ApplicationAdapter也是继承了RESTAdapter,只不过是EmberJS有个默认的实现而已,我们可以使用方法一中的方式,来重写ajax方法:

App.ApplicationAdapter.reopen({    
    ajax: function(url, type, hash) {
        var adapter = this;
        return new Ember.RSVP.Promise(function(resolve, reject) {
            hash = adapter.ajaxOptions(url, type, hash);

            hash.success = function(json) {
                Ember.run(null, resolve, json.data);
            };
            hash.error = function(jqXHR, textStatus, errorThrown) {
                Ember.run(null, reject, adapter.ajaxError(jqXHR));
            };

            Ember.$.ajax(hash);
        }, "DS: RESTAdapter#ajax " + type + " to " + url);
    }
});

最后选择的是方法三,又实现了需求,又没有影响RESTAdapter默认的形为。

以上!

共有 人打赏支持
粉丝 48
博文 4
码字总数 1240
×
puras
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: