$q服务的使用

1. 创建一个Service,去服务器读取数据:

  1. // $q 是内置服务,所以可以直接使用
  2. ngApp.factory(‘UserInfo‘, [‘$http‘, ‘$q‘, function ($http, $q) {
  3. return {
  4. query : function() {
  5. var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行
  6. $http({method: ‘GET‘, url: ‘scripts/mine.json‘}).
  7. success(function(data, status, headers, config) {
  8. deferred.resolve(data);  // 声明执行成功,即http请求数据成功,可以返回数据了
  9. }).
  10. error(function(data, status, headers, config) {
  11. deferred.reject(data);   // 声明执行失败,即服务器返回错误
  12. });
  13. return deferred.promise;   // 返回承诺,这里并不是最终数据,而是访问最终数据的API
  14. } // end query
  15. };
  16. }]);

2. 在Controller上(以同步方式)使用这个Service:

  1. angular.module(‘ngApp‘)
  2. .controller(‘MainCtrl‘, [‘$scope‘, ‘UserInfo‘, function ($scope, UserInfo) { // 引用我们定义的UserInfo服务
  3. var promise = UserInfo.query(); // 同步调用,获得承诺接口
  4. promise.then(function(data) {  // 调用承诺API获取数据 .resolve
  5. $scope.user = data;
  6. }, function(data) {  // 处理错误 .reject
  7. $scope.user = {error: ‘用户不存在!‘};
  8. });
  9. }]);
时间: 2024-07-30 13:32:40