使用$http获取数据以供自定义服务使用

Fetch data using $http for use with a custom service

本文关键字：自定义 服务 http 获取 数据 使用      更新时间：2023-09-26

我正在尝试创建一个自定义服务，它从服务器中提取所有已定义状态的列表，以便在表单中使用，到目前为止，我有:

SimpleTaskApp.factory('storyStatus', function($http) {
    var data = null;
    var promise = $http({
            url: '/story-status/',
            method: 'GET'
        }).success(function (resp) {
            data = resp;
        });
    return {list: data }};
});

我知道这不会工作，因为$http是异步的，但是我不想多次运行请求。我想把它当作一个静态变量，所以如果storyStatus。，它应该检查它是否为空，然后尝试填充自己。

您应该使用承诺而不是违背承诺。

不需要存储数据，因为可以存储承诺。承诺的意义在于你不知道什么时候会实现。你不知道你的数据何时可用。

所以你的服务必须返回承诺。不过没关系: 
SimpleTaskApp.factory('storyStatus', function($http) {
  var promise;
  function getData() {
    if ( ! angular.isDefined( promise ) ) {
      promise = $http({
        url: '/story-status/',
        method: 'GET'
      });
    }
    return promise;
  }
  return { list: getData };
});

在此服务中，您的$http调用将只被调用一次，但每当您调用SimpleTaskApp.list()时将返回一个承诺。调用它的控制器不需要知道数据是否存在，因为它会做出相同的反应，例如:

SimpleTaskApp.controller('MainCtrl', function($scope, storyStatus) {
  storyStatus.list().then(function( data ) {
    $scope.statuses = data.statuses;
  });
});

如果已经检索到数据，then基本立即运行;如果没有，它将在数据返回时运行。控制器不需要知道storyStatus服务的内部状态。

所以承诺不仅有助于异步任务，而且还有助于保持组件的解耦，这在AngularJS中是一件大事——在其他框架中也应该如此!

你可以这样做吗?

SimpleTaskApp.factory('storyStatus', function($http) {
    var promise = $http({
        url: '/story-status/',
        method: 'GET'
    });
    return { list: promise };
});

调用代码

storyStatus.list.then(function (data) {
});

如果你只加载列表一次，你可能想考虑使用synchronous ajax调用来简化你的API。

相关文章：