如何在不对 URL 进行硬编码的情况下向 API 服务器发出请求？答案

【问题标题】：How do I make requests to API server without hardcoding the URL?如何在不对 URL 进行硬编码的情况下向 API 服务器发出请求？
【发布时间】：2016-09-10 01:18:15
【问题描述】：

我正在尝试使用 angular 2 实现应用程序，并且需要向我的 API 服务器发出请求。但是，我认为在每个请求中硬编码完整的 URL 是一个坏主意，因为它很可能会发生变化。我看了一下这个帖子： Set base url for angular 2 http requests

但这适用于测试版。我正在使用 RC6，但无法正常工作。任何帮助将不胜感激。

【问题讨论】：

标签： http angular

【解决方案1】：

如果您在提供客户端代码的同一台服务器上运行 json 后端 - 您无需在 url 中指定端口。对于其他 url 设置（比如我的所有服务都在 /api/ 下），我使用一个单独的帮助程序类来处理所有配置等，这个有 /api/ 硬编码，但它只在那个地方。易于手动或在构建过程中更改。

类可以是这样的：

export class Configuration {
    private static _apiUrl = "/api";
    private static _childUrl = `${Configuration._apiUrl}/child`;

    public static apiUrl(url: string): string {
        return `${this._apiUrl}/${url}`;
    }

    public static getChildComponentUrl(url: string): string {
        return `${this._childUrl}/${url}`;
    }
}

【讨论】：

你的意思是像@Thierry Templier 在他在我提到的帖子中的回答中提到的吗？

【解决方案2】：

如果您使用 Gulp 等构建工具构建 Angular 应用，则可以在构建时控制应用的基本 URL。它不允许您在运行时切换基本 URL，但它允许您使用单个命令构建指向本地计算机或服务器的应用程序。

gulpfile.js：

var gulpUtil = require('gulp-util');
var gulpData = require('gulp-data');
var gulpTemplate = require('gulp-template');

var sourceDir = 'path/to/src';
var buildDir = 'path/to/build/target';

gulp.task('default', [],
        function() {
            return gulp.src(sourceDir + 'index.html')
                .pipe(gulpData(function() {
                        return {
                            baseUrl : gulpUtil.env.baseUrl
                        };
                    }))
                .pipe(gulpTemplate())
                .pipe(gulp.dest(buildDir));
        });

然后在你的 index.html 中：

<script>
    angular.module('myApp', [])
    .provider('appConfigProvider', function () {
      return {
        $get: function () {
          return {
              baseUrl: '<%= baseUrl %>'
          };
        }
      };
    });
</script>

然后当你运行 gulp 时，提供 baseUrl 作为命令行参数：

gulp --baseUrl https://my.server.com

这会在 gulpUtil.env 中设置一个可用的环境变量；您还可以通过 props 文件和 gulp-props 提供配置（尽管我没有使用过）。通过单个命令配置 Angular 应用程序是我最喜欢 Gulp 等任务运行程序的用途之一。

祝你好运！

【讨论】：

我认为这个答案是针对 angular 1.* 而不是 angular 2