javascript - 当 Angular Service 将动态 URL 作为常量时，如何处理？

Question

我正在为所有 HTTP 调用编写 Angular 服务，但问题是我的 URL 是动态的，并且我正在使用 ES6 和 Babel。现在我的问题是，每当应用程序启动时，Angular 服务似乎都会为 URL 创建常量，直到我在浏览器上点击刷新并保留动态 URL 的数据后，这些常量才会刷新。代码如下:-

import angular from 'angular';

class ProgramService {
    constructor($http, chpConstants, AuthService) {
        this.$http = $http;
        this.chpConstants = chpConstants;

        /*URL's to Query */
        this.PROGRAM_CREATION = chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiURL.program_program_creation;
        this.PROGRAM_LISTING = chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiContextBase + AuthService.getRole() + chpConstants.apiURL.program_view + '/' + AuthService.getId();
        this.PROGRAM_LOAD_PROGRAM = chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiContextBase + AuthService.getRole() + chpConstants.apiURL.program_load_program;
    }

    /*Program Listing*/
    programListing() {
        var promise = null;
        if (!promise) {
            promise = this.$http.get(this.PROGRAM_LISTING).then(response => {
                return response.data;
            });
        }
        return promise;
    }

    /*List of the Participants in a Program*/
    participantListing(program_ref_number) {
        var promise = null;
        if (!promise) {
            promise = this.$http.get(this.PROGRAM_PARTICIPANT_LISTING + "/" + program_ref_number + "/0/10").then(function(response) {
                return response.data;
            });
        }
        return promise;
    };

    /*Program Load*/
    programLoad(program_ref_number) {
        var promise = null;
        if (!promise) {
            promise = this.$http.get(this.PROGRAM_LOAD_PROGRAM + "/" + program_ref_number).then(function(response) {
                return response.data;
            });
        }
        return promise;
    };

    /*Enroll Participant*/
    enrollParticipant(data) {
        var promise = null;
        if (!promise) {
            promise = $http.post(PROGRAM_ENROLL_PARTICIPANT, data).then(function(response) {
                return response.data;
            });
        }
        return promise;
    };
}

ProgramService.$inject = ['$http', 'chpConstants', 'AuthService'];

export default angular.module('services.program-service', [])
    .service('ProgramService', ProgramService)
    .name;

现在我不想显式刷新浏览器来重新实例化服务。由于它是单例，构造函数中的任何内容都是固定的。请告诉我如何保持 URL 的动态性以及运行应用程序。

Answer 1

我猜您想要这些 URL 变量:

    /*URL's to Query */ 
    this.PROGRAM_CREATION = chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiURL.program_program_creation;
    this.PROGRAM_LISTING = chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiContextBase + AuthService.getRole() + chpConstants.apiURL.program_view + '/' + AuthService.getId();
    this.PROGRAM_LOAD_PROGRAM = chpConstants.baseURL + ":" + chpConstants.port + chpConstants

随着 chpConstants 的变化而更新？为什么不做这样的事情:

var getProgramListingURL = function(){
   return chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiURL.program_program_creation;
}

programListing() {
    var promise = null;
    if (!promise) {
        promise = this.$http.get(getProgramListingURL()).then(response => {
            return response.data;
        });
    }
    return promise;
}

更好的解决方案:

为这些 http 调用提供服务:

yourApp.factory('API-Service', function($http, chpConstants) {

var api = {};
api.getProgramListing = function() {
  return $http({
    method: 'GET',
    url: chpConstants.baseURL + ":" + chpConstants.port + chpConstants.apiContextBase + AuthService.getRole() + chpConstants.apiURL.program_view + '/' + AuthService.getId();
  });
 };

 api.participantListing = function(program_ref_number){...};
 api.programLoad = function(program_ref_number){...}
 return api;
});

然后将新的 API 服务注入(inject) Controller 并按以下方式使用:

class ProgramService {
constructor($http, chpConstants, AuthService, API-Service) {

    API-Service.getProgramListing().then(function(response){...})