我应该如何在 Ember.js 中处理来自服务器的错误？答案

【问题标题】：How should I handle an errors from server in Ember.js?我应该如何在 Ember.js 中处理来自服务器的错误？
【发布时间】：2014-11-26 08:18:53
【问题描述】：

我有一个使用 ember.js 编写的小应用程序，它使用 RESTAdapter 与 REST API 通信，并使用 ArrayController 在列表中显示元素。当我对服务器执行 POST 请求并使用代码 201（已创建）和具有 id 的模型进行响应时，新模型将显示在列表中。但是，如果服务器返回代码 409（冲突），有效负载看起来像这样

{
   'errors': ['Error description']
}

我希望该模型不会被添加到列表中，但事实并非如此。该模型仍被添加到列表中，但没有 ID。

我发现这个模型可以通过多种方式移除，但我不知道哪种方式是对的。

所以问题是：

在这种情况下（当您使用 ArrayController 和 RESTAdapter 时）处理错误的正确方法是什么？
如果服务器返回 4xx 代码，是否可以阻止模型显示在列表中？

这是我现在使用的代码：

App.Usergroup = DS.Model.extend({
    name: DS.attr('string'),
    description: DS.attr('string'),
});

App.UsergroupsListController = Ember.ArrayController.extend({
    needs: ['usergroups'],
    allUsergroups: Ember.computed.alias('controllers.usergroups'),
    itemController: 'usergroup'
});

App.UsergroupController = Ember.ObjectController.extend({
    actions: {
        removeGroup: function() {
            var group = this.get('model');
            group.deleteRecord();
            group.save();
        }
    }
});

App.UsergroupsController = Ember.ArrayController.extend({
    actions: {
        addUsergroup: function() {
            var model = this.get('model');
            var group = this.store.createRecord('usergroup', {
                name: model.name,
                description: model.description
            });
            group.save().then(function() {              
            },
            function(error){
                group.rollback();
            });
            this.transitionTo('usergroups.index');
        }
    }
});

这里是模板摘录：

<script type="text/x-handlebars" id="usergroups">
    <div class="header">
        <h1>User groups list</h1>
    </div>

    <div class="content">
        <form class="pure-form">
            <fieldset>
                {{input valueBinding="model.name" placeholder="Name"}}
                {{input valueBinding="model.description" placeholder="Description"}}
                <button type="submit" {{action 'addUsergroup'}} class="pure-button pure-button-primary">Add</button>
            </fieldset>
        </form>

        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" id="usergroups-list">
    {{#if model}}
    <table class="pure-table pure-table-striped">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {{#each}}
            <tr>
                <td>{{id}}</td>
                <td>{{name}}</td>
                <td>{{description}}</td>
                <td><button class="pure-button" {{action "removeGroup"}}><i class="fa fa-trash"></i> Remove</button></td>
            </tr>
            {{/each}}
        </tbody>
    </table>
    {{else}}
        <p>No user groups.</p>
    {{/if}}
</script>

【问题讨论】：

标签： ember.js ember-data

【解决方案1】：

Ember 提供错误路由和加载路由在此处阅读更多信息 - Ember error route

所以当 Usergroup 模型抛出错误时，Ember 会寻找 UsergroupErrorRoute 或用户组/错误模板。

你能做的就是你可以拥有

<script type="text/x-handlebars" data-template-name="usergroup/error">
{{message}}
<script>

{{message}}从路由转移到哪里

【讨论】：

【解决方案2】：

所以，我发现，错误应该在Route 中处理。

目前我的路线如下所示：

App.UsergroupsRoute = App.AuthenticatedRoute.extend({
    model: function() {
        return this.store.find('usergroup');
    },
    redirectToLogin: function(transition) {
        var loginController = this.controllerFor('login');
        loginController.set('attemptedTransition', transition);
        this.transitionTo('login');
    },
    actions: {
        error: function(reason, transition) {
            if (reason.status == 401) {
                this.redirectToLogin(transition);
            }
            else {
                alert('Something went wrong');
            }
        }
    }
});

它工作得很好，做它应该做的。但是现在我无法理解在Route 中放置错误处理的原因是什么？

【讨论】：