javascript - ES6 (AngularJS) 服务

Question

在使用 ES6 创建服务时，我在访问 $http 等 Angular 内置服务时遇到问题。

例如，我正在创建一个“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);
}());

作为旁注，我向您的类添加了一个静态$inject“注释”。如果您不使用 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);