使用 RESTAdapter 的 Ember 模型中未填充服务器端错误

Question

在尝试处理 Ember 应用程序中的服务器端错误时，我无法在模板中显示错误，因为模型中没有填充收到的错误。

使用的版本：
Ember-cli: 2.4.3
Ember-数据：2.4.2
适配器：RESTAdapter

模板文件包含用户注册表单，如下所示：

    {{input type="text" value=username }}  
    {{#each model.errors.username as |error|}}  
         {{error.message}}  
    {{/each}}  
    {{input type="text" value=email }}  
    <button {{action 'register'}}>Register</button>

路由文件包含 'register' 保存用户的操作：

register: function(){  
    var username = this.controller.get('username');  
    var email = this.controller.get('email');  
    var user = this.store.createRecord('user',{  
            email: email,  
            username: username  
        });  
    user.save().then(function(){  
        //handle success  
     },function(error){  
       //handle error  
     });  
 });

模型看起来像：

export default Model.extend({  
    email: attr(),  
    username: attr()  
});

我正在使用的 API 状态 422 和错误响应如下所示：

{    
   "errors":[  
      {  
         "detail":"can't be blank",
         "source":{  
            "pointer": "/data/attributes/username"
         }
      }
   ]
}

根据 DS.Errors 的文档，可以通过访问错误的属性名称来获取该属性的所有错误对象的数组来显示错误。这就是我在模板文件中尝试做的事情。
我还尝试访问错误对象上的消息属性但没有成功。

{{#each model.errors.messages as |message|}}
    {{message}}
{{/each}}

当我尝试登录控制台时，出现长度属性错误，即

 user.save().then(function(){  
        //handle success  
     },function(error){  
       //handle error  
       console.log(user.get('errors.length'));
     });

它总是给我 0。但是

console.log(user.get('errors.username.length'));

提供了所需的输出，但错误在模板中仍然不可见。
尝试按照此 post 24027053 中所述覆盖 RESTAdapter 中的 ajaxError 但没有成功。
我不知道我做错了什么。请帮忙！

Answer 1

我认为错误在于：

user.save().then(function(){  
    //handle success  
 },function(error){  
   //handle error  
   console.log(user.get('errors.length'));
 });

用户没有保存，所以没有错误。试试这个：

 user.save().then(function(){  
    //handle success  
 },function(error){  
   //handle error --> how do you handle it? Are you maybe overriding the default behaviour?
   // you might want to put a 'debugger;' statement here in order to see, what the response actually looks like  
   console.log(error.errors);
 });

Answer 2

通过设置错误的模型解决了问题。看起来 DS.Errors 在填充错误后未设置模型。

现在我的注册函数如下所示：

var route = this;
user.save().then(function(){  
        //handle success  
     },function(error){  
       var errors = user.get('errors');
       route.set('_model.errors',errors);
     });

路由文件中的模型挂钩是：

_model:{},
model(){
return this.get('_model');
}

register 函数使用错误和模型挂钩填充 _model returns _model 以便它在视图中可用。

Answer 3

我不知道这是否是最好的方法，但这对我有用：

        save(model) {
        model.save()
        .then(() => {
            console.log('success');
        })
        .catch(() => {
            if (model.get('errors.messages.length') > 0) {
                model.get('errors.messages').forEach((message) => {
                    console.log(message);
                });
            } else {
                console.log('failed');
            }
        });
    }

在模板中，我可以通过

访问错误

{{#each model.errors.messages as |error|}}
  <div class="error">
    {{error}}
  </div>
{{/each}}

使用 RESTAdapter 的 Ember 模型中未填充服务器端错误

Server side errors not populated in Ember model with RESTAdapter

ember.js

ember-data

ember-cli