AngularJS：使用异步数据初始化服务

在AngularJS中，我们可以创建服务来实现一些通用的功能或者业务逻辑。有时候，我们需要在服务初始化时从后端获取异步数据并将其存储在服务中，以便稍后在整个应用程序中使用。

本文将介绍如何使用异步数据初始化AngularJS服务，并提供示例代码。

使用 $http 服务获取异步数据

AngularJS中的 $http 服务允许我们发送HTTP请求并获取响应。我们可以使用它来从后端获取异步数据并将其存储在服务中。以下是一个简单的服务，其中包含使用 $http 获取数据的方法：

angular.module('myApp').service('myService', function($http) {
  this.getData = function() {
    return $http.get('/api/data').then(function(response) {
      return response.data;
    });
  };
});

在上面的代码中，我们定义了一个名为 myService 的服务，并添加了一个名为 getData 的方法，该方法使用 $http 获取 /api/data 的响应数据，并返回数据的 Promise。

在控制器中使用初始化的服务

一旦我们的服务已经完成了异步数据的获取和存储，我们就可以在整个应用程序中重复使用它。下面是一个控制器示例，它使用上述服务来获取数据并显示在视图中：

angular.module('myApp').controller('myController', function(myService) {
  var vm = this;
  vm.data = null;

  myService.getData().then(function(data) {
    vm.data = data;
  });
});

在上面的代码中，我们定义了一个名为 myController 的控制器，并注入了 myService。我们使用 vm.data 变量来持有服务返回的异步数据。

当控制器初始化时，我们调用 myService.getData() 方法来获取服务中的数据，并在 Promise 完成后将其存储在 vm.data 中。这样一来，我们就可以在视图中使用 vm.data 来展示服务中的异步数据了。

总结

本文介绍了如何使用 $http 服务从后端获取异步数据并将其存储在AngularJS服务中。我们还提供了一个示例控制器，演示了如何使用初始化的服务来获取异步数据并在视图中展示它。

通过本文学习，您应该能够更好地理解AngularJS中服务初始化的概念，并能够编写自己的服务以及在控制器中使用它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24993