javascript - 如何 DRY http 成功和错误函数？

Question

假设我的应用程序中有超过 100 个请求。编写尽可能多的 success 和 error 函数来处理 response 既麻烦又耗时。

目前我是这样的:

angular
  .module('mahanApp')
  .service('HttpService', function($http) {
      // Get all  name
      function getNames() {
        return $http.get('/data/names/')
      }

      return {
        getNames: getNames
      }
      .controller('NameController', function NameController(
        HttpService) {
        var ctrl = this;

        // Fetch all templates name;
        HttpService.getNames().then(
          function success(response) {
            ctrl.names = response.data;
          },
          function error(response) {});
      })
  });

如您所见，为100+ 请求编写这么多回调函数是一项非常大的工作量。我想知道是否有可能避免这样做。

有this questions这建议像下面的代码那样做。

angular
  .module('mahanApp')
  .service('HttpService', function($http) {

    var success = function(response) {
        return response.data;
      },
      error = function(error) {
        return error.data;
      };

    // Get all  name
    function getNames() {
      return $http.get('/data/names/').then(success, error)
    }

    return {
      getNames: getNames
    }
    .controller('NameController', function NameController(
      HttpService) {
      var ctrl = this;

    })
  });

在 NameController 中，我使用了 ctrl.names = HttpService.getNames()。但是 ctrl.names 是 undefined。如何在NameController中使用HttpService.getNames()？

更新:

一些人评论解决了这个 promise 。

HttpService.getNames().then(function success(result) {
  ctrl.names = result;
})

它有效。但是，我仍然编写了 100+ 函数来解决 promise。

如何避免重复 success 和 error 函数或者如果可能的话整个 then() 方法？

Answer 1

我将尝试总结讨论和一些可以消除重复的方法:

首先，您的第二种方法是在 Controller 中重用函数的正确方向。

经典的方法是这样的:

return {
  getNames: getNames
}
.controller('NameController', function NameController(
  HttpService) {
  var ctrl = this;
  HttpService.getNames().then(function(res) { ctrl.names = res; } );
})

请注意，如果您的所有调用都遵循相同的格式，您甚至可以提取更多内容，例如您可以:

// utility function that loads something into your controller
var load = function(request, ctrl, prop) {
    request.then(function(res) { ctrl[prop] = res; } 
};

// this way you can have many of requests with minimal code
load(HttpService.getNames, ctrl, 'names');
load(HttpService.getBooks, ctrl, 'books');
load(HttpService.getThings, ctrl, 'things');
...

或者，如果您可以在您的项目中使用 ES2017(例如，您的代码是转译的)，您可以简化一些新功能的使用，而无需额外的功能:

// Using promise all will assure these are all fetched asynchronously in respect to one another
Promise.all([
    async () => ctrl.names = await HttpService.getNames(),
    async () => ctrl.books = await HttpService.getBooks(),
    async () => ctrl.things = await HttpService.getThings()
]);

最后，您可能真的想要参数化您的请求，以便您只有一个:

// Get all
function getAll(what) {
  return $http.get('/data/' + what).then(success, error)
}

然后你不需要为每种类型使用不同的方法，你只需要做:

getAll('names');
getAll('books');
...