📜  AngularJS-服务(1)

📅  最后修改于: 2023-12-03 15:13:24.485000             🧑  作者: Mango

AngularJS - 服务

简介

在AngularJS中,服务是用来封装业务逻辑或者是复用代码的一个好方式。它们提供了一种类似于单例的方式来共享数据和行为。在AngularJS中有很多包含了常见业务逻辑的服务,也可以自定义服务来适应特定的应用场景。

内置服务

AngularJS内置了很多常用的服务,如$http$q$timeout等等。

$http

$http服务的作用是发送HTTP请求并返回响应。请求和响应都可以很容易的进行拦截和转换。下面是一个使用$http进行GET请求的示例:

$http.get('/api/users')
  .then(function(response) {
    $scope.users = response.data;
  });
$q

$q服务提供了Promises/A+规范的实现。它是一个为异步操作提供了能力的工具,可以避免回调地狱。下面是一个使用$q实现异步操作的示例:

function fetchDataAsync() {
  var deferred = $q.defer();
  
  setTimeout(function() {
    deferred.resolve('Data fetched!');
  }, 1000)
  
  return deferred.promise;
}

fetchDataAsync().then(function(result) {
  console.log(result);
});
$timeout

$timeout服务提供了一种延迟执行的方式,和原生的setTimeout类似。下面是一个使用$timeout实现延迟执行的示例:

$timeout(function() {
  console.log('Delayed action performed!');
}, 1000);
自定义服务

可以通过module.service()或者module.factory()方法自定义服务,它们都是返回一个对象的函数。它们的区别在于,service函数使用的构造函数在每次注入时都会进行实例化,而factory函数则是在第一次注入时进行实例化。

自定义Service
angular.module('myApp', [])
  .service('myService', function() {
    this.myMethod = function() {
      console.log('Called myService method');
    }
  });
自定义Factory
angular.module('myApp', [])
  .factory('myFactory', function() {
    var myService = {};
    
    myService.myMethod = function() {
      console.log('Called myFactory method');
    };
    
    return myService;
  });

以上就是AngularJS中服务的介绍,使用内置服务和自定义服务可以更好地封装业务逻辑和复用代码。