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。如何使用HttpService.getNames()中的NameController？

更新

有些人评论说要解决这个承诺。

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

有效。但是，我仍然编写100+函数来解决这个问题。

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

Answer 1

我将尝试总结讨论以及一些可以删除重复的方法：

首先，您的第二种方法是重新使用控制器中的功能的正确方向。

经典方法是：

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');
...

如何干掉http成功和错误功能？

1 个答案: