ES6 服务 (AngularJS)

Question

我在使用 ES6 创建服务时访问 Angular 内置服务（例如 $http）时遇到问题。

例如，我正在创建一个 "ResultsFinder" 服务，它将执行 AJAX 调用，然后执行一些操作。问题是我只能在构造函数上访问 $http（如果我将它作为参数传递），但不能在其他方法（例如 getResults）上访问。

查看此代码示例：

(() => {
  'use strict';

  class ResultsFinder {
    constructor($http) {}
    getResults() {
      return 'ResultsFinder';
    }
  }

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

在 getResults 内部，我无权访问 $http。为了获得访问权限，我应该做一些我觉得不对的事情：

(() => {
  'use strict';

  class ResultsFinder {
    constructor($http) {
      this.$http = $http;
    }
    getResults() {
      // Here I have access to this.$http
      return 'ResultsFinder';
    }
  }

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

任何人都可以给我一些有关处理此问题的正确方法的建议吗？

Answer 1

您需要在 getResults 方法中使用 this.$http。

(() => {
  'use strict';
      
class ResultsFinder {
 
    static $inject = ['$http'];   
    constructor($http) {
        this.$http = $http;
    }
  
    getResults() {
        return this.$http.get('/foo/bar/');
    }
}

  /**
   * @ngdoc service
   * @name itemManager.service:ResultsFinder
   *
   * @description
   *
   */
  angular
    .module('itemManager')
    .service('ResultsFinder', ResultsFinder);
}());

作为旁注，我在您的 class 中添加了静态 $inject "annotation"。如果您不使用 ngAnnotate 之类的东西，这是最佳实践。它还可以更轻松地通过仅更改 $inject 值来更改实现。

如果您是 ES5 开发人员，考虑一下这在 ES5 中的外观可能会有所帮助

ResultsFinder.$inject = ['$http'];
var ResultsFinder = function($http) {
    this.$http = $http;
}

ResultsFinder.prototype.getResults = function() {
    return this.$http.get('/foo/bar/');
}

注意

既然你使用的是 ES6，那么应该使用 ES6 模块来组织你的代码。

您在 ES6 模块中定义并导出 angular-模块：

import {module} from 'angular';

export var itemManager = module('itemManager', []);

然后导入Angular模块

import {itemManager} from '../itemManager';

class ResultsFinder {

    static $inject = ['$http'];   
    constructor($http) {
        this.$http = $http;
    }

    getResults() {
        return this.$http.get('/foo/bar/');
    }
}

itemManager.service('ResultFinder', ResultFinder);

ES6 服务 (AngularJS)

Services with ES6 (AngularJS)

javascript

web-services

angularjs

ecmascript-6

angular-services