javascript - 我应该以及如何在 promise 回调中转换 transitionToRoute

Question

在 Ember Controller 中，我想调用我的 API 来创建用户，并在成功时调用 transitionToRoute。这是我目前想要的工作:

import ajax from "ic-ajax";
import Ember from "ember";

export default Ember.Controller.extend({
  actions: {  
    createAndLoginUser: function() {
      var user = { "user": this.getProperties("email", "name") };
      ajax({ url: "api/users", type: "POST", data: user })
        .then(transitionToHome);
    }   
  }
});

var transitionToHome = function() {
  this.transitionToRoute("home")
}

但是当我在方法中放置一个调试器时，this 不再是 Controller 对象并且超出了调用transitionToRoute 的范围。

我只写过 hacky javascript，但我正在努力学习核心概念和一些框架。这是使用 promise 的正确方法吗？这是 Ember 中进行过渡的正确位置吗？

Answer 1

您的问题与 Ember 或过渡无关；这都是关于 this 处理的。最简单的解决方案就是

.then(transitionToHome.bind(this));

将转换方法放在 Controller 中

您还可以考虑将 transitionToHome 作为方法放入 Controller 中。然后，您可以按以下方式调用它:

export default Ember.Controller.extend({

  transitionToHome: function() { this.transitionToRoute("home"); },

  actions: {  
    createAndLoginUser: function() {
      var self = this;
      var user = { "user": this.getProperties("email", "name") };
      ajax({ url: "api/users", type: "POST", data: user })
        .then(function() { self.transitionToHome(); });
    }   
  }

});

这可能是一种更简单的方法，更具可读性，并且不需要对 this 进行推理和使用 bind(但确实需要使用 self).

将过渡移动到路线？

在您的问题范围之外，但有人会说与路由相关的逻辑(包括转换)在逻辑上属于路由，而不是 Controller 。如果你同意，你可以重构上面的代码来做一个send

createAndLoginUser: function() {
  var user = { "user": this.getProperties("email", "name") };
  var self = this;
  ajax({ url: "api/users", type: "POST", data: user })
    .then(function() { self.send("goHome"); });
  }
}

然后在您的 route 实现goHome 操作。或者，您可以在更高级别的路由(甚至是应用程序路由)中实现 goHome，从而使其可从任何 Controller 或更低级别的路由访问。

将 AJAX 逻辑移至服务？

其他人可能会说 ajax 逻辑并不真正属于 Controller ，而应该位于服务层，所以

// services/user.js
export function createUser(data) {
  return ajax({ url: "api/users", type: "POST", data: { user: data } });
}

// controller
import { createUser } from 'app/services/user';

export default Ember.Controller.extend({
  createAndLoginUser: function() {
    var data = this.getProperties("email", "name"));
    var self = this;
    createUser(data) . then(function() { self.send("goHome"); });
  }
};

使用 ES6 语法，我们可以避免 self，简化了一些过程:

  createAndLoginUser: function() {
    var data   = this.getProperties("email", "name"));
    var goHome = () => this.send("goHome");

    createUser(data) . then(goHome);
  }

现在这段代码开始看起来更具语义性和可读性。