IT技术 - 为什么 Promise `.then` 方法的回调是一种反模式 - 吾爱随笔录

为什么 Promise `.then` 方法的回调是一种反模式

IT技术 javascript angularjs angular-promise anti-patterns

2021-02-02 02:57:01

我在 StackOverflow 上看到有人建议为 AngularJS 服务提供回调函数的答案。

app.controller('tokenCtrl', function($scope, tokenService) {
    tokenService.getTokens(function callbackFn(tokens) {
        $scope.tokens = tokens;
    });
});

app.factory('tokenService', function($http) {
    var getTokens = function(callbackFn) {
        $http.get('/api/tokens').then (function onFulfilled(response) {
            callbackFn(response.data);
        });
    };

    return {
        getTokens: getTokens
    };
});

这在我看来是一种反模式。该$http服务返回的Promise和具有.then方法执行回调函数感觉就像控制的不健康的反转。

一个人如何重因子这样和代码如何解释为什么原始的方式是不是一个好主意？

2个回答

你应该把它改成

var getTokens = function() {
      return $http.get('/api/tokens');
    };

然后在其他module中使用

yourModule.getTokens()
  .then(function(response) {
    // handle it
  });

至于为什么它是一种反模式，我想说的是，首先，它不允许您进一步链接成功/失败处理程序方法。其次，它处理处理从调用者module到被调用module的响应的控制（这在这里可能不是非常重要，但它仍然强加了相同的控制反转）。最后，你在你的代码库中添加了 promises 的概念，这对于一些队友来说可能不太容易理解，但是然后使用 promises 作为回调，所以这真的没有意义。

代码可以重构如下：

app.controller('tokenCtrl', function($scope, tokenService) {
    tokenService.getTokens.then ( callbackFn(tokens) {
        $scope.tokens = tokens;
    });
});

app.factory('tokenService', function($http) {
    var getTokens = function() {
        //return promise
        return $http.get('/api/tokens').then (function onFulfilled(response) {
                //return tokens
                return response.data;
            }
        );
    };

    return {
        getTokens: getTokens
    };
});

通过让服务返回一个Promise，并使用Promise的.then方法，可以实现相同的功能，并带来以下好处：

Promise可以保存并用于链接。
可以保存Promise并用于避免重复相同的$http调用。
错误信息被保留并可使用该.catch方法检索。
Promise可以转发给其他客户端。

其它你可能感兴趣的问题

上一篇箭头函数中的花括号下一篇如何将 jQuery 函数应用于具有相同 ID 的所有元素？