Wie, um das setup baseUrl für Winkel-HttpClient?

Habe ich nicht einen Weg finden, in Dokumentation zu set base-API-url für alle http-Anfragen. Ist es möglich mit Winkel-HttpClient?

Sie konnte erstellen eine interceptor, dass wird aktualisieren Sie die url mit welcher Basis wollen Sie.
ist es nicht ein overhead verwenden Abfangjäger für diesen Fall?
Wenn Sie ändern möchten nur das es ja sein könnte. Eine andere Möglichkeit wäre, eine einfache Funktion getApiUrl (), die alle Transformationen, die erforderlich sind, wie das hinzufügen der Basis-Pfad.
Oder erstellen Sie eine Klasse, abgeleitet von der XHRBackend und erstellen Sie die Verbindung mit der Basis-url im Ort. Es gibt vor-und Nachteile für jeden Ansatz bin ich nicht bewusst 'einfacher' Weise der Bereitstellung dieser.
Ich persönlich benutze einen interceptor aber empfehlen zum hinzufügen von anderen Funktionen als gut, wie die Festlegung der Kopfzeilen für alle Anforderungen.

InformationsquelleAutor Stepan Suvorov | 2017-08-17

angular angular-httpclient

68

Verwenden Sie die neue HttpClient-Interceptor.

Erstellen Sie eine korrekte injizierbaren, die 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);
  }
}
```
Den HttpInterceptor kann Klon der Anfrage und ändern Sie es wie Sie wollen, in diesem Fall habe ich den vorgegebenen Standard-Dateipfad für alle http-Anforderungen.

Bieten die HttpClientModule mit den folgenden Konfigurationen:
```
providers: [{
      provide: HTTP_INTERCEPTORS,
      useClass: APIInterceptor,
      multi: true,
    }
  ]
```
Nun alle Ihre Anfragen werden beginnen mit your-api-url/
- Das ist großartig! Eine Sache, obwohl, brauchen Sie nicht zu verwenden Injizierbare decorator hier, es ist nur erforderlich, wenn Sie möchten, ot injizieren etwas in die dekorierte Klasse.
- Und wenn Sie möchten, verschiedene HttpClients die Verwendung verschiedener base-urls wie handhabst du das? Irgendeine Art von Markierung in der Anforderung, dass die injizierbare schaltet, mehrere Injektoren. Scheint nicht bei allen elegant zu mir.
- Ich Weinen, wenn ich sehe, dieser code. Warum kann nicht wir nur erstellen Sie eine client-Instanz, die eine baseUrl Eigentum statt diese middleware-Lösung wie, dass ist übertrieben für so ein einfaches use-case
- Dies als Antwort akzeptiert ? 🙂
InformationsquelleAutor TheUnreal
19

Basierend auf TheUnreal's sehr nützlich, Antwort, der interceptor kann geschrieben werden, um die Basis-url durch DI:
```
@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 kann durch die Anwendung Modul:
```
providers: [
    { provide: "BASE_API_URL", useValue: environment.apiUrl }
]
```
wo environment wird das Objekt automatisch erstellt, indem die CLI beim generieren des Projekts:
```
export const environment = {
  production: false,
  apiUrl: "..."
}; 
```
- wo stellen Sie BASE_API_URL?
- da gibt es mehr als nur ein Kommentar, ich habe die Informationen in der Antwort. Grundsätzlich, der Wert ist "Global".
- was, wenn wir brauchen, verbrauchen 2 verschiedene BASE_API_URL? Ich meine, wir haben ein Projekt und es wird 2-API-Server mit unterschiedlicher Basis
- definieren Sie zwei Eigenschaften in environment - Objekt und geben Sie zwei Werte in der Anwendung-Modul (ich gehe davon aus, dass verschiedene Komponenten verwenden, entweder von Ihnen, so macht es Sinn, zu injizieren, was nötig ist in die jeweilige Komponente).
- das problem ist, dass, wie die, die Abfangjäger würden in der Lage sein zu definieren, welche URL zu verwenden.
InformationsquelleAutor Alexei
5

müssen Sie nicht unbedingt eine Basis-URL mit HttpClient, den docs sagt, Sie müssen nur geben Sie den api-Teil des Antrags, wenn Sie Anrufe auf dem gleichen server, es ist einfach so:

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

Allerdings können Sie, wenn Sie brauchen oder wollen, geben Sie eine Basis-URL.

Ich habe 2 Vorschläge dazu:

1. Eine helper-Klasse mit einer statischen Klasse Eigenschaft.
```
export class HttpClientHelper{

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


this.http.get(`${HttpClientHelper.baseURL}/api/items`);//in your service class
```
2. Eine Basisklasse ist eine Klasse Eigenschaft, so dass jeder neue Dienst soll verlängern:
```
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`);
  }

}
```
InformationsquelleAutor skinny_jones

Auszüge aus Visual studio 2017 asp.net Kern webapi Winkel-Beispiel-Anwendung.

zählen die folgenden Zeilen in der Main.ts

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

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

in der Komponente

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

meine komplette main.ts-code sieht wie folgt aus

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));

meine Komponente code sieht wie folgt aus

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;
}

Dies ist eine ziemlich große Lösung. Vor allem, weil es kann die Option --base-href-Funktionalität, die eckigen bereits inklusive - macht es so einfach, host-api + angular-app in einem Unterordner.

InformationsquelleAutor Moorthi Daniel

1

Ich denke, es gibt keine Standard-Weg, dies zu tun. Tun die HttpService und im inneren kann man definieren-Eigenschaft des Standard-URL, und stellen Methoden zum aufrufen von http.Holen Sie sich und andere mit Ihren URL-Eigenschaft. Dann injizieren HttpService statt HttpClient
- Ich habe es für den Http-Dienst, hoffte aber, dass HttpClient ist ein bisschen schlauer
InformationsquelleAutor Anton Lee

Warum nicht ein HttpClient-Unterklasse, hat einen konfigurierbaren baseUrl? So, wenn Ihre Anwendung benötigt, um die Kommunikation mit mehreren Dienstleistungen können Sie entweder eine andere Unterklasse für jeden, oder erstellen Sie mehrere Instanzen einer Unterklasse, jede mit einer unterschiedlichen Konfiguration.

@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);
  }
}

InformationsquelleAutor Neutrino

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.