如何调试失败的 Ember Data JSON API save() 操作？答案

【问题标题】：How to debug a failing Ember Data JSON API save() operation?如何调试失败的 Ember Data JSON API save() 操作？
【发布时间】：2015-10-07 07:41:32
【问题描述】：

我正在使用路由中的此操作创建一个 Ember Data 对象：

    createProfile: function() {
        var profile = this.store.createRecord('profile', {
            username: 'bob',
            orientation: 'straight',
            gender: 'male',
            firstname: 'kevin',
            lastlogin: 'today'
        });
        profile.save().then(function() {
            this.transitionTo('welcome');
        });
    }

在服务器端，我处理了 POST 请求并返回如下响应：

Request URL: http://0.0.0.0/api/1/profiles
Request Method: POST
Status Code: 201 Created  <-- It has got the "Green Dot" in Ember Inspector

Response headers:
Access-Control-Allow-Headers: x-requested-with, Content-Type, origin, authorization, accept, client-security-token
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT
Access-Control-Allow-Origin: *
Access-Control-Max-Age: 1000
Connection: Keep-Alive
Content-Length: 164
Content-Type: application/vnd.api+json; charset=UTF-8
Date: Wed, 07 Oct 2015 07:17:06 GMT
Keep-Alive: timeout=5, max=100
Location: http://localhost/api/1/profiles/2
Server: waitress
access-control-allow-credentials: true

响应的正文如下所示：

{'data': {'type': 'profiles', 'attributes': {'firstname': 'kevin', 'lastlogin': 'today', 'username': 'bob', 'orientation': 'straight', 'gender': 'male'}, 'id': '2'}}

据我所知，这一切看起来都不错。我已经完成了另一个操作，成功地对这个模型类型执行了 GET 方法。我可以看到模型出现在 Ember Data 面板下的 Ember Inspector 中，并看到它被正确地赋予了 2 的 ID。

但是当服务器返回响应时，错误消息是：

createProfile/<@http://localhost/assets/emberpd.js:324:6
tryCatch@http://localhost/assets/vendor.js:60951:14
invokeCallback@http://localhost/assets/vendor.js:60966:15
publish@http://localhost/assets/vendor.js:60934:9
@http://localhost/assets/vendor.js:40181:7
Queue.prototype.invoke@http://localhost/assets/vendor.js:11532:9
Queue.prototype.flush@http://localhost/assets/vendor.js:11596:11
DeferredActionQueues.prototype.flush@http://localhost/assets/vendor.js:11392:11
Backburner.prototype.end@http://localhost/assets/vendor.js:10720:9
Backburner.prototype.run@http://localhost/assets/vendor.js:10842:13
run@http://localhost/assets/vendor.js:29679:12
ember$data$lib$adapters$rest$adapter$$RESTAdapter<.ajax/</hash.success@http://localhost/assets/vendor.js:66323:15
jQuery.Callbacks/fire@http://localhost/assets/vendor.js:3350:10
jQuery.Callbacks/self.fireWith@http://localhost/assets/vendor.js:3462:7
done@http://localhost/assets/vendor.js:9516:5
.send/callback@http://localhost/assets/vendor.js:9920:8

在这一点上，我觉得很困。我正在使用 Ember 2.0.2 和 Ember Data 2.0.1。

知道我是否缺少明显的东西吗？

我在 .then() 函数中做错了吗？或者这是一个 Ember 数据问题？知道我从哪里开始调试这种错误吗？

【问题讨论】：

有errors 数组吗？你能把Ember.Logger.log(error)撒在你的路由或应用程序路由的error()钩子里吗？如果您只是 POST 将 JSON 直接发送到服务器会怎样？（我认为这可以正常工作？）
错误信息是否完整？它通常有一个描述问题的标题...
profile.save().then(() => this.transitionTo('welcome')).catch(console.log.bind(console)); 你在控制台里得到什么了吗？
我认为你的问题是this.transitionTo('welcome');，因为你没有通过this

标签： ember.js ember-data

【解决方案1】：

您的承诺中的this 与您期望的this 具有不同的范围。您可以将其重写如下（在处理承诺之前将_this 设置为this）：

createProfile: function() {
  var profile = this.store.createRecord('profile', {
    username: 'bob',
    orientation: 'straight',
    gender: 'male',
    firstname: 'kevin',
    lastlogin: 'today'
  });

  var _this = this;
  profile.save().then(function() {
    _this.transitionTo('welcome');
  });
}

在 ES6 中，您可以重写它以避免设置 _this：

createProfile() {
  const profile = this.store.createRecord('profile', {
    username: 'bob',
    orientation: 'straight',
    gender: 'male',
    firstname: 'kevin',
    lastlogin: 'today'
  });

  profile.save().then(() => {
    this.transitionTo('welcome');
  });
}

【讨论】：

太棒了，这解决了问题。现在我回到了正轨（需要阅读更多关于范围和承诺的信息）。谢谢！

【解决方案2】：

我建议它无法解析来自对 POST 请求的响应的有效负载。和 GET 请求的结构一样吗？

无论如何，如果我是你，我会在 handleResponse 方法中设置一个断点，然后逐步解析有效负载以找出问题所在。

【讨论】：