javascript - 赋值后的回调函数

Question

我正在编写一个 Angular 应用程序，而 Angular 在关注点分离方面非常固执己见。

我有一个 Controller 和一个服务，我不希望我的代码破坏关注点分离。

在我的 Controller 中，我试图从一个 Web 服务获取数据，然后使用从第一个接收到的数据从所有其他 Web 服务获取数据 - 由于 JavaScript 异步特性，我想不出一个不交叉的好方法关注点分离方面的界限。

这是一个显示它的 jsfiddle:

http://jsfiddle.net/yak2m1ve/

现在请记住，我正试图找到一个不会破坏 SoC 的优雅解决方案 - 而不是让它工作的肮脏黑客。

//controller
var x = fn1();
var y = fn2(x);

alert(y);

//service
function fn1(){
    setTimeout(function(){
        return '123'; //web request example
    }, 1000);
}

function fn2(code){
    return 'asdfb' + code;
}

Answer 1

尽管 plunker 代表了普通函数调用方面的问题，但很明显您将改为进行 Web 服务调用。

在这种情况下，您需要使用 Angular Promise API .

例如，假设您应该执行以下操作序列。

1. Retrieve a movie details.

2. Retrieve it's star cast.

3. Assign the response to the Scope variable.

在您的服务中，您将拥有

    this.getMovie = function(movie) {
        return $http.get('/api/v1/movies/' + movie)
               .then(
                  function (response) {
                    return {
                       title: response.data.title,
                       cost:  response.data.price
                    });
                  });
    };

    this.starCast = function(movie) {
        return $http.get('/api/v1/movies/' + movie)
               .then(
                  function (response) {
                    return {
                       title: response.data.title,
                       cost:  response.data.price
                    });
                  });
    };

在你的 Controller 中:

    $scope.getMovie = function(movie) {
       service.getMovie(movie) 
       .then(function(movieData) {
          service.getStarCast(movieData).then(function(response) {
              $scope.starCast = response;
            });  
       });
    };