74

我没有在文档中找到为 HTTP 请求设置基本 API URL 的方法。是否可以使用 Angular HttpClient 来做到这一点？

4

7 回答 7

106

使用新的 HttpClient 拦截器。

创建一个适当的注射剂，实现HttpInterceptor：

import {Injectable} from '@angular/core';
import {HttpEvent, HttpInterceptor, HttpHandler, HttpRequest} from '@angular/common/http';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class APIInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const apiReq = req.clone({ url: `your-api-url/${req.url}` });
    return next.handle(apiReq);
  }
}

HttpInterceptor 可以克隆请求并根据需要更改它，在这种情况下，我为所有 http 请求定义了一个默认路径。

为 HttpClientModule 提供以下配置：

providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: APIInterceptor,
      multi: true,
    }
  ]

现在您的所有请求都将从your-api-url/

于 2017-08-17T13:02:38.547 回答
48

基于TheUnreal的非常有用的答案，可以编写拦截器以通过 DI 获取基本 url：

@Injectable()
export class BaseUrlInterceptor implements HttpInterceptor {

    constructor(
        @Inject('BASE_API_URL') private baseUrl: string) {
    }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        const apiReq = request.clone({ url: `${this.baseUrl}/${request.url}` });
        return next.handle(apiReq);
    }
}

BASE_API_URL可以由应用模块提供：

providers: [
    { provide: "BASE_API_URL", useValue: environment.apiUrl }
]

environment生成项目时 CLI 自动创建的对象在哪里：

export const environment = {
  production: false,
  apiUrl: "..."
};
于 2018-04-10T15:31:12.463 回答
9

为什么不创建一个具有可配置 baseUrl 的 HttpClient 子类？这样，如果您的应用程序需要与多个服务通信，您可以为每个服务使用不同的子类，或者创建单个子类的多个实例，每个实例具有不同的配置。

@Injectable()
export class ApiHttpClient extends HttpClient {
  public baseUrl: string;

  public constructor(handler: HttpHandler) {
    super(handler);

    // Get base url from wherever you like, or provision ApiHttpClient in your AppComponent or some other high level
    // component and set the baseUrl there.
    this.baseUrl = '/api/';
  }

  public get(url: string, options?: Object): Observable<any> {
    url = this.baseUrl + url;
    return super.get(url, options);
  }
}
于 2018-09-06T09:18:31.913 回答
9

每个关注阿列克谢的人都回答并且无法像我一样工作 - 这是因为您还必须将此元素添加到提供者数组

{
  provide: HTTP_INTERCEPTORS,
  useClass: BaseUrlInterceptor,
  multi: true
}

不幸的是，我的声誉太低，无法对他的回答添加评论。

于 2021-06-25T10:23:24.170 回答
6

摘自 Visual Studio 2017 asp.net core webapi angular 示例应用程序。

在 Main.ts 中包含以下行

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

在你的组件中

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }

我完整的 main.ts 代码如下所示

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

export function getBaseUrl() {
  return document.getElementsByTagName('base')[0].href;
}

const providers = [
  { provide: 'BASE_URL', useFactory: getBaseUrl, deps: [] }
];

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

我的组件代码如下所示

import { Component, Inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'fetch-weather',
  templateUrl: './weather.component.html',
  styleUrls: ['./weather.component.scss']
})

export class WeatherComponent {
  public forecasts: WeatherForecast[];

  constructor(http: HttpClient, @Inject('BASE_URL') baseUrl: string) {
    http.get<WeatherForecast[]>(baseUrl + 'api/SampleData/WeatherForecasts').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
}

interface WeatherForecast {
  dateFormatted: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}
于 2019-03-13T13:50:31.100 回答
5

你不一定需要一个带有HttpClient的基本 URL，文档说你只需要指定请求的 api 部分，如果你正在调用同一台服务器，它很简单，如下所示：

this.http.get('/api/items').subscribe(data => {...

但是，您可以根据需要或想要指定基本 URL。

我有 2 条建议：

1 . 具有静态类属性的辅助类。

export class HttpClientHelper {

    static baseURL: string = 'http://localhost:8080/myApp';
}


this.http.get(`${HttpClientHelper.baseURL}/api/items`); //in your service class

2 . 具有类属性的基类，因此任何新服务都应扩展它：

export class BackendBaseService {

  baseURL: string = 'http://localhost:8080/myApp';

  constructor(){}
}

@Injectable()
export class ItemsService extends BackendBaseService {

  constructor(private http: HttpClient){  
    super();
  }
      
  public listAll(): Observable<any>{    
    return this.http.get(`${this.baseURL}/api/items`);
  }

}
于 2017-11-15T16:31:39.403 回答
2

我认为没有默认的方法可以做到这一点。做 HttpService 并在里面你可以定义你的默认 URL 的属性，并使用你的属性 URL 调用 http.get 和其他方法。然后注入 HttpService 而不是 HttpClient

于 2017-08-17T12:55:04.473 回答